How do you add multiple points to a map?

1449
2
Jump to solution
11-10-2017 12:58 PM
MartinNitschke
New Contributor II

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. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

2 Replies
MartinNitschke
New Contributor II

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

<script>

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>

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post