1

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]
]]}}]};
  • 1
    One of the basic policies of GIS SE site is that coding questions should include relevant code of what has been tried/done so far, otherwise question is most likely to be closed as noncompliant with the site policy. Please edit your question and add relevant existing code. – TomazicM Jul 30 at 19:26
  • I added the missing code snippets. Thank you. – Selphiron Jul 30 at 19:42
  • 1
    If I understand you correctly, only one set of markers for single polygon can be visible at a time. – TomazicM Jul 30 at 20:03
  • 1
    And one more question: should the marker text bi displayed upon click on the marker, or should this actually be tooltip with text inside visible automatically? Please edit you question and clarify those two things. – TomazicM Jul 30 at 20:07
  • I added the missing information. – Selphiron Jul 30 at 20:17
1

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.

| improve this answer | |
  • yes! That's it. I was so close. I tried to find out what properties e has but it was difficult. I found a property called _layers, which had a property called 46 in which the features' properties were but I could not manage to get all that. – Selphiron Jul 30 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.