Iterating through sub-element `sections` of GeoJSON on a Leaflet map?Adding GeoJSON layer Leaflet map?Leaflet...

Why do oscilloscopes use SMPS instead of linear power supply?

What are good ways to improve as a writer other than writing courses?

Visa National - No Exit Stamp From France on Return to the UK

Improving software when the author can see no need for improvement

In a topological space if there exists a loop that cannot be contracted to a point does there exist a simple loop that cannot be contracted also?

Why are the inside diameters of some pipe larger than the stated size?

Does two puncture wounds mean venomous snake?

What does "sardine box" mean?

How would I as a DM create a smart phone-like spell/device my players could use?

First amendment and employment: Can an employer terminate you for speech?

Accidentals - some in brackets, some not

Ex-contractor published company source code and secrets online

What is my malfunctioning AI harvesting from humans?

Want to draw this commutative diagram

Write an interpreter for *

Dereferencing a pointer in a 'for' loop initializer creates a segmentation fault

Why couldn't soldiers sight their own weapons without officers' orders?

What are the uses and limitations of Persuasion, Insight, and Deception against other PCs?

Max Order of an Isogeny Class of Rational Elliptic Curves is 8?

Blocking people from taking pictures of me with smartphone

How can I iterate this process?

How can I tell if a flight itinerary is fake?

English - Acceptable use of parentheses in an author's name

Could one become a successful researcher by writing some really good papers while being outside academia?



Iterating through sub-element `sections` of GeoJSON on a Leaflet map?


Adding GeoJSON layer Leaflet map?Leaflet geoJSON contextmenuGeoJSON in Leaflet TileLayer?Loading external GeoJSON file into Leaflet map?Load external geojson file into leaflet mapGeoJSON not showing in leaflet map?MarkerCluster don't work with geojson layer in leafletLeaflet GeoJSON Map BufferingGeoJSON to Leaflet map using Django templateLeaflet GeoJSON map legend






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}







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"
},









share|improve this question

































    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"
    },









    share|improve this question





























      1












      1








      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"
      },









      share|improve this question
















      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"
      },






      leaflet geojson






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 10 hours ago









      TomazicM

      3,4034 gold badges8 silver badges23 bronze badges




      3,4034 gold badges8 silver badges23 bronze badges










      asked 10 hours ago









      RichRich

      1294 bronze badges




      1294 bronze badges

























          1 Answer
          1






          active

          oldest

          votes


















          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);





          share|improve this answer


























          • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

            – Rich
            9 hours ago














          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "79"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f331616%2fiterating-through-sub-element-sections-of-geojson-on-a-leaflet-map%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          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);





          share|improve this answer


























          • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

            – Rich
            9 hours ago
















          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);





          share|improve this answer


























          • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

            – Rich
            9 hours ago














          2












          2








          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);





          share|improve this answer













          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);






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 10 hours ago









          TomazicMTomazicM

          3,4034 gold badges8 silver badges23 bronze badges




          3,4034 gold badges8 silver badges23 bronze badges
















          • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

            – Rich
            9 hours ago



















          • Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

            – Rich
            9 hours ago

















          Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

          – Rich
          9 hours ago





          Ah, it was the whole array concept I was missing from this. Your example worked perfectly, thanks @TomazicM

          – Rich
          9 hours ago


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f331616%2fiterating-through-sub-element-sections-of-geojson-on-a-leaflet-map%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Hudson River Historic District Contents Geography History The district today Aesthetics Cultural...

          The number designs the writing. Feandra Aversely Definition: The act of ingrafting a sprig or shoot of one...

          How big is the pipe buffer?Turn off buffering in pipeIn what order do piped commands run?When would you use...