moving graphics disappear on zoom

Question

I have a moving vehicles graphics layer, and the graphics will disappear when the map gets zoomed in. The graphics are being created from an esriRequest, and a setInterval is being used to update the vehicle locations every 5 seconds. If the map remains at the home zoom level, the app works as it should. Also, I can zoom all the way out and the graphics remain, but it I zoom into a level between 18-20 the graphic disappears. I have to zoom out a level to have it reappear, but as soon as I zoom back down it disappears again. I’ve also noticed that sometimes that graphics disappear on pan as well. There is no min or max level set for the vehicle graphics layer so it should be defaulting to 0. I have tried the following: * Redraw the graphics on zoom, * Redraw the graphics on zoom-end * Logged to the console to see if the layer itself was still visible after zoom (it is). It also does not seem to matter what I set the interval at, the vehicles disappear all at about the same zoom level (18-20) after the first interval has redrawn the vehicles in their new coordinate locations. I’ve included, what should be all the relevant pieces of code below. I there’s something you think should be there please let me know. I may have forgotten to include it. I’m using the 3.2 API. app.vehiclesGraphicsLayer = new GraphicsLayer ({ id: "vehiclesGraphicsLayer" }); app.map.addLayer(app.vehiclesGraphicsLayer); app.vehiclesGraphicsLayer.hide(); app.esriVehicleRequest = function (routeID) { return new esriRequest({ url: "https://uofu.ridesystems.net/services/jsonprelay.svc/GetMapVehiclePoints", content: { apikey: "ride1791", routeID: routeID }, handleAs: "json", callbackParamName: "method" }).then(function(data) { return data; }); } app.vehicleGraphicFunction= function (data,graphicsLayer) { var vehicleObjects = data; if (data.length != 0) { for (v = 0; v < vehicleObjects.length; v++) { //Define Attributes var attributes = { "RouteID": vehicleObjects[v].RouteID, "Name": vehicleObjects[v].Name, "Speed": Math.round(vehicleObjects[v].GroundSpeed), "ID": vehicleObjects[v].VehicleID, "Angle": Math.abs(vehicleObjects[v].Heading) }; //Create Symbology var vehiclePNG = new PictureMarkerSymbol({ url: app.getImageURL(attributes.RouteID), height: 30, width: 30, angle: attributes.Angle }); //Creat InforTemplate var infoTemplate = new InfoTemplate("

+ app.getImageURL(attributes.RouteID) + "> " + app.getLineName(attributes.RouteID) + " - ${Name}");             //Create Graphic             var vehicleGraphic = new Graphic(new Point(vehicleObjects[v].Longitude, vehicleObjects[v].Latitude, app.map.SpatialReference), vehiclePNG, attributes, infoTemplate);             //Add graphics to graphics layer             graphicsLayer.add(vehicleGraphic);         }         //Create InfoTemplate Content         app.esriVehicleInfoTemplateRequest(attributes.ID).then(function (response) {             for (i = 0; i < response.length; i++) {                 for (gL = 0; gL < graphicsLayer.graphics.length; gL++) {                     if (response[i].VehicleID == graphicsLayer.graphics[gL].attributes.ID) {                         if (response[i].Estimates.length != 0) {                             graphicsLayer.graphics[gL].infoTemplate.setContent("" + response[i].Estimates[0].Description + ": " + response[i].Estimates[0].Text + "
" + response[i].Estimates[1].Description + ": " + response[i].Estimates[1].Text);                         }                         else {                             graphicsLayer.graphics[gL].infoTemplate.setContent("No Information Available");                         }                     }                 }             }         });     } } app.setVehicleInterval = function(routeRequestType, graphicsLayer){     var redVehicleInterval;     routeRequestType.then(function(vehicleResponse) {         //For each response returned from esriRequest         for (i=0; i < vehicleResponse.length; i++){             //loop through the graphics in the gL to find the graphic that shares the same vehicleID             //if the vehicleID equals the gL attribute value then update the XY coordinates             for (gL=0; gL < graphicsLayer.graphics.length; gL++){                 if (graphicsLayer.graphics[gL].attributes.ID === vehicleResponse[i].VehicleID) {                     graphicsLayer.graphics[gL].geometry.update(vehicleResponse[i].Longitude, vehicleResponse[i].Latitude);                     graphicsLayer.graphics[gL].attributes.Speed = vehicleResponse[i].GroundSpeed;                     if (vehicleResponse[i].GroundSpeed > 1.0){                         graphicsLayer.graphics[gL].symbol.url = app.getImageURL(graphicsLayer.graphics[gL].attributes.RouteID);                         graphicsLayer.graphics[gL].symbol.setAngle(vehicleResponse[i].Heading);                     }                     else {                         graphicsLayer.graphics[gL].symbol.url = app.getStopImageURL(graphicsLayer.graphics[gL].attributes.RouteID);                         graphicsLayer.graphics[gL].symbol.setAngle(90.0);                     }                     app.esriVehicleInfoTemplateRequest(vehicleResponse[i].VehicleID).then(function(templateResponse){                         //returns vehicle route estimates for that specific vehicle ID                         //Update the infoTemplate content with the newly retrieved content                         //console.log(templateResponse);                         for(tR = 0; tR < templateResponse.length; tR++){                             for(l=0; l < graphicsLayer.graphics.length; l++){                                 if (graphicsLayer.graphics[l].attributes.ID == templateResponse[tR].VehicleID){                                     if (templateResponse[tR].Estimates.length != 0){                                         graphicsLayer.graphics[l].infoTemplate.setContent(                                             ""+templateResponse[0].Estimates[0].Description+": "+templateResponse[0].Estimates[0].Text                                             +"
"+templateResponse[0].Estimates[1].Description +": "+templateResponse[0].Estimates[1].Text);                                     }                                     else{                                         graphicsLayer.graphics[l].infoTemplate.setContent("No Information Available");                                     }                                 }                             }                         }                     });                 }             }         }     });     graphicsLayer.redraw(); }; //Shuttle switches are part of a layer visibility switch function //I have only included this case here to limit unnecessary code case "redShuttleSwitch":     if (state === "on") {         //Turn off All Active Shuttles if its currently toggled on         app.switchLogic();         //Request Vehicle Locations         app.esriVehicleRequest(15).then(function (vehicleResponse) {             app.vehicleGraphicFunction(vehicleResponse, app.vehiclesGraphicsLayer);             app.showGraphicsLayer('vehiclesGraphicsLayer');             //Request Stops             app.esriStopRequest(15).then(function (stopResponse) {                 app.stopsGraphic(new Color([255, 0, 0]), 15, stopResponse);                 app.showGraphicsLayer('stopsGraphicsLayer');                 //Request Route                 app.esriRouteRequest(15).then(function (routeResponse) {                     app.routesGraphicFunction(15, routeResponse);                     app.showGraphicsLayer('routesGraphicsLayer');                 });             });         });         //Update vehicle positions and infotemplates         redVehicleInterval = setInterval(function () {             app.setVehicleInterval(app.esriVehicleRequest(15), app.vehiclesGraphicsLayer)         }, 5000);         //Update Stops InfoTemplate         redStopInterval = setInterval(function(){             app.setStopInterval(15)         },30000);     }     else {         app.clearIntervalCounter(redVehicleInterval);         app.clearIntervalCounter(redStopInterval);         app.removeGraphic(app.routesGraphicsLayer, 15);         app.removeGraphic(app.stopsGraphicsLayer, 15);         app.removeGraphic(app.vehiclesGraphicsLayer, 15);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

clai · Answer

I encountered the same question. Have you solve the problem