Remove custom geojson markers (loaded with Leaflet) after zoom

Question

I'm adding some points to a map using the code below and they look great. I'm also adding some json polygons without issue.

When a certain zoom level is reached I would like the points and polygons to turn off. Using the map.removeLayer(name of polygon) turns off the polygon perfectly and then zoom back out I use map.addLayer(name of polygon) and they come back (using 'zoomend' and if else statement).

The point features do not react to the removeLayer function like the polygons do. I've also tried to harvestPoints.setOpacity(0) which does not work either. What code should I use to turn these geojson markers "on" and "off" like the polygon features?

function onEachPoint(feature, layer) {            
    layer.bindPopup(feature.properties.MGNT_AREA.toString());
    layer.on('click', function (e) { layer.openPopup(); });
    layer.bindLabel(feature.properties.MGNT_AREA.toString(), {
        noHide: true,
        className: "my-label",
        offset: [-2, -25]
    }).addTo(map);
};

var areaIcon = {
    icon: L.icon({ 
        iconUrl: 'labels/MonitoringIcon.png',
        iconAnchor: [20, 24]
    })
};

var harvestPoints = new L.GeoJSON.AJAX('labels/dfo_areas_point.json', {
    onEachFeature: onEachPoint,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, areaIcon);
    }
});

ghybs ghybs · Accepted Answer · 2015-11-27T08:22:56

Not sure exactly what is the root cause for your issue, as we are missing how exactly you reference yours points (markers) when you try to remove them from the map.

Normally, there should be no difference between polygons and points (markers) to achieve what you described (removing the layers from the map at certain zoom level, and add them back at other zooms).

Note that setOpacity is a method for L.Markers, whereas you apply it to harvestPoints which is your geoJson layer group.

What may happen is that you add individual points (markers) to your map (last instruction in your onEachPoint function), but try to remove the layer group harvestPoints from map. Because it seems to be never added to the map, nothing happens.

If you want to turn on/off ALL the points in your harvestPoints layer group at the same time, then you would simply add / remove that layer group to / from the map, instead of adding individual markers:

var harvestPoints = L.geoJson.ajax('labels/dfo_areas_point.json', {
    onEachFeature: onEachPoint,
    pointToLayer: function (feature, latlng) {
                                // make sure `areaIcon` is an OPTIONS objects
        return L.marker(latlng, areaIcon);
    }
}).addTo(map); // Adding the entire geoJson layer to the map.

map.on("zoomend", function () {
    var newMapZoom = map.getZoom();

    if (newMapZoom >= 13) {
        map.addLayer(harvestPoints);
    } else {
        // Removing entire geoJson layer that contains the points.
        map.removeLayer(harvestPoints);
    }
});

Side note: popups open on click by default, you should not need to add an on click listener for that?

Demo: http://jsfiddle.net/ve2huzxw/62/

Remove custom geojson markers (loaded with Leaflet) after zoom

1 Answers