How to loop over GeoJSON properties to display in Leaflet markers?

Question

I'm having trouble understanding how to access properties in a GeoJSON file through Leaflet's oneachfeature function.

I'd like to list all the items under "properties" in my GeoJSON file - "Producer_Subsystem", "Title", "FullAddress", etc.

I assume I could list them individually by writing each one out as- feature.property.Producer_Subsystem, feature.property.Title, etc., but I would like to iterate over them with a loop. I tried a for..in loop but it is not working.

I've been playing with the JSFiddle and realize that I don't understand the basics of how the oneach feature works.

These attempts, for example, all fail:

feature.property[Title]
feature.geometry.coordinates
feature.geometry[coordinates]

Code:

   var DCALayer = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "coordinates": [
                    -77.0282395,
                    38.9143319
                ],
                "type": "Point"
            }, //end geometry
            "id": "The Coffee Bar 1",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "shop Local",
                "Title": "The Coffee Bar 1",
                "Full Address": "1201 S St NW Washington DC ",
                "Latitude": 38.9143319,
                "Extra Area Tags": "",
                "Space Type": "Restaurant/bar",
                "Longitude": -77.0282395,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Shaw",
                "Mass Produced": "unique",
                "ANC": "1B",
                "Genre_Materials": "Door sign: name",
                "Found By": "Me",
                "Adaptation": ""
            }
        }, //end feature[0]
        {
            "geometry": {
                "coordinates": [
                    -76.9973795,
                    38.9086077
                ],
                "type": "Point"
            },
            "id": "DC Empanadas",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "Shop Local",
                "Title": "DC Empanadas",
                "Full Address": "1309 5th St NE Washington DC ",
                "Latitude": 38.9086077,
                "Extra Area Tags": "Union Market",
                "Space Type": "Store",
                "Longitude": -76.9973795,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Trinidad",
                "Mass Produced": "multiple observed",
                "ANC": "5D",
                "Genre_Materials": "plastic/paper/sign",
                "Found By": "Me",
                "Adaptation": ""
            }
        },
        {
            "geometry": {
                "coordinates": [
                    -77.0318884,
                    38.9303663
                ],
                "type": "Point"
            },
            "id": "Sticky Fingers",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "Shop Local",
                "Title": "Sticky Fingers",
                "Full Address": "1370 Park Rd NW Washington DC ",
                "Latitude": 38.9303663,
                "Extra Area Tags": "",
                "Space Type": "Restaurant/bar",
                "Longitude": -77.0318884,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Columbia Heights",
                "Mass Produced": "multiple observed",
                "ANC": "1A",
                "Genre_Materials": "?/sign",
                "Found By": "friend",
                "Adaptation": ""
            }
        }
]};

   var map = L.map('map').setView([38.88301570451763, -77.03630447387695], 13);

   //tile layer
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'jmauro.ld1o2np1',
    accessToken: 'pk.eyJ1Ijoiam1hdXJvIiwiYSI6ImVYb0lheE0ifQ.Js4ba2SyUxHPCIDl1Aq1cQ'
}).addTo(map);

   //Marker Styles
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

  var allDataLayer =  L.geoJson(DCALayer, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 

   onEachFeature: function (feature, layer) {   
       for(var props in feature.properties)
            var popupcontent= feature.geometry[coordinates];


 layer.bindPopup(popupcontent);  
      }//end onEachFeature

}).addTo(map);

Answer 1

Several mistakes indeed:

• In your above code, you used property instead of properties (but you corrected that mistake in your jsfiddle).
• You access your jsfiddle using the HTTPS protocol whereas Leaflet files are on HTTP only, which makes your browser block them. Hence Leaflet was not working at all. Use HTTP to access jsfiddle and be able to load external resources which are only on HTTP.

Minor mistakes:

• I am not sure your JSON data is super compliant with GeoJSON formatting ("type": "Feature" is supposed to be a property of a feature, not (only) in a feature properties).
• If you want to retrieve all properties, you should aggregate them (using any method like pushing in an array, concatenating string, etc.) rather than assigning them to the same variable. That would make your variable hold only the value of the last property.

Example of code:

onEachFeature: function (feature, layer) {
    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push(prop + ": " + feature.properties[prop]);
    }
    layer.bindPopup(popupcontent.join("<br />"));

}

Updated jsfiddle: http://jsfiddle.net/9y24Lfwn/1/

I suggest you use the Developers Tools for debugging, it is very useful. Hit F12 on most browsers to open the tools.