I have drop down in my page, when the drop down value changes the contents of the map i.e the data to be loaded should change.It successfully loads for the first time but when again changed it is not changing. I am new to ArcGis map and want to reload the map. tried several methods but that doesn't help. Below is my code please suggest the way to fix this.
require([ "esri/map", "esri/TimeExtent", "esri/dijit/TimeSlider", "esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Polyline", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function ( Map, TimeExtent, TimeSlider, Point, PictureMarkerSymbol, Graphic, GraphicsLayer, Polyline, arrayUtils, dom ) { var globalLocationArray = //my json data with latitude and longitude var map; var longitude = 96.07677; var latitude = 16.97986; var point = new Point(longitude, latitude); var layer = new GraphicsLayer(); var layer1 = new GraphicsLayer(); map = new Map("mapDiv", { basemap: "osm", center: point, // longitude, latitude zoom: 7, maxZoom: 15, minZoom: 3, }); map.on("load", function () { map.infoWindow.resize(250, 100); //layer.clear(); //layer1.clear(); //map.removeLayer(layer) //map.removeLayer(layer1) //map.refresh(); //map.setExtent(map.extent) }); layer1.on("click", function (evt) { console.log(evt); map.infoWindow.setTitle("Information"); var dataDisplay ="Contents"; map.infoWindow.setContent(dataDisplay); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); }); function createMarker(longitude, latitude, externalCause, date) { var point = new Point(longitude, latitude); point = esri.geometry.geographicToWebMercator(point); var symbol; if (externalCause == "SUCCESS") { symbol = new PictureMarkerSymbol( "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32) .setOffset(0, 15); } else { symbol = new PictureMarkerSymbol( "http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png", 32, 32) .setOffset(0, 15); } //var symbol= symbol = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15); var graphic = new esri.Graphic(point, symbol); layer1.add(graphic); } function createPolyLine(sourcePoint, destPoint) { var point1 = new Point(sourcePoint[0], sourcePoint[1]); var point2 = new Point(destPoint[0], destPoint[1]); var line = new esri.geometry.Polyline(); var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.5]), 3); line.addPath([point1, point2]); var graphic = new Graphic(line, lineSymbol); layer.add(graphic); } function drawGeoMap(data) { console.info(data); for (var row in data) { var rowObj = createObject(data[row]); createMarker(rowObj.long, rowObj.lat, rowObj.externalCause, rowObj.date,rowObj.cellName,rowObj.bts); createMarker(rowObj.sbLong, rowObj.sbLat, rowObj.sbExternalCause, rowObj.sbDate,rowObj.sbCellName,rowObj.sbBts); createPolyLine([rowObj.long, rowObj.lat], [rowObj.sbLong, rowObj.sbLat]); } map.addLayer(layer); map.addLayer(layer1); } function createObject(rowData) { var count = 0; var obj = { sbLat: rowData[count++], sbLong: rowData[count++], sbExternalCause: rowData[count++], sbDate: rowData[count++], sbCellName: rowData[count++], sbBts: rowData[count++], lat: rowData[count++], long: rowData[count++], externalCause: rowData[count++], date: rowData[count++], cellName: rowData[count++], bts: rowData[count++] }; return obj; } initSlider(); function initSlider() { var timeSlider = new TimeSlider({ style: "width: 100%;" }, dom.byId("timeSliderDiv")); var timeExtent = new TimeExtent(); timeExtent.startTime = new Date("2/14/2015"); timeExtent.endTime = new Date("2/15/2015"); timeSlider.setThumbCount(2); timeSlider.createTimeStopsByTimeInterval(timeExtent, 30, "esriTimeUnitsMinutes"); timeSlider.setThumbIndexes([0, 1]); timeSlider.setThumbMovingRate(2000); timeSlider.startup(); //add labels for every other time stop var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) { console.log(timeStop) if (i % 2 === 0) { var minutes; if (timeStop.getMinutes() < 10) { minutes = "0" + timeStop.getMinutes(); } else { minutes = timeStop.getMinutes(); } return timeStop.getHours() + ":" + minutes; } else { return ""; } }); timeSlider.setLabels(labels); timeSlider.on("time-extent-change", function (evt) { layer.clear(); layer1.clear(); map.infoWindow.hide(); var startMinutes; var endminutes; if (new Date(evt.startTime).getMinutes() < 10) { startMinutes = "0" + new Date(evt.startTime).getMinutes(); } else { startMinutes = new Date(evt.startTime).getMinutes(); } if (new Date(evt.endTime).getMinutes() < 10) { endminutes = "0" + new Date(evt.endTime).getMinutes(); } else { endminutes = new Date(evt.endTime).getMinutes(); } var startValString = new Date(evt.startTime).getHours() + ":" + startMinutes; var endValString = new Date(evt.endTime).getHours() + ":" + endminutes; var start=globalArrayWithLocationAndImsi.length; var end = 0 for(var i=0;i= new Date(evt.startTime).getHours() && srti) { start=i; } if(end
require([ "esri/map", "esri/TimeExtent", "esri/dijit/TimeSlider", "esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Polyline", "dojo/_base/array", "dojo/dom", "dojo/domReady!" ], function ( Map, TimeExtent, TimeSlider, Point, PictureMarkerSymbol, Graphic, GraphicsLayer, Polyline, arrayUtils, dom ) { var globalLocationArray = //my json data with latitude and longitude var map; var longitude = 96.07677; var latitude = 16.97986; var point = new Point(longitude, latitude); var layer = new GraphicsLayer(); var layer1 = new GraphicsLayer(); map = new Map("mapDiv", { basemap: "osm", center: point, // longitude, latitude zoom: 7, maxZoom: 15, minZoom: 3, }); map.on("load", function () { map.infoWindow.resize(250, 100); //layer.clear(); //layer1.clear(); //map.removeLayer(layer) //map.removeLayer(layer1) //map.refresh(); //map.setExtent(map.extent) }); layer1.on("click", function (evt) { console.log(evt); map.infoWindow.setTitle("Information"); var dataDisplay ="Contents"; map.infoWindow.setContent(dataDisplay); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); }); function createMarker(longitude, latitude, externalCause, date) { var point = new Point(longitude, latitude); point = esri.geometry.geographicToWebMercator(point); var symbol; if (externalCause == "SUCCESS") { symbol = new PictureMarkerSymbol( "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32) .setOffset(0, 15); } else { symbol = new PictureMarkerSymbol( "http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png", 32, 32) .setOffset(0, 15); } //var symbol= symbol = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15); var graphic = new esri.Graphic(point, symbol); layer1.add(graphic); } function createPolyLine(sourcePoint, destPoint) { var point1 = new Point(sourcePoint[0], sourcePoint[1]); var point2 = new Point(destPoint[0], destPoint[1]); var line = new esri.geometry.Polyline(); var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.5]), 3); line.addPath([point1, point2]); var graphic = new Graphic(line, lineSymbol); layer.add(graphic); } function drawGeoMap(data) { console.info(data); for (var row in data) { var rowObj = createObject(data[row]); createMarker(rowObj.long, rowObj.lat, rowObj.externalCause, rowObj.date,rowObj.cellName,rowObj.bts); createMarker(rowObj.sbLong, rowObj.sbLat, rowObj.sbExternalCause, rowObj.sbDate,rowObj.sbCellName,rowObj.sbBts); createPolyLine([rowObj.long, rowObj.lat], [rowObj.sbLong, rowObj.sbLat]); } map.addLayer(layer); map.addLayer(layer1); } function createObject(rowData) { var count = 0; var obj = { sbLat: rowData[count++], sbLong: rowData[count++], sbExternalCause: rowData[count++], sbDate: rowData[count++], sbCellName: rowData[count++], sbBts: rowData[count++], lat: rowData[count++], long: rowData[count++], externalCause: rowData[count++], date: rowData[count++], cellName: rowData[count++], bts: rowData[count++] }; return obj; } initSlider(); function initSlider() { var timeSlider = new TimeSlider({ style: "width: 100%;" }, dom.byId("timeSliderDiv")); var timeExtent = new TimeExtent(); timeExtent.startTime = new Date("2/14/2015"); timeExtent.endTime = new Date("2/15/2015"); timeSlider.setThumbCount(2); timeSlider.createTimeStopsByTimeInterval(timeExtent, 30, "esriTimeUnitsMinutes"); timeSlider.setThumbIndexes([0, 1]); timeSlider.setThumbMovingRate(2000); timeSlider.startup(); //add labels for every other time stop var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) { console.log(timeStop) if (i % 2 === 0) { var minutes; if (timeStop.getMinutes() < 10) { minutes = "0" + timeStop.getMinutes(); } else { minutes = timeStop.getMinutes(); } return timeStop.getHours() + ":" + minutes; } else { return ""; } }); timeSlider.setLabels(labels); timeSlider.on("time-extent-change", function (evt) { layer.clear(); layer1.clear(); map.infoWindow.hide(); var startMinutes; var endminutes; if (new Date(evt.startTime).getMinutes() < 10) { startMinutes = "0" + new Date(evt.startTime).getMinutes(); } else { startMinutes = new Date(evt.startTime).getMinutes(); } if (new Date(evt.endTime).getMinutes() < 10) { endminutes = "0" + new Date(evt.endTime).getMinutes(); } else { endminutes = new Date(evt.endTime).getMinutes(); } var startValString = new Date(evt.startTime).getHours() + ":" + startMinutes; var endValString = new Date(evt.endTime).getHours() + ":" + endminutes; var start=globalArrayWithLocationAndImsi.length; var end = 0 for(var i=0;i= new Date(evt.startTime).getHours() && srti) { start=i; } if(end