16 votes
Accepted

Removing events map.on("click"...) from mapbox gl?

First split out the click function so it can be referenced on it's own: function onClick(e) {...} Then register your on click with: map.on('click', 'clusters', onClick); Then just before you ...
user avatar
  • 2,083
14 votes

Mapbox GL: Possible to move navigation controls?

I could not get it to work with @james-conkling 's example above. I did this instead: var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'top-left');
user avatar
14 votes
Accepted

mapbox gl expression to match multiple values

Yes, the match expression works, it should look like: let filter = ['match', ['get', 'id'], [1, 2, 3], true, false] map.setFilter('layer_name',filter) Update: Since Mapbox GL JS v1.6.0, there's an ...
user avatar
  • 1,603
11 votes
Accepted

Custom icon for clusters in Mapbox GL Js

I wound up getting a satisfactory result, but it took some doing. I expanded on this very helpful Supercluster property aggregation example with custom icons. The main thing is to use the external ...
user avatar
  • 585
11 votes
Accepted

How to add CSS styling in Mapbox GL Popup?

I've read this and several posts on SE, which pointed me in the right direction Your link is pointing to the docs about mapbox.js which is different from mapbox-gl.js. Docs for Mapbox GL JS: https://...
user avatar
  • 1,603
11 votes

How do I increase the font size of contents in Map in Leaflet.js?

If you look at a single tile, the native resolution is 512x512, whereas the default tileSize in the tileLayer API is 256 Try setting the tileSize and zoomOffset: L.tileLayer('https://api.mapbox.com/...
user avatar
  • 6,738
9 votes

How to test if a layer exist in a MapBox GL JS map?

Better way: var mapLayer = map.getLayer('route'); if(typeof mapLayer !== 'undefined') { // Remove map layer & source. map.removeLayer('route').removeSource('route'); }
user avatar
  • 191
8 votes

highlight feature with click in mapbox gl

You can query the feature using queryRenderedFeature() (you need to upgrade from v0.15 to v0.16) then send the results back into a new layer... This is how I "select" data in most of my apps. I ...
user avatar
  • 1,368
8 votes

Mapbox GL JS - "Source Loaded" event

I was dealing with this again today, so here's an update! As of mapbox-gl v0.44.2, it's still not quite reliable enough to listen for the sourcedata event and check the properties of the event ...
user avatar
  • 585
8 votes

How to filter layer features by value?

The "Filter symbols by toggling a list" example toggles the visibility of whole layers. For more fine grained filtering use map.setFilter, see https://www.mapbox.com/mapbox-gl-js/api/#map#setfilter. ...
user avatar
  • 2,083
6 votes

Create my own MapBox Vector tile and self hosting

As stated by other people, mbtiles were just raster format stored in a sqlite database using a particular specification. Nowadays, it's seems that it's reuse to store vector tiles using the same ...
user avatar
  • 28.7k
6 votes

How to test if a layer exist in a MapBox GL JS map?

From: https://github.com/mapbox/mapbox-gl-js/issues/4466#issuecomment-288177042 To safely remove a layer that may or may not exist, guard the call to removeLayer with getLayer: if (map.getSource(...
user avatar
  • 1,603
6 votes

Mapbox GL JS - "Source Loaded" event

The solution is to use the undocumented style.load event that fires when new things finish loading into the style. map.once('style.load', (ev) => { // ... });
user avatar
  • 585
6 votes
Accepted

Mapbox GL JS - "Source Loaded" event

You can use below line of code map.on('idle',function(){ //your code here }) Once all the rendering part has been done then the above function will be called and then you can perform other ...
user avatar
  • 76
6 votes
Accepted

Combining popup info from overlapping polygons in Mapbox GL JS

Within your map.on('click') callback, e.features is an array of all features from testlayer at the point clicked. So instead of only choosing the first in your popup, you can display all values like ...
user avatar
  • 2,083
6 votes
Accepted

geojson to mapbox vector tile in nodejs

I ended up using those two packages : https://github.com/mapbox/geojson-vt (for getting a tile from geojson) and https://github.com/mapbox/vt-pbf (for transforming this tile into pbf) I made a quick ...
user avatar
6 votes
Accepted

Turf Envelope returns 5 array coordinates for rectangle polygon

It is returning a polygon which must have the start and end point the same to close the polygon.
user avatar
  • 75.1k
6 votes
Accepted

Mapbox map with no style, only self hosted vector data

To remove the basemap from the example shown in your question (https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/), just replace style: 'mapbox://styles/mapbox/streets-v11' with style: {...
user avatar
  • 1,603
5 votes

Is there a Mapbox GL renderer that outputs SVG?

TLDR; There is no direct way to do this, the best option is to evaluate why you need SVG and why you need Mapbox GL and choose other tools/options. First, this depends on whether your goal is to ...
user avatar
5 votes

Mapbox Vector Tiles from Geoserver 2.11 in Mapbox GL JS

Thanks to anneb I got it to work and this is how it looks like: Here's the relevant portion of the script (c.f. links below): var simple = { "version": 8, "sources": { "osm": { ...
user avatar
  • 161
5 votes
Accepted

Using a variable for map.setcenter in mapbox gl js

Step 1: Your method getURLParameter("location") returns latitude,longitude values as string "-84.83762741088867,43.179770125276974" Step 2: Store returned values in a variable //It will return ...
user avatar
  • 2,691
5 votes

How to add CSS styling in Mapbox GL Popup?

Mapbox GL JS: If you need even more control over the styling of the popup (e.g. set background color for different types of popups), you can set a custom classname directly on the top level of the ...
user avatar
  • 151
5 votes

How to add links to popups in Mapbox GL JS

Your assumption in the last paragraph is actually true, because this has nothing to do with Mapbox GL JS, but only with basic HTML. Basically you have to define a link with the <a> tag inside ...
user avatar
  • 2,281
5 votes
Accepted

How to get geometry of clicked feature?

You're right that queryRenderedFeatures returns a GeoJSON Feature Object. You may access it's Geometry Object like in the following example (for the first feature in features): map.on('click', ...
user avatar
  • 1,603
5 votes

Loss of vector line accuracy when exporting from QGIS

First off: Mapbox GL accepts EPSG:4326 - WGS84 referenced coordinates only, and transforms to either EPSG:3857 - Spherical (Web) Mercator directly, or into Vector Tile space. Then: Mapbox GL ...
user avatar
  • 81
5 votes
Accepted

How do I translate MapBox GL JS GPS coordinates into SWEREF 99 TM ones?

Library proj4.js (http://proj4js.org/) is usually used for coordinated transformation in JS. To use it one needs CRS definition, which can be easily found on epsg.io site. SWEREF 99 TM coordinate ...
user avatar
  • 17.1k
4 votes

Mapbox GL - How to populate custom icons using vector source?

You need to change the type of your layer from circle to symbol and add an icon-image at the layout properties. The code should look like this: map.addLayer({ 'id': 'schoolData', 'type': 'symbol',...
user avatar
  • 2,281
4 votes
Accepted

Mapbox GL Js: what is the sourceID?

There isn't a public API to get all source IDs from a map, but this.map.style.sourceCaches will return an object wherein each key is a source ID and its value is a source cache (the class ...
user avatar
4 votes

Alternative to Tippecanoe for generating Mapbox vector tiles on command-line

Tippecanoe is designed for lines and polygons as well. Here's a recommended starting point for representing polygons at all zoom levels, with one property you want to aggregate at low (zoomed-out) ...
user avatar
4 votes
Accepted

Mapbox vector tiles version 2 MVTv2 and Geoserver 2.13.x

It's using no.ecc.vectortile's java-vector-tile. https://github.com/geoserver/geoserver/blob/master/src/extension/vectortiles/pom.xml#L31-L34 We use a subclass of the main encoder - we do our own ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible