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;
}
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
add a comment |
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
add a comment |
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
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
leaflet geojson
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
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
9 hours ago
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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
9 hours ago
add a comment |
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
9 hours ago
add a comment |
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);
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);
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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