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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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: '© <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>
Shape_Areavalue 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 ,)