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 ...
- 2,209
16
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 ...
- 1,905
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');
- 241
14
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://...
- 1,905
13
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: {...
- 1,905
11
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:
// Always remove the ...
- 1,905
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 ...
- 625
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/...
- 6,938
10
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');
}
- 201
10
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 ...
- 116
10
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.
...
- 2,209
10
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 ...
- 201
9
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 ...
- 625
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 ...
- 1,448
7
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', ...
- 1,905
7
votes
Accepted
Matching multiple properties in mapbox gl js filter
Looks like I had some of my expressions logic mixed up with my filter logic. Anyhow, this works
var breweryFilter=[
"all",
["in", "stateNam", 'Utah','Texas','Florida'],
["in", "...
- 1,695
7
votes
How to change the icon-image on click
This is a good question.
Typically you'd use feature-state for this like in https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/, however feature-state doesn't support the icon-image layout ...
- 2,209
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 ...
- 30.1k
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) => {
// ...
});
- 625
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 ...
- 2,209
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 ...
- 203
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.
- 79.9k
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 ...
- 319
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": {
...
- 167
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 ...
- 2,717
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 ...
- 2,351
5
votes
How to query features of raster layers hosted on GeoServer that are added to Mapbox?
Normally, with WMS, you start by requesting a single raster-image map that represents an area bounded by some real-world coordinates. The coordinates will be in some specific system as identified by ...
- 221
5
votes
Accepted
Using ST_AsMVT with ST_TileEnvelope clipping in mapbox
Your geometries go beyond the range of validity for your projection, so those tiles are failing to render. You need to clip them before you transform (or alternately, clip your tile envelopes before ...
- 19.8k
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 ...
- 81
5
votes
Open source alternatives to mapbox-gl?
MapLibre GL JS seems a serious fork currently.
https://github.com/maplibre/maplibre-gl-js
- 9,546
Only top scored, non community-wiki answers of a minimum length are eligible