leaflet maps - remove marker layer group and add another marker layer group

Question

My objective here is to remove all the markers added to leaflet using layer group for a paginated listing page.When navigated to other page i am able to remove layer group of previous page, but on adding new layer group of markers(markers of next page) i am getting this error in browser and markers are not added to the map

error is - Uncaught TypeError: layer.onAdd is not a function;

code is

var leaflet_factory = {
    //initializing map container
    initialize: function() {
        var map = L.map('mapresults');
        var googleLayer = new L.Google('ROADMAP');
        map.addLayer(googleLayer);
    },

    //set view of mao
    setview: function(lat, long, zoom) {

        map.setView([lat, long], zoom);

    },

    //add list of markers to maps

    addMarkersList: function(marker_array) {
        var markerArray = [];
        $.each(marker_array, function(key, data) {
            var marker_pointer = L.marker([data.lat, data.long]).bindPopup('<a href="/' + $(this).attr('data-slug') + '"><strong>' + $(this).attr('data-vendor').capitalize() + '</strong><br></a>' + $(this).attr('data-location').capitalize());
            markerArray.push(marker_pointer);
        });
        window.page_makers_layer = L.layerGroup(markerArray);
        window.page_makers_layer.addTo(map);

    },

    //remove the current marker layer group

    removeMarkerLayer: function() {

        map.removeLayer(window.page_makers_layer);

    }
}

The problem with the above code is when calling addMarkersList for first time after initializing the map container it works. But when i call addMarkerList with new list of markers(lat long pair) after calling removeMarkerLayer to remove existing marker layer it gives me following error which i am trying to debug.

Uncaught TypeError: layer.onAdd is not a function

Please point where i am doing wrong.

There is still not enough information to help you. Anyway, it is very strange that you define your map within initialize scope only. — ghybs
yeah, it is bad.but this is not the actual code that i have in production.The actual code is even more worst written by some other guy who is now not part of the team.Thanks anyway for educating me. — user3775217

IvanSanchez IvanSanchez · Accepted Answer · 2016-06-16T15:45:07

You're doing a few things wrong. Not catastrophically wrong, just antipattern wrong, e.g.:

map.removeLayer(window.page_makers_layer);

Do NOT use window globals to store references to your data (unless you're really, really, really sure of what you're doing). If you're wrapping map creation in a factory or a module, store your data in that scope.

var leaflet_factory = {

Do not name something a factory if it doesn't follow the factory pattern. It's very confusing. Just name it differently, make it a CJS module instead, or skip it entirely.

Research into common programming patterns. Do you have something that appears only once in the webpage? Consider singletons.

gives me following error which I am trying to debug.

How are you trying to debug it? Learn to use your browser debugging capabilities, and provide a complete stack trace.

You should be able to easily keep track of the value of the problematic variable, and see if it is an instance of L.LayerGroup when the call is made.

leaflet maps - remove marker layer group and add another marker layer group

1 Answers