CODEWITHSUNDEEP
javascriptmapboxmapbox-glmapbox-gl-js
user3226932
user3226932

Reputation: 2242

MapboxGL Javascript API: displaying popup for all markers on map not working on multiple layers

I have multiple layers on my map, each one corresponding to a certain symbol (a Mapbox icon) and containing all the markers with that symbol. I want every marker to be clickable with its own popup. However,only the last layer that gets added allows the user to click on those markers and see the popup, while the previous layers get covered so the markers in those layers are not clickable.

Here's the JS Fiddle (most of the code is from the two examples on the website, and I'm trying to combine them together)

https://jsfiddle.net/wy5rdwzz/

I need this line of code to be able to filter the markers by toggling a list, and I need every single marker to be clickable. 

"filter": ["==", "marker-symbol", symbol]

How would I go about making all the markers accessible (so that they can be clicked and a popup will show up), not just the ones in the last layer that gets added on?

Also, how would you go about displaying the name of each marker next to the corresponding marker, if each marker has its own layer?

Upvotes: 1

Views: 1564

Answers (1)

Luis Martins
Luis Martins

Reputation: 56

The problem was that you were never storing your layer ids. Each time you added a layer, you were overwriting layerID with the latest id. Thus, when you created your onclick & mousemove listeners, you were only adding these listeners to the most recent layer: { layers: [layerID] }.

I've edited your jsfiddle (here) to push each layer id into an array each time a layer is added: { layers: layerIdCollection }.

Let me know if you have any questions :)

Upvotes: 4

Related Questions