CODEWITHSUNDEEP
leafletmapbox
mtown
mtown

Reputation: 99

Removing geojson layers Mapbox.js/Leaflet.js

I'm having trouble removing multiple geojson layers at a time. When I keep them as feature layers, there is memory of each and every layer added, one right after the other. But when they become marker layers only the last layer clicked is removed.

I've tried adding them to a group and calling clearLayers on the group, but that still only removes the last layer added, not all. Tried passing an id also, but that didn't seem to work either.

    $(function() {

        var geojson;

        var map = L.mapbox.map('map')
            .setView([29.9629, -90.0603], 6);

        var filters = document.getElementById('filters');

        var layerTwo = L.mapbox.featureLayer()
            .loadURL('panel/data/tamorethan5.geojson')
            .on('ready', layer)
        var layerOne = L.mapbox.featureLayer()
            .loadURL('panel/data/talessthan5.geojson')
            .on('ready', layer)
        var layerThree = L.mapbox.featureLayer()
            .loadURL('panel/data/palessthan5.geojson')
            .on('ready', layer)
        var layerFour = L.mapbox.featureLayer()
            .loadURL('panel/data/pamorethan5.geojson')
            .on('ready', layer)

        function layer() {
            var assetLayerGroup = new L.LayerGroup();

            var layer = this
            var name = layer.getGeoJSON().name;
            var item = filters.appendChild(document.createElement('div'));
            var checkbox = item.appendChild(document.createElement('input'));
            var label = item.appendChild(document.createElement('label'));
            checkbox.type = 'checkbox';
            checkbox.name ='radio';
            checkbox.id = 'myCheckbox';
            checkbox.value = name;
            label.innerHTML = name;
            label.class = label;
            label.setAttribute('for', name);
            checkbox.addEventListener('change', update);

            function update(val) {
                if (checkbox.checked) {
                console.log(layer)
                drawLocations(layer._geojson)
                } else {
                newMapLayer.clearLayers();

                }
            }

            drawLocations = function(layer) {
                L.stamp(layer)
                newMapLayer = L.geoJson(layer, {
                    style: style,
                    onEachFeature: onEachFeature,
                    pointToLayer: function(feature, latlng) {
                        var rad = 3;
                        var col = getColor(feature.properties, 'status');
                        return L.circleMarker(latlng, {
                            radius: rad,
                            fillColor: "#ff7800",
                            stroke: true,
                            weight: 2,
                            opacity: 0.8,
                            fillOpacity: 0.8,
                            className: "circle"
                        });
                    }


                }).addTo(map);

            };
        } //end layer

Upvotes: 1

Views: 2116

Answers (1)

tmcw
tmcw

Reputation: 11882

Hm, okay - a few tweaks are necessary or recommended here:

drawLocations(layer._geojson)

Anything starting with a underscore in leaflet or Mapbox should be considered off-limits. Use the .getGeoJSON method instead.

drawLocations(layer.getGeoJSON());

It doesn't look like you're actually adding layers to the assetLayerGroup. If you wanted to do that, you would call

var assetLayerGroup = L.layerGroup().addTo(map);

Right after the

    var map = L.mapbox.map('map')
        .setView([29.9629, -90.0603], 6);

lines, and instead of calling .addTo(map) on your L.geoJson layers, you would call .addTo(assetLayerGroup).

Then calling assetLayerGroup.clearLayers() would remove all of the added layers.

Upvotes: 1

Related Questions