TransWikia.com

Assign Markers to Polygons in Leaflet

Geographic Information Systems Asked on October 5, 2021

I want to visualize polygons in Leaflet. I do this via L.geoJson, no problem here.

But each polygon shall has it’s own set of Markers, which should be dispayed, when the polygon is clicked and hidden, when a place outside of the polygon is shown.
Example: Marker 1, with lat1,lon1,description1 and Marker 2 lat2,lon2,description2 belong to Polygon A. Marker 3 and Marker 4 belong to Polygon B.

The default view is the map with the two polygons. No Markers. When I click on Polygon A, Marker 1 and Marker 2 should be displayed. When I click on Marker 1, description1 should be shown in a bubble or something, that comes out of Marker 1.
When I click on Polygon B, Marker 1 and Marker 2 should disappear and Marker 3 and Marker 4 should appear.

When I click somewhere on the map outside of the polygons, all Markers should disappear.

I created a featureGroup for the Markers and I can call clearLayers() to hide all Markers. But how do I add/create the markers so that each Marker is assigned to a polygon?

I can also add the Markers’ information (lat, lon, text to display when clicked) as Features of the Polygon in geojson but then?

This is my code so far:

var map = L.map('map').setView([51.505, -0.09], 13);
var markerGroup = L.featureGroup().addTo(map);
var polygonGroup = L.featureGroup().addTo(map);

// clear all Markers when a place outside of a Polygon is clicked.
map.on('click', function(e) {
  markerGroup.clearLayers();
});

// Create the Markers of the clicked polygon
polygonGroup.on('click', function(e) {
  // this is needed, so that the onClick listener of map does not fire.
  L.DomEvent.stopPropagation(e);
  // Add Markers based on "properties" of a "feature" inside a "FeatureCollection" in a GeoJson File.
});

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var geojson = L.geoJson(segments).addTo(polygonGroup);

And this is the content of my geojson file:

var segments = {"type":"FeatureCollection","features":[{"type":"Feature","id":"30818214, 30437276.0","properties":{
"type":"Street",
"markers":[[[13.271,52.451],"text to display on this marker"],[[13.46,52.45],"text to display on this other marker"]]
},
"geometry":{"type":"Polygon","coordinates":[[[13.31650670833504,52.6062861338089],[13.316301432085778,52.60624094293158],[13.316165411632992,52.606064409617225],[13.316274301853358,52.60588107437412],[13.316564314460374,52.60579833204233],[13.316865565538109,52.60586465139],[13.31688028977927,52.60588376076443],[13.317085565006439,52.60592895087393],[13.317221588723905,52.60610548312916],[13.31711270191529,52.60628881921736],[13.316822687123965,52.60637156288567],[13.31652143261743,52.6063052434477],[13.31650670833504,52.6062861338089]
]]}},
{"type":"Feature","id":"30818215, 30437277.0","properties":{
"type":"House",
"markers":[[[13.271,52.45159],"text to display on this marker"],[[13.46,52.45],"text to display on this other marker"]]
},
"geometry":{"type":"Polygon","coordinates":[[[13.31650670833504,52.6062861338089],[13.316301432085778,52.60624094293158],[13.316165411632992,52.606064409617225],[13.316274301853358,52.60588107437412],[13.316564314460374,52.60579833204233],[13.316865565538109,52.60586465139],[13.31688028977927,52.60588376076443],[13.317085565006439,52.60592895087393],[13.317221588723905,52.60610548312916],[13.31711270191529,52.60628881921736],[13.316822687123965,52.60637156288567],[13.31652143261743,52.6063052434477],[13.31650670833504,52.6062861338089]
]]}}]};

One Answer

The info you are missing is that you have access to clicked polygon feature properties from event property e.layer.feature.properties.

So in your case event processing function could look something like this (note that because of Leaflet [lat,lng] coordinates order GeoJSON marker coordinates have to be swapped) :

polygonGroup.on('click', function(e) {
  var markers = e.layer.feature.properties.markers;
  for (var i = 0; i < markers.length; i++) {
    L.marker([markers[i][0][1], markers[i][0][0]]).bindPopup(markers[i][1]).addTo(markerGroup);
  }
  L.DomEvent.stopPropagation(e);
});

Side note: In your test data marker coordinates are way out of polygons so you have to zoom out a few times to see them.

Correct answer by TomazicM on October 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP