moving graphics disappear on zoom

RachelAlbritton · ‎05-22-2017

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("<img src=" + app.getImageURL(attributes.RouteID) + ">&nbsp<b>" + app.getLineName(attributes.RouteID) + " - ${Name}</b>");

            //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("<b>" + response[i].Estimates[0].Description + ": </b>" + response[i].Estimates[0].Text + "<br><b>" + response[i].Estimates[1].Description + ": </b>" + 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(
                                            "<b>"+templateResponse[0].Estimates[0].Description+": </b>"+templateResponse[0].Estimates[0].Text
                                            +"<br><b>"+templateResponse[0].Estimates[1].Description +": </b>"+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

I encountered the same question. Have you solve the problem