Re: How to refresh the markers/map Layers on esri map

ManiDeep — Tue, 14 Jun 2016 12:50:00 GMT

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???

topic Re: How to refresh the markers/map Layers on esri map in ArcGIS JavaScript Maps SDK Questions

How to refresh the markers/map Layers on esri map

Re: How to refresh the markers/map Layers on esri map

Re: How to refresh the markers/map Layers on esri map

Re: How to refresh the markers/map Layers on esri map

Re: How to refresh the markers/map Layers on esri map