Uncaught TypeError: layer.onAdd is not a function

First try with a sheet to display and work with a dynamic map, and I ran into an error when trying to add a new marker layer to the LayerGroup.

Here is my Map object, encapsulating the flyer functionality:

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 is fine:

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

      

Then when I need to update the screen (and map) with an ajax call (when returning data via company variables, I get an error:

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

      

The error occurs at the line:

layers[name].addLayer(mLayer);

UpdatesListings

Anyone with worksheet experience can offer some advice? Thanks to

UPDATE: The problem I'm having is with why I can't "reuse" the LayerGroup after I cleaned it up, and how I would go about it. I am going to post the code as a demo on jsfiddle during the first half of this day for a solution when I ran into this: https://github.com/Leaflet/Leaflet/blob/master/FAQ.md You can add the Google Maps API to as a tile layer with a plugin. But note that the map will not be perfect, because the Flyer will act as a proxy for the Google Maps JS engine, so you won't get all the performance and usability of the Flyer when the Google layer is enabled.

Since the project's requirement is to use google maps, I'm giving up my efforts, maybe someone else who needs this would benefit from any future answers.

+3


source to share


1 answer


You create a simple vanilla javascript array with var mLayer = [];

when you really need to use the Leaflet construct for layer arrays, which is either L.layerGroup

or L.featureGroup

- depending on the amount of interactivity. It sounds like your usecase var mLayer = L.layerGroup

will be fine.



+5


source







All Articles