[GIS] Adding popup to geojson layer based on feature property

geojsonjavascriptleaflet

I'm using leaflet and trying to add a popup to a point on the map that will return a property of the point from the geojson file. Going off this post has been helpful problem adding pop-up to GeoJSON layer in Leaflet , but it only returns the same text for each point. Here's part of the code:

function eqcolors(mag) {
          return  mag >= 5 ? 'maroon':
                  mag >= 4 ? 'red':
                  mag >= 3 ? 'orange':
                  mag >= 2 ? 'yellow':
                  mag >= 1 ? 'green':
                            'rgb(255,255,255)';
 }

function eqstyle(feature){
    return {
        radius: 8,
        fillColor: eqcolors(feature.properties.mag),
        color: eqcolors(feature.properties.mag),
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    }
}

function onEachPoint(feature, layer){
    switch (feature.properties.mag){
        case 1.0 : return layer.setRadius(5);
        case 1.1 : return layer.setRadius(5);
        case 1.2 : return layer.setRadius(5);
        case 1.3 : return layer.setRadius(5);
        case 1.4 : return layer.setRadius(5);
        case 1.5 : return layer.setRadius(5);
        case 1.6 : return layer.setRadius(5);
        case 1.7 : return layer.setRadius(5);
        case 1.8 : return layer.setRadius(5);
        case 1.9 : return layer.setRadius(5);
        case 2.0 : return layer.setRadius(10);
        case 2.1 : return layer.setRadius(10);
        case 2.2 : return layer.setRadius(10);
        case 2.3 : return layer.setRadius(10);
        case 2.4 : return layer.setRadius(10);
        case 2.5 : return layer.setRadius(10);
        case 2.6 : return layer.setRadius(10);
        case 2.7 : return layer.setRadius(10);
        case 2.8 : return layer.setRadius(10);
        case 2.9 : return layer.setRadius(10);
        case 3.0 : return layer.setRadius(15);
        case 3.1 : return layer.setRadius(15);
        case 3.2 : return layer.setRadius(15);
        case 3.3 : return layer.setRadius(15);
        case 3.4 : return layer.setRadius(15);
        case 3.5 : return layer.setRadius(15);
        case 3.6 : return layer.setRadius(15);
        case 3.7 : return layer.setRadius(15);
        case 3.8 : return layer.setRadius(15);
        case 3.9 : return layer.setRadius(15);
        case 4.0 : return layer.setRadius(20); 
        case 4.1 : return layer.setRadius(20);
        case 4.2 : return layer.setRadius(20);
        case 4.3 : return layer.setRadius(20);
        case 4.4 : return layer.setRadius(20);
        case 4.5 : return layer.setRadius(20);
        case 4.6 : return layer.setRadius(20);
        case 4.7 : return layer.setRadius(20);
        case 4.8 : return layer.setRadius(20);
        case 4.9 : return layer.setRadius(20);
        case 5.0 : return layer.setRadius(25);
        default: layer.setRadius(100);
    }
}

function pointToLayer(feature, latlng){
    var popupOptions = {maxWidth: 200};
    var popupContent = "This is some content";
    return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions);
     }

var geojson;
//map output    
geojson = L.geoJson(eq, {
    style: eqstyle,
    onEachFeature: onEachPoint,
    pointToLayer: pointToLayer
}).addTo(map);

and the geojson file: 

var eq =
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "time": "2014-02-16T20:23:35.420Z","depth": 5.0, "mag": 3.2, "magType": "mb_lg", "nst": 0.0, "gap": 52.0, "dmin": 0.47, "rms": 0.45, "net": "us", "id": "usc000mrls", "updated": "2014-02-17T16:34:23.777Z","type": "earthquake"}, "geometry": { "type": "Point"

For polygons layer.bindPopup(feature.properties.popupContent) works. Is a different method used for points?

Best Answer

Your code always returns the same content or text because:

var popupContent = "This is some content";
return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions);

For example, in order to return the magType of a point you can replace the same text with:

var popupContent = String(feature.properties.magType);
return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions);

If you want to return all feature properties of a point, then you have to iterate through each key (k) and get the corresponding value (v):

var popupContent ="";
for (var k in feature.properties) {
    var v = String(feature.properties[k]);
    popupContent += k + '->' + v ;
}
return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions);

Finally, you can put some conditions to check for errors or exceptions. For example, the provided GeoJson is incomplete or broken, so it will be good to check if a current point has properties.

if(feature.properties){ /* the loop goes here */ }
Related Question