CODEWITHSUNDEEP
javascriptleaflet
Mats Raemen
Mats Raemen

Reputation: 1812

Leaflet: showing marker names when zoomed in to certain level

I have created a map with Leaflet showing certain companies in my area. Each company has their own marker on the map.

When zoomed in close enough (let's say zoomLevel 16), I want to show the company's name above it's marker. I thought of doing this by using popups and then creating a LayerGroup containing all the popups since you can otherwise only show 1 popup at a time. I create my popups when creating the company markers using 

popup.setLatLng(companyLocation);

and immediately add it to my LayerGroup.

So I bind a zoomend event to my map that executes a function that gets the current zoomLevel. If the zoomLevel is 16 or higher, I add the LayerGroup to the map using

companyPopupLayerGroup.addTo(map);

and if the zoomlevel is below 16, I remove the LayerGroup to the map using 

companyPopupLayerGroup.clearLayers();

This works fine if I create my map with a default zoomlevel of 16 or higher, but if I zoom out and back in again or start from a lower zoomLevel and zoom in, it doesn't show anything.

I was wondering what I could be doing wrong and if there isn't another way to show the company names without using popups (which don't seem to be made for this kind of usage).

If I need to show specific code, I will gladly do so, but first I'm trying to find out if there's a more correct way of doing this.

Thanks!

Upvotes: 1

Views: 1632

Answers (1)

Mats Raemen
Mats Raemen

Reputation: 1812

Apparently popups was not the way to go.

I ended up using labels (https://github.com/Leaflet/Leaflet.label) which works perfectly

Upvotes: 1

Related Questions