CODEWITHSUNDEEP
javascriptleaflet
AAJ
AAJ

Reputation: 207

Finding a specific layer in a Leaflet LayerGroup where layers are polygons

I'm trying to define a bunch of Leaflet polygons like this :

var poly = new L.Polygon([
  [10.1840229, 36.8906981],
  [10.1840393, 36.8906669],
  [10.1840989, 36.8906868],
  [10.1840826, 36.890718],
  [10.1840229, 36.8906981]
], {
  'id': 'someId'
});

Then I'm grouping those polygons in a GroupLayer like so :

var group = new L.LayerGroup([poly1, poly2, ..., polyn]);
group.addTo(map);

Can I find those polygons by Id using group.getLayer() ? Or do I need to define the layers/polygons differently to be able to do this ?

Upvotes: 20

Views: 36599

Answers (2)

iH8
iH8

Reputation: 28668

Leaflet assigns it own unique ID to each layer:

var marker = new L.Marker(...);
console.log(marker._leaflet_id) // 24

var polygon = new L.Polygon(...);
console.log(polygon._leaflet_id) // 25

The getLayer method of L.LayerGroup, L.FeatureGroup and L.GeoJSON take those ID's as a parameter:

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.getLayer(24); // returns the marker
layerGroup.getLayer(25); // returns the polygon

You could also easily assign your own ID's:

var marker = new L.Marker(...);
marker.id = 'foo';

var polygon = new L.Polygon(...);
polygon.id = 'bar';

And then fetch them like this: 

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.eachLayer(function (layer) {
    if (layer.id === 'foo') // it's the marker
    if (layer.id === 'bar') // it's the polygon
});

You can easily throw that into a function and include it in L.LayerGroup:

L.LayerGroup.include({
    customGetLayer: function (id) {
        for (var i in this._layers) {
            if (this._layers[i].id == id) {
               return this._layers[i];
            }
        }
    }
});

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon

EDIT: Didn't spot the ID in your example untill the indented edit. You can also assign it as an option like in your example and create a custom get function to retreive the layer:

L.LayerGroup.include({
    customGetLayer: function (id) {
        for (var i in this._layers) {
            if (this._layers[i].options.id == id) {
               return this._layers[i];
            }
        }
    }
});

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon

If you ever need to identify the type of a layer you can do so by using instanceof:

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.eachLayer(function (layer) {
    if (layer instanceof L.Marker) // it's the marker
    if (layer instanceof L.Polygon) // it's the polygon
});

But remember when you find yourself making common selections should ideally have put those features in separate layer/featuregroups.

Upvotes: 32

ghybs
ghybs

Reputation: 53280

The getLayer() method of Layer Group expects a very specific ID: the one that is automatically assigned by Leaflet when "stamping" a layer (e.g. using myId = L.stamp(myLayer)).

Therefore you would not be able to use pre-defined ID's.

If you can work with ID's defined dynamically (i.e. not known in advance), you could easily record those and use them to retrieve your layers (polygons).

Upvotes: 3

Related Questions