How to refresh the markers/map Layers on esri map

ManiDeep · ‎06-14-2016

Hi Team,

I am able to do asynchronous request using extjs rest call.once received data from web service i have to refresh the map with out reloading the whole screen.

I have tried map layer.Refresh() method but it not works.

Can you suggest me with some examples or give me better solution to make it work.

Here i am attaching piece of code using as an HTML content .If required ask me for extjs code what i am using

Note: Removed Bing's key.

FC_Basson · ‎06-14-2016

Not sure what the problem is. I assume you are adding graphics to the GraphicsLayer based on the data you are retrieving. Maybe you can provide more code.

You can refresh the graphicslayer like this:

locationLayer.redraw();
// zoom to all graphics
map.setExtent(esri.graphicsExtent(locationLayer.graphics).expand(1.5));

ManiDeep · ‎06-14-2016

Thanks for your inputs Basson,The solution you have given is not worked.Can you help me on this.

Here as requested providing you brief description

There is auto refresh functionality in our application.When ever auto refresh(configurable parameter) happens we have to refresh the markers on the map.

Please find the below code to get better idea

Mappanel.js ---Which we use to show the map with markers

Here high lighted part is the map layer i am using to show the markers on map

Ext.define('IN.view.Terminal.MapPanel', {

extend: 'Ext.form.Panel',

alias: 'widget.mapPanel',

id: 'mapPanel',

initComponent: function() {

var me = this;

Ext.applyIf(me, {

items:[

{

xtype: 'panel',

html: '<div id="mapDiv" style="min-height:90%;" ></div>',

id:'displaypanel',

height: 600,

listeners: {

render: function() {

var isDriverFieldEmpty = true;

var history = false;

var isDriverDwellTimeEmpty = false;

var missionType;

//var map;

require([

"esri/map",

"esri/symbols/PictureMarkerSymbol",

"esri/graphic",

"esri/virtualearth/VETiledLayer",

"esri/geometry/Point",

"esri/layers/GraphicsLayer",

"dojo/domReady!"

], function (

Map, PictureMarkerSymbol, Graphic, VETiledLayer, Point, GraphicsLayer) {

map = new Map("mapDiv", {

sliderOrientation: "horizontal",

center: [TERMINAL_LIST[0].LATITUDE, TERMINAL_LIST[0].LONGITUDE],

zoom : existingZoomLevel

});

var baseMapLayer = new VETiledLayer({

bingMapsKey: 'AvzoZIkNO45p0W_CsBKNrKFALLA0IZcmI7XJ2QRTF87X8Gt0wloV1xQ0BdINIHN_',

mapStyle: VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS,

id: 'bingMapLayerId'

});

map.addLayer(baseMapLayer);

locationLayer = new GraphicsLayer();

var bluePin = new PictureMarkerSymbol({

"angle": 0,

"xoffset": 0,

"yoffset": 11,

"type": "esriPMS",

"url": "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",

"contentType": "image/png",

"width": 28,

"height": 28

});

var redPin = new PictureMarkerSymbol({

"angle": 0,

"xoffset": 0,

"yoffset": 11,

"type": "esriPMS",

"url": "http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png",

"contentType": "image/png",

"width": 28,

"height": 28

});

var purplePin = new PictureMarkerSymbol({

"angle": 0,

"xoffset": 0,

"yoffset": 11,

"type": "esriPMS",

"url": "http://static.arcgis.com/images/Symbols/Shapes/PurplePin1LargeB.png",

"contentType": "image/png",

"width": 28,

"height": 28

});

console.log("counter");

if(Ext.getCmp('driverAccessCode').getValue() != "" && Ext.getCmp('driverAccessCode').getValue() != null){

isDriverFieldEmpty = false;

}

if(Ext.getCmp('terminalSearchFromDate').getRawValue() != "" && Ext.getCmp('terminalSearchFromDate').getRawValue() != null

&& Ext.getCmp('terminalSearchToDate').getRawValue() != "" && Ext.getCmp('terminalSearchToDate').getRawValue() != null){

history = true;

}

if(Ext.getCmp('dwellTime').getValue() != "" && Ext.getCmp('dwellTime').getValue() != null){

isDriverDwellTimeEmpty = true;

}

for (var i = 0; i < TERMINAL_LIST.length; i++) {

if(TERMINAL_LIST.MISSIONTYPE.replace(/^\s+|\s+$/g,'') == 'D'){

missionType = 'Drop Off';

}

else

{

missionType = 'Pick Up';

}

if(isDriverDwellTimeEmpty){

locationLayer.add(new Graphic(new Point(TERMINAL_LIST.LATITUDE, TERMINAL_LIST.LONGITUDE), redPin,

{

"dwelltime": TERMINAL_LIST.DWELLTIME,

"drivertitle": TERMINAL_LIST.DRIVERFIRSTNAME + " "+ TERMINAL_LIST.DRIVERLASTNAME,

"driverscac":TERMINAL_LIST.SCAC,

"ingate":missionType,

"driverdwellseconds":TERMINAL_LIST.DRIVERDWELLSECONDS,

"drivercurrentdate":TERMINAL_LIST.DRIVERCURRENTDATE,

"equipmentType":TERMINAL_LIST.EQUIPMENTTYPE ,

"equipmentNumber":TERMINAL_LIST.EQUIPMENTNUMBER ,

"equipmentInit":TERMINAL_LIST.EQUIPMENTINIT

}));

} else {

if(isDriverFieldEmpty){

locationLayer.add(new Graphic(new Point(TERMINAL_LIST.LATITUDE, TERMINAL_LIST.LONGITUDE), bluePin,

{

"dwelltime": TERMINAL_LIST.DWELLTIME,

"drivertitle": TERMINAL_LIST.DRIVERFIRSTNAME + " "+ TERMINAL_LIST.DRIVERLASTNAME,

"driverscac":TERMINAL_LIST.SCAC,

"ingate":missionType,

"driverdwellseconds":TERMINAL_LIST.DRIVERDWELLSECONDS,

"drivercurrentdate":TERMINAL_LIST.DRIVERCURRENTDATE,

"equipmentType":TERMINAL_LIST.EQUIPMENTTYPE ,

"equipmentNumber":TERMINAL_LIST.EQUIPMENTNUMBER ,

"equipmentInit":TERMINAL_LIST.EQUIPMENTINIT

}));

} else{

if(!isDriverFieldEmpty && i==0 && !history){

locationLayer.add(new Graphic(new Point(TERMINAL_LIST.LATITUDE, TERMINAL_LIST.LONGITUDE), purplePin,

{

"dwelltime": TERMINAL_LIST.DWELLTIME,

"drivertitle": TERMINAL_LIST.DRIVERFIRSTNAME + " "+ TERMINAL_LIST.DRIVERLASTNAME,

"driverscac":TERMINAL_LIST.SCAC,

"ingate":missionType,

"driverdwellseconds":TERMINAL_LIST.DRIVERDWELLSECONDS,

"drivercurrentdate":TERMINAL_LIST.DRIVERCURRENTDATE,

"equipmentType":TERMINAL_LIST.EQUIPMENTTYPE,

"equipmentNumber":TERMINAL_LIST.EQUIPMENTNUMBER,

"equipmentInit":TERMINAL_LIST.EQUIPMENTINIT

}));

} else {

locationLayer.add(new Graphic(new Point(TERMINAL_LIST.LATITUDE, TERMINAL_LIST.LONGITUDE), bluePin,

{

"dwelltime": TERMINAL_LIST.DWELLTIME,

"drivertitle": TERMINAL_LIST.DRIVERFIRSTNAME + " "+ TERMINAL_LIST.DRIVERLASTNAME,

"driverscac":TERMINAL_LIST.SCAC,

"ingate":missionType,

"driverdwellseconds":TERMINAL_LIST.DRIVERDWELLSECONDS,

"drivercurrentdate":TERMINAL_LIST.DRIVERCURRENTDATE,

"equipmentType":TERMINAL_LIST.EQUIPMENTTYPE ,

"equipmentNumber":TERMINAL_LIST.EQUIPMENTNUMBER ,

"equipmentInit":TERMINAL_LIST.EQUIPMENTINIT

}));

}

locationLayer.on("mouse-over", function (event) {

map.graphics.clear();

//use the maps graphics layer as the highlight layer

//set the map info content based on the graphics attribute

if(history) {

map.infoWindow.setContent(

""+"SCAC:"+ event.graphic.attributes.driverscac+

""+"Mission Type:"+ event.graphic.attributes.ingate+

""+"Location Time:"+ event.graphic.attributes.drivercurrentdate+

""+"Equipment Type:"+ event.graphic.attributes.equipmentType+

""+"Equipment Init:" + event.graphic.attributes.equipmentInit+

""+"Equipment Number:" + event.graphic.attributes.equipmentNumber

);

} else {

map.infoWindow.setContent(

"Dwell Time:"+event.graphic.attributes.dwelltime +

""+"SCAC:"+ event.graphic.attributes.driverscac+

""+"Mission Type:"+ event.graphic.attributes.ingate+

""+"Location Time:"+ event.graphic.attributes.drivercurrentdate+

""+"Equipment Type:"+ event.graphic.attributes.equipmentType+

""+"Equipment Init:" + event.graphic.attributes.equipmentInit+

""+"Equipment Number:" + event.graphic.attributes.equipmentNumber

);

}

map.infoWindow.setTitle(event.graphic.attributes.drivertitle);

map.infoWindow.resize(275, 150);

map.infoWindow.show(event.screenPoint,

map.getInfoWindowAnchor(event.screenPoint));

$(".titleButton.close").removeClass('close');

$(".titleButton.maximize").removeClass('maximize');

});

//listen for when map.graphics mouse-out event is fired

//and then clear the highlight graphic

//and hide the info window

locationLayer.on("mouse-out", function () {

map.graphics.clear();

map.infoWindow.hide();

});

map.addLayer(locationLayer);

});

}

]

});

me.callParent(arguments);

}

});

Store.js

-----Below highlighted part in "green" is when the map is displaying for the first time

----- Below Highlighted part in "yellow" is the code i am using once map is displayed then refreshing the markers

Ext.define('IN.store.Terminal.TerminalStore', {

extend: 'Ext.data.Store',

requires: [

'IN.model.Terminal.TerminalModel'

],

constructor: function(cfg) {

var me = this;

cfg = cfg || {};

me.callParent([Ext.apply({

model: 'IN.model.Terminal.TerminalModel',

storeId: 'TerminalStore',

listeners: {

load: function (store, result, successful, eOpts) {

if (successful) {

TERMINAL_LIST = [];

store.each(function(r) {

if (r.get('terminalID') != 0) {

var termId = r.get('terminalID');

var xCoordinate = r.get('xCoordinate');

var yCoordinate = r.get('yCoordinate');

var scac = r.get('scac');

var driverId = r.get('driverId');

var driverFirstName = r.get('driverFirstName');

var driverLastName = r.get('driverLastName');

var driverDwellSeconds = r.get('driverDwellSeconds');

var missionType = r.get('missionType');

var DwellTime = r.get('dwellTime');

var driverCurrentDate = r.get('driverCurrentDate');

var equipmentType = r.get('equipmentType');

var equipmentNumber = r.get('equipmentNumber');

var equipmentInit = r.get('equipmentInit');

//var accessCode = r.get('driverCurrentDate');

TERMINAL_LIST.push({TERMINALID: termId, LONGITUDE: xCoordinate, LATITUDE: yCoordinate, SCAC: scac, DRIVERID: driverId, DRIVERFIRSTNAME: driverFirstName, DRIVERLASTNAME: driverLastName , DRIVERDWELLSECONDS: driverDwellSeconds, MISSIONTYPE: missionType, DWELLTIME: DwellTime, DRIVERCURRENTDATE : driverCurrentDate, EQUIPMENTTYPE : equipmentType , EQUIPMENTNUMBER : equipmentNumber, EQUIPMENTINIT : equipmentInit });

}

});

var proxy = store.getProxy(),

reader = proxy.getReader(),

raw = reader.rawData;

var message=raw.message;

if(result == ""){

if(message[0].key==SESSION_EXPIRED){

displaySessionTimeoutMessage(message[0].defaultMessage);

autoRefresh = null;

clearInterval(autoRefresh);

hideLoadingMessage();

}else{

hideLoadingMessage();

displayMessage("No Results Found",INFORMATION_MESSAGE,MESSAGE_FORM_ID,MESSAGE_FIELD_ID);

if(Ext.getCmp('mapPanel')!=undefined)

{

Ext.getCmp('dashboardcontainer').remove(Ext.widget('mapPanel'), true);

Ext.getCmp('refreshdriver').disable();

}

Ext.getCmp(DESCRIPTION).update(TERMINAL_DETAIL_SCREEN_HELP + "<a onclick = 'new IN.view.MenuTree().terminalStartIntro();' href='javascript:void(0);''>Overview.</a>");

}

/* if((flagMap == true) && (result != ""))

{

hideLoadingMessage();

Ext.getCmp('dashboardcontainer').remove(Ext.widget('mapPanel'), true);

Ext.getCmp('dashboardcontainer').add(Ext.widget('mapPanel'));

Ext.getCmp('refreshdriver').enable();

Ext.getCmp(TERMINAL_FORM_COLLAPSE_ID).setText('<img style=\"float:left;margin-left:-7px; margin-top:-2px;\" width=\"15\" height=\"16\" src=\"images/expand.png\" />');

Ext.getCmp('terminalsearchform').hide();

}*/

if((result !="") && (Ext.getCmp('mapPanel')==undefined))

{

hideLoadingMessage();

flagMap=true;

Ext.getCmp('dashboardcontainer').add(Ext.widget('mapPanel'));

Ext.getCmp('refreshdriver').enable();

Ext.getCmp(TERMINAL_FORM_COLLAPSE_ID).setText('<img style=\"float:left;margin-left:-7px; margin-top:-2px;\" width=\"15\" height=\"16\" src=\"images/expand.png\" />');

Ext.getCmp('terminalsearchform').hide();

} else{

hideLoadingMessage();

locationLayer.redraw();

//Ext.getCmp('displaypanel').fireEvent('boxready');

}

},

proxy: {

type: 'rest',

method: 'GET',

url: BASE_URL+FRONT_SLASH+OPEN_FLOWER_BRKT+DRIVER_URL+FRONT_SLASH+TERMINAL_URL+CLOSE_FLOWER_BRKT,

headers: '{Content-Type: application/json,Accept: application/json}',

reader: {

type: 'json',

root: 'result'

}

}, cfg)]);

}

});

Can you suggest me what the mistake i am doing???

FC_Basson · ‎06-14-2016

I'm not familiar with the ExtJS, but just check the scope of your locationLayer variable and make sure it is defined right at the top of your script as a global variable. Also please use the syntax highlighting of the advanced editor to make your code more readable.

ManiDeep · ‎06-14-2016

I kept my location layer as an global variable only.But markers are not getting updated.

Can u provide me another solution to refresh the map layer.

Thanks,

Manideep.