Leaflet will become even better if you add …

Marker Visibility Control

It would be nice to be able to control the visibility of a marker (hide/show) at either the marker or the layer level. I currently do this in both Google Map API and Openlayer Map API to allow the user to filter between different types of markers on the map.

http://www.topix.com/map

98 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    A ChangA Chang shared this idea  ·   ·  Admin →
    planned  ·  Vladimir AgafonkinAdminVladimir Agafonkin (maintainer, Leaflet) responded  · 

    Technically, doing removeLayer and addLayer for hiding/showing markers has the same performance as hiding them with display = ‘none’, as addLayer only initializes the marker once and only appends it to the DOM on subsequent calls. So I don’t see much need to add such methods for individual markers.

    However this would be a very useful feature for LayerGroup’s, where I could implement putting all layers from the same group into a div container to be able to hide them all at once for a considerable performance gain. This is definitely in the plans.

    4 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • KevinKevin commented  · 

        I appended a custom "show" attribute to my marker, and coded a zoom level change handler which compared the "show" level and the current zoom level, and thereby decided whether to show it on the map or not. I can get away with having only one layer-group of markers per base layer while still being able to render them differently according to zoom. Some sample code from me follows:

        var marker = new L.marker(...
        show: <some number>, ...);

        ... // add marker(s) to layers ...

        function updateMarkersOnMap(current_markers, zoom_level) {
        var markers = current_markers.getLayers();
        for (i in markers) {
        var marker = markers[i];
        showMarkerIfEnabled(marker, zoom_level);
        applyCSSToMarker(marker, zoom_level);
        }
        map.addLayer(current_markers);
        }

        function showMarkerIfEnabled(marker, zoom_level) {
        if (marker.options.show > zoom_level) {
        marker.options.opacity = 0;
        return false;
        } else {
        marker.options.opacity = 1;
        return true;
        }
        }

        It's not difficult to do this right now as you can append as many custom attributes as you want to the marker object. In fact, I can display different texts (short form and long form, styled differently too) using the setIcon method.

        Performance wise, it still involves removing and re-displaying the markers.

        function onZoomend() {
        removeMarkers();
        updateMarkersOnMap(current_markers, map.getZoom());
        }

      • IgoryIgory commented  · 

        In case I just want to rename marker(change its title), I also had to remove and recreate marker using map.removeLayer<marker>)....

      • Bradford McCarronBradford McCarron commented  · 

        Hi Vladimir,

        I was just wondering if you were able to move all of the layers into a single div container? This would make thousands of markers disappear in an instant! Please let me know if this is possible or when it might be possible. You're the man. Thank you.

      • A ChangA Chang commented  · 

        Hey, I found the latest version support this via map.addLayer(<marker>), and map.removeLayer<marker>), I didn't realize that a single marker counts as layer, but in this case anything that supports the ILayer interface can be added/removed in this way. I was previously using LayerGroups to hide/show different types of layers. Nicely you can control visibility with both types pretty much at the same time.

      Feedback and Knowledge Base