AnsweredAssumed Answered

Remove a single graphics from graphics layer

Question asked by rralbritton on Apr 10, 2017
Latest reply on Apr 11, 2017 by rralbritton

I have a series of graphics that get added to a single graphics layer when a user toggles on a switch. There are different toggles for each graphic (they're routes to bus lines) but all route graphics are being added to the same graphics layer. When a user toggles off a certain route, I want the route to be removed from the graphics layer, but keep the other routes on the graphics layers if they're toggled on. I have assigned the graphic being added a unique ID, however, using graphicsLayerName.remove(graphicID) isn't working for me.

 

 

//create graphic layer
app.routesGraphicsLayer = new GraphicsLayer({
  id:'routesGraphicsLayer'
])

//Add graphics layer
app.map.addLayer(app.routesGraphicsLayer)
app.routesGraphicsLayer.hide() //will get shown when toggled on

//Create unique variable names for graphic IDs
var redRoute;

//When Toggled ON:
app.handleLayerVis = function (switchName, state) {
    require(["dojo/dom","dojo/dom-class","dojox/mobile/Switch"], function(dom,domClass,Switch){
      console.log(switchName + " -- " + state);
      if (state === "on") {
        console.log('app.showLoading()');
        app.showLoading();
      }

      //hide popup
      if (state === "off") {
        app.map.infoWindow.hide();
      }

      switch (switchName) {
         case "redShuttleSwitch":
          if (state === "on") {
            //Turn off All Active Shuttles if its currently toggled on
            app.switchLogic();
                //Request Route
                app.esriRouteRequest(15).then(function (routeResponse) {
                  app.routesGraphicFunction("Red", routeResponse, app.routesGraphicsLayer, redRoute);
                  //Display route
                  app.showGraphicsLayer('routesGraphicsLayer');
                });
         
          else {
            //when route gets toggled off, remove graphic from graphics layer
            app.routesGraphicsLayer.remove(redRoute);
            app.routesGraphicsLayer.redraw();
          }
          break;

app.esriRouteRequest = function() {
    var routeRequest = new esriRequest({
      url: "http://www.uofubus.com/Services/JSONPRelay.svc/GetRoutesForMapWithScheduleWithEncodedLine",
      content: {
        apikey: "ride1791",
      },
      handleAs: "json",
      callbackParamName: "method"
    });
    routeRequest.then(app.routeRequestSucceeded, app.requestFailed);
    return routeRequest;
  }
  app.routeRequestSucceeded = function(data) {
    routesArray = [];
    for (i = 0; i < data.length; i++) {
      routesArray.push(data[i]);
    }
    return routesArray;
  }

  app.routesGraphicFunction = function (colorDescription, data, graphicslayer, routeGraphic) {

    var routeObjects = data;
    for (i = 0; i < routeObjects.length; i++) {
      if (routeObjects[i].Description == colorDescription){
        //Create Symbology
        var routeSLS = new SimpleLineSymbol ().setStyle(SimpleLineSymbol.STYLE_SOLID).setWidth(4).setColor(new Color(routeObjects[i].MapLineColor));
        //Create InfoTemplate
        var routesInfoTemplate = new InfoTemplate (routeObjects[i].Description+" Line", "<b>Stops Schedule: </b>" + app.moreInfoHyperlink(routeObjects[i].StopTimesPDFLink))
        //Create Graphic
        routeGraphic = new Graphic(new Polyline(app.decodeGooglePolyline(routeObjects[i].EncodedPolyline), app.map.SpatialReference), routeSLS, routeObjects[i].StopTimesPDFLink, routesInfoTemplate);
      }
    }
    //Add graphics to graphics layer
    graphicslayer.add(routeGraphic);
  }

Outcomes