topic Re: How do you add multiple points to a map? in ArcGIS JavaScript Maps SDK Questions

How do you add multiple points to a map?

MartinNitschke — Fri, 10 Nov 2017 20:58:07 GMT

This has to be one of the easiest things there is, as there are no examples for it, except for the complex examples. I am getting an error from the MapView.js about a "type" being null. I am able to plot single points, but not more than one. I am able to see my data going into the Latitude and Longitude, but I must be missing something.

Re: How do you add multiple points to a map?

MartinNitschke — Fri, 10 Nov 2017 20:58:50 GMT

Here's the source code. I still can't figure out how to add it using the "source code" button.

require([

"esri/views/MapView",

"esri/WebMap",

"esri/layers/FeatureLayer",

"esri/Graphic",

"esri/geometry/Point",

"dojo/domReady!"

], function(MapView, WebMap, FeatureLayer, Point, Graphic) {

var newdata, lyr;

/**************************************************

* Define the specification for each field to create

* in the layer

**************************************************/

/**************************************************

* Create the map and view

**************************************************/

var webmap = new WebMap({

portalItem: {

id: "35277b863fde4449849662393868457e"

}

});

var view = new MapView({

container: "viewDiv",

map: webmap,

zoom: 10,

center: [-95.3630556, 29.7630556] // longitude, latitude

});

for(var i=0, il=data.length; i<il; i++){

var p = new Point({

longitude: data.XCoordinate,

latitude: data.YCoordinate,

spatialReference: { wkid: 4326 }

});

var g = new Graphic({

geometry: p,

symbol: {

type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

style: "square",

color: "blue",

size: "8px", // pixels

outline: { // autocasts as new SimpleLineSymbol()

color: [255, 255, 0],

width: 3 // points

}

});

view.graphics.add(g);

}

});

</script>

Re: How do you add multiple points to a map?

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:18:35 GMT

Martin,

You are making the most common mistake that beginner JS developer make with Using the JS API and AMD style programming. Your requires and their subsequent vars have to be in the same order.

You have:

Require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/layers/FeatureLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "dojo/domReady!"
], function(MapView, WebMap, FeatureLayer, Point, Graphic) {‍‍‍‍‍‍‍‍

You need:

Require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/layers/FeatureLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "dojo/domReady!"
], function(MapView, WebMap, FeatureLayer, Graphic, Point) {‍‍‍‍‍‍‍‍

Notice above Graphic and Point now are in the same order as the preceding require modules.