CODEWITHSUNDEEP
javascriptleafletgeojson
user2192778
user2192778

Reputation: 455

Need help adding popup info windows to polygons on Leaflet map

I'm trying to add popup windows to a leaflet map which shows buffer zones around different mining sites. When I click on a buffer zone polygon, I'd like to get the mine name information. Here's my code,

<html>
<head>
  <title>Buffer Zones around Mine</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <style>
    #map{ height: 100% }

  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  var map = L.map('map').setView([45, -95], 4); //center map view


  var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map); 

// load JSON data
 $.getJSON("BufferPolygons.json",function(data){
    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data).addTo(map);
  });

//get popup info
var myLayer = L.geoJson(polygon, {
onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

function yourOnEachFeatureFunction(feature, layer){
if (feature.properties.mine_name) {
    layer.bindPopup(feature.properties.mine_name);
    }
}
  </script>
</body>
</html>

I am new to Leaflet and Javascript, any help would be greatly appreciated!

Edit: My cursor changes when scrolling over polygons vs. non-polygons, so I believe information is being retrieved with a mouse click. Since nothing is displaying I'm assuming this is an HTML/CSS issue, perhaps that I haven't created any window for this information to go into?

Upvotes: 0

Views: 1139

Answers (1)

nathansnider
nathansnider

Reputation: 2873

The polygons that you are seeing displayed are the ones created within the $.getJSON callback function. When you define myLayer outside of the callback, it appears to be looking for a polygon object that is undefined, so that layer and its popups are never created.

There are a couple ways to solve this. The most straightforward way is just to set the onEachFeature option for the L.geoJson that you create within the callback:

$.getJSON("BufferPolygons.json",function(data){
  L.geoJson(data, {
    onEachFeature: yourOnEachFeatureFunction
  }).addTo(map);
});

However, doing it this way, you may not be able to refer to that layer elsewhere (for instance, if you want to add it to a layer control), because it will not be created until BufferPolygons.json finishes loading. The better option in most cases is to create myLayer with whatever options you want, but without any data, and use the addData method to populate this empty layer in the callback function:

var myLayer = L.geoJson(false, {
  onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

$.getJSON("BufferPolygons.json",function(data){
  myLayer.addData(data);
});

Upvotes: 2

Related Questions