Tuesday 28 March 2017

Leaflet: popup showing information on the polygon



I have a Leaflet map. To the map I load two JavaScript files (A.js & B.js) which both consist of only polygons. Now my aim is, that when I click inside Leaflet on one of the polygons, that I get a popup showing the area of that polygon. The area is saved in the JavaScript file under Shape_Area.


"type": "Feature", 
"properties": { "OBJECTID": 1, "Id": 1, "gridcode": 1, "Shape_Leng": 1805.0000000099999, "Shape_Area": 8781.24999991, "LandUse": "Urban" }


My code until now is:


function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.NAME) {
layer.bindPopup(feature.properties.NAME);
}
}
var LayerA = L.geoJSON(UF,{style: style},{onEachFeature: function(feature, layer) {layer.bindPopup(feature.properties.type);}}).addTo(mymap);;
LayerA.eachLayer(function (layer) {layer.bindPopup(UF.Shape_Area);});


I get already my popup, but I do not know how to exactly get the Shape_Area of my JavaScript-file.


Anybody has a hint for that please?



Answer



I believe you are just asking on how to add more attributes to the popup? For my example file, I have a Team field, a League field, and a Website field, so I create a variable called popupContent, so I could display all the attributes and add some html to help with the formatting. You could do something like this: feature.properties.Shape_Area +" Sq Meters"


function forEachFeature(feature, layer) {

var popupContent = "

The " +
feature.properties.Team + "
play here,
They are in the " +
feature.properties.League + "
" +
'Website

' ;


if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
};

Alright, the feature.properties comes from your GeoJSON file. Here is a working example. Right click on this link save as usa.json. It's a polygon GeoJSON file. http://www.gistechsolutions.com/leaflet/DEMO/Search/usa.json, put it in a web folder. Next, copy/paste the following code, it will read the usa.json file and create a web map. It has popups and even has highlighting on click. It's very basic. The code should help you learn it.






Example















No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...