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: '© <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]
]]}}]};
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP