Skip to content
Advertisement

create a map point for each member of an array js ArcGIS API

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);
  }
    
    });
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement