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.
Solved! Go to Solution.
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.
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>
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.