Adding points to map object using dojo xhr.get web service call

[SEISMaster]

I would like to add graphics to a map based on data from a web service call. This is the code I have:

var xhrArgs = {
                            url: "/Map/getalerts",
                            handleAs: "json",
                            load: function (track) {
                                var point = new Point(track.Latitude, track.Longitude, new SpatialReference({ wkid: 4326 }));
                                var simpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                   new Color([255, 0, 0]), 1),
                                   new Color([0, 255, 0, 0.25]));
                                var graphic = new Graphic(webMercatorUtils.geographicToWebMercator(point), simpleMarkerSymbol,
                                 { 'title': track.FullName, 'content': 'ID: 2<br/>TimeStamp: Some Time<br/>Message Type: Alert' },
                                new InfoTemplate('${title}', '${content}'));
                                this.map.graphics.add(graphic);

                            },
                            error: function (error) {
                                console.log("An unexpected error occurred: " + error);
                            }
                        }

                        // Call the asynchronous xhrGet
                        var deferred = xhr.get(xhrArgs);
          }

However, when the call returns this.map is no longer in scope and the javascript throws an error about it being undefined.

Does anyone have any idea about how I can get hold of the map object again when the data from the web service call has been returned?

[JeffJacobson]

The problem you are having is probably caused by the use of this.map.  Store the Map in a variable and then refer to the variable in your function.

var map = new Map(...);
var xhrArgs = {
    url: "/Map/getalerts",
    handleAs: "json",
    load: function (track) {
        var point = new Point(track.Latitude, track.Longitude, new SpatialReference({
            wkid: 4326
        }));
        var simpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255, 0, 0]), 1),
        new Color([0, 255, 0, 0.25]));
        var graphic = new Graphic(webMercatorUtils.geographicToWebMercator(point), simpleMarkerSymbol, {
            'title': track.FullName,
            'content': 'ID: 2<br/>TimeStamp: Some Time<br/>Message Type: Alert'
        },
        new InfoTemplate('${title}', '${content}'));
        // Removed the "this" keyword.
        map.graphics.add(graphic);

    },
    error: function (error) {
        console.log("An unexpected error occurred: " + error);
    }
}

// Call the asynchronous xhrGet
var deferred = xhr.get(xhrArgs);
}

[JasonZou · Accepted solution]

Below solution assumes that in the scope where xhrArgs is defined, this.map can be accessible.

Add a local variable 'self' to host the context where xhrArgs is defined, then use self.map inside the callback function based on closure.

var self = this; var xhrArgs = {     url: "/Map/getalerts",     handleAs: "json",     load: function (track) {         var point = new Point(track.Latitude, track.Longitude, new SpatialReference({             wkid: 4326         }));         var simpleMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,                 new Color([255, 0, 0]), 1),             new Color([0, 255, 0, 0.25]));         var graphic = new Graphic(webMercatorUtils.geographicToWebMercator(point), simpleMarkerSymbol, {                 'title': track.FullName,                 'content': 'ID: 2<br/>TimeStamp: Some Time<br/>Message Type: Alert'             },             new InfoTemplate('${title}', '${content}'));         self.map.graphics.add(graphic);      },     error: function (error) {         console.log("An unexpected error occurred: " + error);     } }

[SEISMaster]

Thanks! this.map is accessible when xhrArgs is defined so adding:

var self = this;

and using

self.map.graphics.add(graphic);

...worked perfectly.

[JasonZou]

Excellent. Glad to help. Please consider mark this thread as "Answered" so other people may find it helpful. Thanks.