0

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?

closed as unclear what you're asking by IvanSanchez, whyzar, Andre Silva, nmtoken, ahmadhanb Jun 12 '18 at 1:31

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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 ,) – ThingumaBob Jun 11 '18 at 14:20
0

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>
  • 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.