1

I have the following code which I use to display a marker on my map with a popup containing the feature.properties.name element from my GeoJSON:

var featuresUTMGroundHazards = L.geoJson(dataGuardianUTM, {
    filter: FuncGroundHazards,
    style: setStyle,
    pointToLayer: function (feature, latlng) { return L.marker(latlng, { icon: L.icon({ iconUrl: feature.properties.iconUrl, iconSize: [25, 25], }), }) },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(
            "<b>" + feature.properties.name + "</b>"
            + "<br />"
            );
    },
});

If they are present in the GeoJSON, I wish to expand this and itterare through any and all available properties.display.sections elements and include the title and text elements from each, within the marker popup.

I have tried the following code but it displays undefined where I would expect some text to be.

var featuresUTMGroundHazards = L.geoJson(dataGuardianUTM, {
    filter: FuncGroundHazards,
    style: setStyle,
    pointToLayer: function (feature, latlng) { return L.marker(latlng, { icon: L.icon({ iconUrl: feature.properties.iconUrl, iconSize: [25, 25], }), }) },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(
            "<b>" + feature.properties.name + "</b>"
            + "<br />"
            + "<br /><b>Title:</b> " + feature.properties.display.sections.title
            + "<br /><b>Text:</b> " + feature.properties.display.sections.text
            + "<br />"
            );
    },
});

I would have expected that to simply display the first one it found, but it does not.

What do I need to change here in order to itterate through all/any of the sections?

The GeoJSON is structured as:

{
  "geometry": {
    "coordinates": [
      [
        [
          -0.58585870265960693,
          51.223640441894531
        ],
        // etc...

      ]
    ],
    "type": "Polygon"
  },
  "id": "8A7183778EF92F2FB1A84F5C02A7C233ED71B048",
  "properties": {
    "hazardFactor": "40",
    "hazardFactorName": "Warning",
    "fillColor": "#ffbb00",
    "strokeColor": "#b88702",
    "fillOpacity": "0.35",
    "strokeWidth": "1",
    "strokeOpacity": "0.8",
    "detailedCategory": "amenity:university",
    "iconUrl": "https://aa-ne-prod-public-api.altitudeangel.com//v1/map/icon?icon=amenity_university.png",
    "name": "University of Law, Guildford",
    "category": "groundHazard",
    "filters": [
      {
        "name": "Ground Hazards",
        "property": "show",
        "active": true
      }
    ],
    "display": {
      "category": "Ground Hazard",
      "detailedCategory": "University",
      "title": "University of Law, Guildford",
      "sections": [
        {
          "iconUrl": "https://aa-ne-prod-public-api.altitudeangel.com//v1/map/icon?icon=amenity_university.png",
          "title": "Pedestrian Hazard",
          "text": "It is likely that members of the public will congregate in and/or around this area. Please be mindful of their safety."
        },
        {
          "iconUrl": "https://aa-ne-prod-public-api.altitudeangel.com//v1/map/icon?icon=amenity_university.png",
          "title": "Privacy Concerns",
          "text": "This classification of area or point is likely to be additionally sensitive to privacy concerns. You may have greater obligations to disclose your intended flight over, within or near these areas to any controlling authority or land owner, particularly if you plan to fly with surveillance equipment."
        },
        {
          "iconUrl": "https://aa-ne-prod-public-api.altitudeangel.com//v1/map/icon?icon=warning.png",
          "title": "Summary",
          "text": "Yellow zones indicate regions where operation of your drone may raise security, privacy or safety concerns."
        }
      ],
      "actions": []
    }
  },
  "type": "Feature"
},
2

If you look at GeoJSON structure, you'll see that feature.properties.display.sections is not a single object but an array of objects, so you have to reference it's elements as array elements:

var popupTxt = "<b>" + feature.properties.name + "</b>";

for (var i = 0; i < feature.properties.display.sections.length; i++) {
  popupTxt = popupTxt
    + "<br />"
    + "<br /><b>Title:</b> " + feature.properties.display.sections[i].title
    + "<br /><b>Text:</b> " + feature.properties.display.sections[i].text;
}

layer.bindPopup(popupTxt);
  • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM – Rich Aug 10 at 15:22

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.