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