Extend Azure Map marker on update - asp.net-mvc

Question

I am using Azure Atlas Map in my Azure Web app. I want to move the symbols smoothly without refreshing the whole page.
I did some changes in existing code. I have set a time interval in ajax call and adding the new symbol layer in the map.
But facing issues.
I am getting error
map is undefined.
here is the code
function GetJsonMap(jsondata) {
if (typeof jsondata !== 'undefined') {
var gps_data = jsondata;
for (var i = 0; i < gps_data.length; i++) {
var point = new atlas.data.Point([gps_data[i][0], gps_data[i][1]]);
var feature = new atlas.data.Feature(point, { name: gps_data[i][2], description: '[' + gps_data[i][0] + ", " + gps_data[i][1] + ']' });
datasource.add(feature);
}
//Add a layer for rendering point data as symbols.
var symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'pin-red'
}
});
debugger;
// $("#iotmap")
map.layers.add(symbolLayer); -->getting error here
}
}
I am calling this GetJsonMap in ajax call.

Answer 1

If you are getting an error that map is null it means that its out of scope in your code. Is it a global or local variable?
Looking at your code I highly recommend that you create the symbol layer after the maps ready event has fired and only create it once. Majority of the code samples for Azure Maps do this. The way your code is now, it will add a new layer every the GetJsonMap function is called. As such, you will end up with several layers over time that are trying to render the same data on the map. Note that the data is managed by the data source, layers only render what's in the data source.
Another tip, you are looping through and adding each point in one by one to the data source. A slightly faster way is to add all the points to an array and then add the array to the data source. Every time data is added to the data source it tries to update the map. Additionally, if you want to overwrite all data on the map, instead of clearing the data source and then adding your data, use the setShapes function of the data source. This will do the clear and add in one function and only trigger a single render update on the map.