I’ve created an array of volcanoes with latitudes and longitudes from a geoJSON file. I would like to see if its possible to create a loop which iterates through the array to create points with the values.
Previously when I have attempted this I am presented with an empty map if it even loads.
My array is created such as var div = document.getElementById(‘divholder’);
var divs = div.getElementsByClassName('volcdiv');
var divArray = [];
for (var i = 0; i < divs.length; i += 1) {
console.log(divs[i])
var volcanoname = divs[i].querySelector(".volcanoname").innerHTML
var volcanolat = divs[i].querySelector(".volcanolat").innerHTML
var volcanolon = divs[i].querySelector(".volcanolon").innerHTML
divArray.push({"volcanoname":volcanoname, "volcanolat": volcanolat, "volcanolon": volcanolon });
}
</script>
I’m looking to produce a variable like this
var pointX = {
type: "point",
longitude: divArray[i].volcanolon,
latitude: divArray[i].volcanolat,
};
When attempting this without a for loop my plots do not point. Is there some issue with the values? or can they not be used with a map
Thanks!
Advertisement
Answer
I was able to create a simple for loop which has now plotted all of the volcanoes. The map code looks like this.
require(["esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"],
function(Map,
MapView,
Graphic,
BasemapToggle,
BasemapGallery
)
{
var map3 = new Map({
basemap: "topo"
});
var view3 = new MapView({
container: "viewDiv3",
map: map3,
zoom: 3,
center: [-130,15],
});
for (var i = 0; i < divs.length; i += 1) {
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
const attributes = {
Name: divArray[i].volcanoname,
Description: "Longitude and Latitude: " + divArray[i].volcanolon + " " + divArray[i].volcanolat + " Elevation: " + divArray[i].volcanoelev + "M. Observation: " + divArray[i].volcanoobs + "."
}
var point3 = {
type: "point",
longitude: divArray[i].volcanolon,
latitude: divArray[i].volcanolat,
};
var markerSymbol3 = {
type: "simple-marker",
color: [225, 0, 0],
outline: {
color: [0, 0, 0],
width: 1.5
}
}
var pointGraphic3 = new Graphic({
geometry: point3,
symbol: markerSymbol3,
attributes: attributes,
popupTemplate: popupTemplate
})
view3.graphics.add(pointGraphic3);
}
});