Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 823
AAJ Avatar asked Dec 16 '15 21:12

AAJ


People also ask

How do you find the center of a polygon in a Leaflet?

find a way to use the coordinates of a polygon to determine the center of the polygon where the popup will open. call one point of the polygon, then offset the position of the popup. Use an id for each polygon, so each popup knows the box area (polygon) it can be opened in.

What is Tilelayer in Leaflet?

A LeafletJS plugin to appy WebGL shaders to your tiles. With this plugin, you can apply colour transforms to your tiles, merge two or more tiles with a custom function, perform on-the-fly hillshading, or create synthetic tile layers based only on the map coordinates.

What is Leaflet FeatureGroup?

Extended LayerGroup that makes it easier to do the same thing to all its member layers: bindPopup binds a popup to all of the layers at once (likewise with bindTooltip ) Events are propagated to the FeatureGroup , so if the group has an event handler, it will handle events from any of the layers.

What does the getlayer method of layer group expect from leaflet?

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)).

How to add multiple layers to a map using layer group?

Using layer group, you can add multiple layers to a map and manage them as a single layer. Follow the steps given below to create a LayerGroup and add it to the map. 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.

How to add or remove a layer from the feature group?

You can add a layer to the feature group using the addLayer () method. To this method, you need to pass the element that is to be added. You can add a circle with the city Hyderabad at the center. It will produce the following output. − You can remove a layer from the feature group using the removeLayer () method.

Why is my listlayers output not printing the initial group layer?

The output is just printing the name of the initial group layer rather than those layers within the group. I suspect it's due to the changes in arcpy from arcMap to arcPro, specifically between ListLayers and listLayers 02-26-2018 10:30 PM I think your second listLayers is implemented incorrectly.


2 Answers

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.

like image 52
iH8 Avatar answered Oct 17 '22 16:10

iH8


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).

like image 43
ghybs Avatar answered Oct 17 '22 14:10

ghybs