topic How to plot multiple points on a map? in ArcGIS JavaScript Maps SDK Questions

How to plot multiple points on a map?

MartinNitschke — Fri, 10 Nov 2017 15:34:49 GMT

I have tried to follow the example at https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/index.html

The first issue I have is that I am not using any URL to get my data. I have a .cshtml page and my data is stored in my ViewBag, which I store in a script variable.

var data = [{"MAST_REL":"704834405041S00676","XCoordinate":-95.455847,"YCoordinate":29.912856},{"MAST_REL":"706050261041C40974","XCoordinate":-95.465469,"YCoordinate":30.074337}];

</script>

Secondly, I get an error message: Object doesn't support property or method 'then' which is thrown from the createGraphics method. My abbreviated code:

view.then(function() {

createGraphics()

.then(createLayer) // when graphics are created, create the layer

.otherwise(errback);

});

function createGraphics() {

debugger;

// Create an array of Graphics from each GeoJSON feature

return data.map(function(feature, i) {

return {

geometry: new Point({

x: feature.XCoordinate,

y: feature.YCoordinate

}),

// select only the attributes you care about

attributes: {

ObjectID: i,

//title: feature.properties.title,

//type: feature.properties.type,

//place: feature.properties.place,

//depth: feature.geometry.coordinates[2] + " km",

//time: feature.properties.time,

//mag: feature.properties.mag,

//mmi: feature.properties.mmi,

//felt: feature.properties.felt,

//sig: feature.properties.sig,

//url: feature.properties.url

}

};

});

}

The last couple of issues. I am not familiar with JavaScript nor the GIS ESRI Api. Thanks. Also, the "Source Code" button is not working or I don't know how to use that either. I'd think you would highlight the source code and select it.

Re: How to plot multiple points on a map?

RobertScheitlin__GISP — Fri, 10 Nov 2017 23:16:41 GMT

Martin,

Your createGraphics is a standard function and does not return a deferred so using, createGraphics.then() does not work. If you want it to work with .then you have to make your function create a deferred object and return that deferred and in your function resolve your deferred when the function is done. You could call your createLayer function from inside your createGraphics once you are done with everything in that function.

For code formatting you need to click on the ... button next to the camera in the toolbar, > More button > Syntax highlighter.

Re: How to plot multiple points on a map?

MartinNitschke — Sat, 11 Dec 2021 14:34:03 GMT

        require([
          "esri/views/MapView",
          "esri/WebMap",
          "esri/Graphic",
          "esri/geometry/Point",
          "dojo/domReady!"
        ], function(MapView, WebMap, Graphic, Point) {



            /**************************************************
             * Create the map and view
             **************************************************/

            var webmap = new WebMap({
                portalItem: {
                    id: "35277b863fde4449849662393868457e"
                }
            });

            var view = new MapView({
                container: @divId,
                map: webmap,
                zoom: 9,
                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
                        }
                    }
                }) //had to remove the semicolon that was here too!
                view.graphics.add(g);
            }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The above is my working solution. I had a semicolon in the code as well that was causing issues.