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’);
JavaScript
x
12
12
1
var divs = div.getElementsByClassName('volcdiv');
2
var divArray = [];
3
4
for (var i = 0; i < divs.length; i += 1) {
5
console.log(divs[i])
6
var volcanoname = divs[i].querySelector(".volcanoname").innerHTML
7
var volcanolat = divs[i].querySelector(".volcanolat").innerHTML
8
var volcanolon = divs[i].querySelector(".volcanolon").innerHTML
9
divArray.push({"volcanoname":volcanoname, "volcanolat": volcanolat, "volcanolon": volcanolon });
10
}
11
</script>
12
I’m looking to produce a variable like this
JavaScript
1
6
1
var pointX = {
2
type: "point",
3
longitude: divArray[i].volcanolon,
4
latitude: divArray[i].volcanolat,
5
};
6
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.
JavaScript
1
59
59
1
require(["esri/Map",
2
"esri/views/MapView",
3
"esri/Graphic",
4
"esri/widgets/BasemapToggle",
5
"esri/widgets/BasemapGallery"],
6
function(Map,
7
MapView,
8
Graphic,
9
BasemapToggle,
10
BasemapGallery
11
)
12
{
13
var map3 = new Map({
14
basemap: "topo"
15
});
16
var view3 = new MapView({
17
container: "viewDiv3",
18
map: map3,
19
zoom: 3,
20
center: [-130,15],
21
});
22
for (var i = 0; i < divs.length; i += 1) {
23
const popupTemplate = {
24
title: "{Name}",
25
content: "{Description}"
26
}
27
const attributes = {
28
Name: divArray[i].volcanoname,
29
Description: "Longitude and Latitude: " + divArray[i].volcanolon + " " + divArray[i].volcanolat + " Elevation: " + divArray[i].volcanoelev + "M. Observation: " + divArray[i].volcanoobs + "."
30
}
31
32
var point3 = {
33
type: "point",
34
longitude: divArray[i].volcanolon,
35
latitude: divArray[i].volcanolat,
36
};
37
38
var markerSymbol3 = {
39
type: "simple-marker",
40
color: [225, 0, 0],
41
outline: {
42
color: [0, 0, 0],
43
width: 1.5
44
}
45
}
46
47
var pointGraphic3 = new Graphic({
48
geometry: point3,
49
symbol: markerSymbol3,
50
51
attributes: attributes,
52
popupTemplate: popupTemplate
53
})
54
55
view3.graphics.add(pointGraphic3);
56
}
57
58
});
59