1

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?

  • 1
    where and how exactly is the Shape_Area value stored? ...are they not part of each features' properties as they most likely should be? btw., as it stands and if you don´t use that function defined on lines 1 - 5 elsewhere, the only part of your code that actually does something is in line 6 (var LayerA = ...)...everthing else is noise and/or plain wrong ,) – geozelot Jun 11 '18 at 14:20
1

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 = "<p>The <b>" +
                feature.properties.Team + "</b> play here,</br> They are in the " +
                feature.properties.League + "</br>" +
                '<a href="'+ feature.properties.Website +'" target="_blank">Website</a></p>' ;

        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.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>  
      #map {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        z-index: 0;
      }
</style>
</head>

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

<script>
var url = 'usa.json';  // my GeoJSON data source, in same folder as my html page.

    var map = L.map('map').setView([47.7541, -107.05078], 3); 

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);


// Set style function that sets fill color property
function style(feature) {
    return {
        fillColor: 'green', 
        fillOpacity: 0.5,  
        weight: 2,
        opacity: 1,
        color: '#ffffff',
        dashArray: '3'
    };
}
    var highlight = {
        'fillColor': 'yellow',
        'weight': 2,
        'opacity': 1
    };

        function forEachFeature(feature, layer) {

            var popupContent = "<p><b>STATE: </b>"+ feature.properties.STATE_NAME +
                "</br>REGION: "+ feature.properties.SUB_REGION +
                "</br>STATE ABBR: "+ feature.properties.STATE_ABBR +
                "</br>POP2010: "+ feature.properties.POP2010.toLocaleString() +
                "</br>Pop 2010 per SQMI: "+ feature.properties.POP10_SQMI.toLocaleString() +
                "</br>Males: "+ feature.properties.MALES.toLocaleString() +
                "</br>Females: "+ feature.properties.FEMALES.toLocaleString() +
                "</br>SQ Miles: "+ feature.properties.SQMI.toLocaleString() +'</p>';

            layer.bindPopup(popupContent);

            layer.on("click", function (e) { 
                stateLayer.setStyle(style); //resets layer colors
                layer.setStyle(highlight);  //highlights selected.
            }); 
        }

// Null variable that will hold layer
var stateLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});

    $.getJSON(url, function(data) {
        stateLayer.addData(data);
    });

 stateLayer.addTo(map);

// for Layer Control    
var baseMaps = {
    "Open Street Map": osm      
};

var overlayMaps = {
    "USA":stateLayer
};  

//Add layer control
L.control.layers(baseMaps, overlayMaps).addTo(map);

</script>
</body>
</html>
| improve this answer | |
  • I edited the first post, to show my JaveScript-file structure. I also used now your code Bill and edited it to my purpose: function onEachFeature(feature, layer) { var popupContent = "<p>The land use of this polygon is: " + feature.properties.LandUse + "</p><p>Its area is: " + feature.properties.Shape_Area + "square meters" ; if (feature.properties && feature.properties.NAME) { layer.bindPopup(feature.properties.NAME);} layer.bindPopup(popupContent); } – Cliff Jun 12 '18 at 6:31
  • However I have now the problem, that "features.properties" is not defined. I don't see from where this comes :( – Cliff Jun 12 '18 at 6:36

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