2

I have a leaflet map using Leaflet-Control-Window to produce a modal pop-up with dynamic content.

Using their documentation I was able to produce a popup when clicking on features of my geojson file, but I cannot figure out how to change the content of that modal based on my geojson file.

This calls the modal:

var geojson = L.geoJson(json_Locations3, {
  style: style,
  onEachFeature: onEachFeature

}).addTo(map)

    geojson.on('click',function(geojson){

      var win =  L.control.window(map,{title:'Hello world!',maxWidth:400,modal: true})
              .content('Info:' + Feature.properties.Comments)
              .prompt({callback:function(){alert('This is called after OK click!')}})
              .show()
});

This is a part of my geojson file:

var json_Locations3={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "id": 2001.000000, "Comments": "Laguardia Houses. Filler text and description.", "Address": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -73.98707531157136, 40.71279019297274 ], [ -73.990326197834079, 40.710554740197978 ] ] ] } },
{ "type": "Feature", "properties": { "id": 1002.000000, "Comments": "Essex Crossing", "Address": "236 BROOME STREET" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.988559744585103, 40.718138957271904 ], [ -73.988629841437202, 40.718003100250257 ], [ -73.988805496163607, 40.718056044119535 ], [ -73.988939514855289, 40.71779629683828 ], [ -73.98937138176332, 40.717926433649048 ], [ -73.98917121142054, 40.718314400521201 ], [ -73.988867202969402, 40.718222771755336 ], [ -73.988863247936536, 40.718230436389028 ], [ -73.988559744585103, 40.718138957271904 ] ] ] } },
{ "type": "Feature", "properties": { "id": 1003.000000, "Comments": "Essex Crossing Test Description", "Address": "145 CLINTON STREET" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -73.986825413362538, 40.717732897085796 ], [ -73.987087772457556, 40.717230210278437 ], [ -73.987759556669246, 40.717435703706677 ], [ -73.987494416232039, 40.717949651831589 ], [ -73.986819055387571, 40.717745220879294 ], [ -73.986825413362538, 40.717732897085796 ] ] ] } },

Any suggestions? I am really a beginner with javascript and struggling with different solutions, but not having luck.

1 Answer 1

1

I put a suggested approach on JS Fiddle, based on a simplified version of the Leaflet GeoJSON demo.

enter image description here

// Create the geoJSON layer without using onEachFeature    
var lightRail = L.geoJSON(lightRailStop).addTo(map);

// Set a listener for the geoJSON layer's click event
lightRail.on("click", function(evt){

   // Read in the Content property once the user clicks on the feature
  var content = evt.layer.feature.properties.popupContent;

  // Insert the Content into the leaflet-control-window
  var win =  L.control.window(map,{title:'Hello world!',maxWidth:400,modal: true})
  .content(content)
  .prompt({callback:function(){alert('This is called after OK click!')}})
  .show()
})

(As an aside, I would advise using this plugin with caution when attaching it to a layer like this. I think this could be quite annoying to your users - the standard popup methodology may work better. For example, the modal obscures the feature that was clicked on, making it less useful than a popup with a leader line)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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