[GIS] Find leaflet id of the latest layer created in Leaflet

leafletleaflet-draw

I am adding layers to a layergroup "drawnitems" in leaflet

drawnItems.addLayer(L.polygon(polygon));

I need to find the leaflet id of the layer created using the above code immediately upon its creation. This happens in a loop. I am adding multiple layers.

My goal is to save shapes that have been edited by the user into the DB. These shapes are previously created and then stored in the DB and then rendered on the map. For this I am planning to using leaflet id assigned to each shape and then find the corresponding db entry using some logic in the "draw:edited" event.

Best Answer

I need to find the leaflet id of the layer created [...]

No, you don't.

I am planning to using leaflet id assigned to each shape and then find the corresponding db entry

What you really want is to assign self-incrementing IDs at the DB level, most likely making that ID a primary key of the DB table. New features get no ID until they get dumped into the DB, existing features piggyback the DB ID when they get displayed/edited.

Leaflet IDs are meant to be internal to Leaflet, as they are unique within the lifetime of a document. Reload the webpage, or close the tab, and all the internal leaflet IDs will change in arbitrary ways and confuse you greatly.

Related Solutions

[GIS] How to add layers and update layer control dynamically : leaflet

There are public methods in L.Control.Layers control to add base layers and overlays dinamically (see full reference):

addBaseLayer(layer, name) to add new base layer
addOverlay(layer, name) to add new overlay

So, when user clicks on a button, you create new layer and just add it to a control:

$('#newLayer').click(function addNewLayer() {
    //create new layer
    var imageOverlayNew = new L.imageOverlay(imageOverlayUrlNew, bounds);
    //add it to a control
    layerControl.addOverlay(imageOverlayNew, newLayerName);
});

And looks like you don't need to use L.LayerGroup here...

[GIS] Leaflet: how can I find all geo-json features at a certain position

You can simply proceed in 2 steps:

Attach an extra "click" event listener on your features (or directly on the group if it is an L.GeoJSON or an L.FeatureGroup).
In that listener callback, use Mapbox Leaflet PIP (Point In Polygon) plugin to retrieve all features that contain the latlng position of the click. Note that PIP expects an L.geoJson as 2nd argument.

No need for a geoserver, everything client side.

If you want the found features to open their popup, simply loop through the resulting array and use layer.openPopup(). But you will need a hack to allow multiple popups to be opened simultaneously.

groupGeoJson.on("click", function (event) {
    var latlng = event.latlng,
        layersArray = leafletPip.pointInLayer(latlng, groupGeoJson);

    layersArray.forEach(function (layer) {
        layer.openPopup();
    });
});

Demo: http://jsfiddle.net/ve2huzxw/51/

(the above demo includes the hack from http://bl.ocks.org/mpmckenna8/9395643 to allow multiple open popups)

Best Answer

Related Solutions

[GIS] How to add layers and update layer control dynamically : leaflet

[GIS] Leaflet: how can I find all geo-json features at a certain position

Related Question