First attempt at working with Leaflet to display and work with a dynamic map, and I'm running into an error when I attempt to add a new layer of markers to a LayerGroup.

Here is my Map object, encapsulating the functionality of leaflet:

function Map() {
  //properties/fields
  var map;
  var layers = [];  

  return {
    setMap: function(aMap) {map=aMap;},
    setView: function(aView) {map.setView(aView);},
    addLayer: function(aLayer, name) {layers[name] = aLayer; map.addLayer(aLayer);},    
    addListings: function(anArr, name) {
        var mLayer = [];                                           
        for (var i = 0; i < anArr.length; i++) {
            var aMarker = L.marker([anArr[i][0], anArr[i][1]]);
            mLayer.push(aMarker);                            
        };
        layers[name] = L.layerGroup(mLayer);
        layers[name].addTo(map);
    },
    updateListings: function(anArr, name) {
        var mLayer = [];
        for (var i = 0; i < anArr.length; i++) {
            console.log(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            var aMarker = L.marker(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            mLayer.push(aMarker);
        }
        layers[name].addLayer(mLayer);
    },
    clearLayer: function(name) { layers[name].clearLayers(); },
  };
}

When I load the map initially, everything's fine:

                myMap.setMap(L.map('tikit-map').setView([{{ $result['lat'] }}, {{ $result['lng'] }}], 12));                        
                var listLocation = [];
                @foreach ($result['pany'] as $facility)                        
                    listLocation.push([{{ $facility['entity']['locations'][0]['lat'] }}, {{ $facility['entity']['locations'][0]['lng'] }}]);                            
                @endforeach  
                myMap.addListings(listLocation, 'listings');                      

Then, when I need to refresh the screen (and the map) via an ajax call (with data ing back via the variable panies, I get the error:

myMap.clearLayer('listings');
myMap.updateListings(panies, 'listings');    

The error specifically occurs in the line:

layers[name].addLayer(mLayer);

of updateListings

Anyone with some experience with leaflet that can offer some advice? Thanks

UPDATE: The issue I'm having revolves about why I can't "reuse" the LayerGroup after I've cleared it, and how I would go about doing that. I've struggled through the first half of this day for a solution and was about to post the code as a demo on jsfiddle when I came across this: .md You can add the Google Maps API as a Leaflet layer with a plugin. But note that the map experience will not be perfect, because Leaflet will just act as a proxy to the Google Maps JS engine, so you won't get all the performance and usability benefits of using Leaflet when the Google layer is on.

Because the requirement of the project is to use Google maps, I am abandoning my efforts, perhaps someone needing to do this will benefit from any future answers.

First attempt at working with Leaflet to display and work with a dynamic map, and I'm running into an error when I attempt to add a new layer of markers to a LayerGroup.

Here is my Map object, encapsulating the functionality of leaflet:

function Map() {
  //properties/fields
  var map;
  var layers = [];  

  return {
    setMap: function(aMap) {map=aMap;},
    setView: function(aView) {map.setView(aView);},
    addLayer: function(aLayer, name) {layers[name] = aLayer; map.addLayer(aLayer);},    
    addListings: function(anArr, name) {
        var mLayer = [];                                           
        for (var i = 0; i < anArr.length; i++) {
            var aMarker = L.marker([anArr[i][0], anArr[i][1]]);
            mLayer.push(aMarker);                            
        };
        layers[name] = L.layerGroup(mLayer);
        layers[name].addTo(map);
    },
    updateListings: function(anArr, name) {
        var mLayer = [];
        for (var i = 0; i < anArr.length; i++) {
            console.log(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            var aMarker = L.marker(anArr[i].entity.locations[0].lat, anArr[i].entity.locations[0].lng);
            mLayer.push(aMarker);
        }
        layers[name].addLayer(mLayer);
    },
    clearLayer: function(name) { layers[name].clearLayers(); },
  };
}

When I load the map initially, everything's fine:

                myMap.setMap(L.map('tikit-map').setView([{{ $result['lat'] }}, {{ $result['lng'] }}], 12));                        
                var listLocation = [];
                @foreach ($result['pany'] as $facility)                        
                    listLocation.push([{{ $facility['entity']['locations'][0]['lat'] }}, {{ $facility['entity']['locations'][0]['lng'] }}]);                            
                @endforeach  
                myMap.addListings(listLocation, 'listings');                      

Then, when I need to refresh the screen (and the map) via an ajax call (with data ing back via the variable panies, I get the error:

myMap.clearLayer('listings');
myMap.updateListings(panies, 'listings');    

The error specifically occurs in the line:

layers[name].addLayer(mLayer);

of updateListings

Anyone with some experience with leaflet that can offer some advice? Thanks

UPDATE: The issue I'm having revolves about why I can't "reuse" the LayerGroup after I've cleared it, and how I would go about doing that. I've struggled through the first half of this day for a solution and was about to post the code as a demo on jsfiddle when I came across this: https://github./Leaflet/Leaflet/blob/master/FAQ.md You can add the Google Maps API as a Leaflet layer with a plugin. But note that the map experience will not be perfect, because Leaflet will just act as a proxy to the Google Maps JS engine, so you won't get all the performance and usability benefits of using Leaflet when the Google layer is on.

Because the requirement of the project is to use Google maps, I am abandoning my efforts, perhaps someone needing to do this will benefit from any future answers.

• javascript
• leaflet

• An online demo is always the best way to debug... – Jonatas Walker Commented May 25, 2015 at 10:08

1 Answer 1

You are creating a plain vanilla javascript array with var mLayer = [];, when you really need to be using the Leaflet construct for arrays of layers, which is either L.layerGroup or L.featureGroup - depending on the amount of interactivity. It sounds like for your usecase, var mLayer = L.layerGroup would be fine.