1

Using Leaflet.js, I have two LayerGroups:

var LayerSeventeen = new L.LayerGroup();
var LayerEighteen = new L.LayerGroup();

And their respective markers bound to those layersGroups:

var marker_reptile_house =  L.marker([33.92641, -83.387], {icon: buildingPin}).addTo(map);
LayerSeventeen.addLayer(marker_reptile_house);

var marker_gator_slider_deck =  L.marker([33.92669, -83.38705], {icon: animalPin}).addTo(map);
LayerEighteen.addLayer(marker_gator_slider_deck);

And the javascript to run it in a script named "using-leaflet.js":

// more stuff above... 
map.setView([33.927106, -83.387013], 17)

map.on('zoomend', onZoomend);
function onZoomend(){
    if(map.getZoom()>=17){
    map.addLayer(LayerSeventeen);
    };
    if(map.getZoom()>=18){
    map.addLayer(LayerEighteen);
    };
    if(map.getZoom()<17) {
        map.removeLayer(LayerSeventeen);
    };
    if(map.getZoom()<18) {
        map.removeLayer(LayerEighteen);
    };
};

// more stuff below...

This all works as described in this example (not mine): http://geohacker.github.io/leaflet-snippets/

Except all of the markers show up when the page first renders at zoom level 17. No zooming is involved.

How do I get it to render only LayerSeventeen on the first page render?

2

If you look here: http://leafletjs.com/reference.html#tilelayer you can set up maxZoom and minZoom for layers.

I would have thought that this is what you're trying to achieve with your layers, right?

Either do that or start your initial state in the way you want it. So where you have:

var marker_reptile_house =  L.marker([33.92641, -83.387], {icon: buildingPin}).addTo(map);
LayerSeventeen.addLayer(marker_reptile_house);

get rid of the '.addTo(map)' bit, like this: var marker_reptile_house = L.marker([33.92641, -83.387], {icon: buildingPin}); LayerSeventeen.addLayer(marker_reptile_house);

Still, the first option, adding 'maxZoom: 17' or whatever is appropriate, as another option in the L.marker() bit, is best and saves you writing the logic.

  • Alex, thanks for your reply. Just to be sure I understand: I don't have to add each marker to the map singly because I'm adding them to the LayerGroup. When the LayerGroups get added to the map, that's when they manifest. In which case I would use... var LayerSeventeen = new L.LayerGroup({ maxZoom:17 }); var marker_reptile_house = L.marker([33.92641, -83.387], {icon: buildingPin}); LayerSeventeen.addLayer(marker_reptile_house); // Lastly I would do: map.addLayer(LayerSeventeen); Is this correct? – Chris Nov 25 '13 at 5:32
  • Hi @Chris. Do it all the same as before. Add each layer to the layergroup. But don't add the layer to the map. Maintain the layers' visibility by adding the layergroup to the map. Or by setting the maxZoom on the layer, before adding them to the layergroup. – Alex Leith Nov 25 '13 at 22:44
  • I'm going to continue working on this. Alex, I really appreciate your help. – Chris Dec 11 '13 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.