Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Callback when all layer are added to leafletjs map

Situation: I am adding a new geoJson layer to my map and I want to animate all the markers in once they have been added with a slight delay between each one. The API appears to do everything BUT offer a callback for when the last marker is added!

Sample code

L.geoJson(data, {      
    onEachFeature: function (feature, layer) {
        console.log(feature, layer);
    }
}).addTo(map);

what I would like is

 L.geoJson(data, {      
    onEachFeature: function (feature, layer) {
        console.log(feature, layer);
    },
    complete:function(layers){
        console.log(layers);
    }
}).addTo(map);

I know each layer has an onAdd event but is there similar for a layerGroup?

Thanks

like image 341
sidonaldson Avatar asked Sep 19 '13 14:09

sidonaldson


People also ask

How do you add a layer to a map in Leaflet?

Step 1 − Create a Map object by passing a <div> element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile. Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

How do you remove attribution in Leaflet?

If you want to just remove the Leaflet attribution from the control, while maintaining individual layer attribution, you can use the setPrefix method as documented here: http://leafletjs.com/reference.html#control-attribution.

What is Tilelayer in Leaflet?

Used to load and display tile layers on the map, implements ILayer interface.


2 Answers

I have got in contact with the major contributers to leafletjs and there is no need to have a callback for a standard geojson layer, you can just do this;

var layer = L.geoJson(data, {}).addTo(map);
animateMyIconsIn(layer.getLayers()); // your custom function

However you do need a callback if you are using the AJAX plugin;

//first create the layer
var  layer = L.geoJson.AJAX(url, {});
//then add a listener
layer.on('dataLoadComplete',function(e){
    //finally add the layer
    layer.addTo(map);
    animateMyIconsIn(layer.getLayers()); // your custom function
});
like image 187
sidonaldson Avatar answered Nov 15 '22 07:11

sidonaldson


updated syntax is currently "data: loaded" as found from this post;

https://gis.stackexchange.com/questions/271919/how-to-cluster-external-geojson-using-leaflet-ajax-js

like image 31
Chris Ryan Avatar answered Nov 15 '22 06:11

Chris Ryan