2

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?

5

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 */ }
  • Thanks, this did work for magType and other property values in quotes. I was interested in adding mag as well as a few other properties to the popup. mag would never show up. I'm assuming because it is a numerical value not in quotations? I went back to the shapefile and created a new text field called Magnitude and copied the values of mag into that. Now the values of Magnitude are showing up. Is there a way to display numerical values in popups or would I have to use the shapefile workaround? – mohlabani Aug 29 '14 at 14:29
  • 1
    You can try toString() method or String() function. For example: var popupContent = feature.properties.mag.toString(); or var popupContent = Srting(feature.properties.mag);. I will edit my answer to add that. – Hristo Tomov Aug 29 '14 at 19:50
  • 1
    I'd suggest you change your switch switch (feature.properties.mag){ to use something like if (feature.properties.mag < 2.0) { return layer.setRadius(5);} else if (... this will reduce the number of lines of code. – Alex Leith Sep 16 '15 at 22:40
  • This is fantastic. Spent a long time trying to figure this out, but the answer got me over my hump. Thank you! – jbukoski Feb 26 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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