How to refresh the markers/map Layers on esri map

Question

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.

samplefile.html.zip

CodyPatterson_1-1714420536182.png

ManiDeep · Answer

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.

FC_Basson · Answer

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 · Answer

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: '

', 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 + "Overview."); } } } /* 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('

'); 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('

'); 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???