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" , " Stops Schedule: " + 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 ) ; }

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Remove a single graphics from graphics layer

RachelAlbritton

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.

<SPAN class="comment token">//create graphic layer</SPAN>
app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; id<SPAN class="punctuation token">:</SPAN><SPAN class="string token">'routesGraphicsLayer'</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>

<SPAN class="comment token">//Add graphics layer</SPAN>
app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer<SPAN class="punctuation token">)</SPAN>
app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="comment token">//will get shown when toggled on</SPAN>

<SPAN class="comment token">//Create unique variable names for graphic IDs</SPAN>
<SPAN class="keyword token">var</SPAN> redRoute<SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//When Toggled ON:</SPAN>
app<SPAN class="punctuation token">.</SPAN>handleLayerVis <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>switchName<SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"dojo/dom-class"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"dojox/mobile/Switch"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">,</SPAN>domClass<SPAN class="punctuation token">,</SPAN>Switch<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>switchName <SPAN class="operator token">+</SPAN> <SPAN class="string token">" -- "</SPAN> <SPAN class="operator token">+</SPAN> state<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"on"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'app.showLoading()'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">showLoading</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//hide popup</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"off"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">switch</SPAN> <SPAN class="punctuation token">(</SPAN>switchName<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"redShuttleSwitch"</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"on"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Turn off All Active Shuttles if its currently toggled on</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">switchLogic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Request Route</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">esriRouteRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>routeResponse<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">routesGraphicFunction</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Red"</SPAN><SPAN class="punctuation token">,</SPAN> routeResponse<SPAN class="punctuation token">,</SPAN> app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer<SPAN class="punctuation token">,</SPAN> redRoute<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Display route </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">showGraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'routesGraphicsLayer'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//when route gets toggled off, remove graphic from graphics layer </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>redRoute<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; app<SPAN class="punctuation token">.</SPAN>routesGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">redraw</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 app<SPAN class="punctuation token">.</SPAN>esriRouteRequest <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> routeRequest <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.uofubus.com%2FServices%2FJSONPRelay.svc%2FGetRoutesForMapWithScheduleWithEncodedLine" target="_blank">http://www.uofubus.com/Services/JSONPRelay.svc/GetRoutesForMapWithScheduleWithEncodedLine</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; apikey<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ride1791"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handleAs<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callbackParamName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"method"</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; routeRequest<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN>routeRequestSucceeded<SPAN class="punctuation token">,</SPAN> app<SPAN class="punctuation token">.</SPAN>requestFailed<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> routeRequest<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; app<SPAN class="punctuation token">.</SPAN>routeRequestSucceeded <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; routesArray <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> data<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routesArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> routesArray<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp; app<SPAN class="punctuation token">.</SPAN>routesGraphicFunction <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>colorDescription<SPAN class="punctuation token">,</SPAN> data<SPAN class="punctuation token">,</SPAN> graphicslayer<SPAN class="punctuation token">,</SPAN> routeGraphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> routeObjects <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> routeObjects<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>Description <SPAN class="operator token">==</SPAN> colorDescription<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Create Symbology</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> routeSLS <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setWidth</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN>routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>MapLineColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Create InfoTemplate</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> routesInfoTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">InfoTemplate</SPAN> <SPAN class="punctuation token">(</SPAN>routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>Description<SPAN class="operator token">+</SPAN><SPAN class="string token">" Line"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"<b>Stops Schedule: </b>"</SPAN> <SPAN class="operator token">+</SPAN> app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">moreInfoHyperlink</SPAN><SPAN class="punctuation token">(</SPAN>routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>StopTimesPDFLink<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Create Graphic</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; routeGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Polyline</SPAN><SPAN class="punctuation token">(</SPAN>app<SPAN class="punctuation token">.</SPAN><SPAN class="token function">decodeGooglePolyline</SPAN><SPAN class="punctuation token">(</SPAN>routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>EncodedPolyline<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>SpatialReference<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> routeSLS<SPAN class="punctuation token">,</SPAN> routeObjects<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>StopTimesPDFLink<SPAN class="punctuation token">,</SPAN> routesInfoTemplate<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Add graphics to graphics layer</SPAN>
&nbsp;&nbsp;&nbsp; graphicslayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>routeGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

rscheitlin

You loop through the GraphicsLayer.graphics and look at each graphic for the unique Id.

All comments

RachelAlbritton

Thanks Robert - that visually does what I need, but I am getting errors in the console which is leading me to believe that I may be doing something that's going to come back to bite me.

I wrote in an app.removeGraphics function (see below) that loops through the graphics layer and identifies a graphic based on a graphic attribute. IF=f that attribute is there, the graphic is removed. When I toggle one line on and off the graphic clears and no errors are logged to the console. However, when I have 2 or more toggled turned on, the routes still are removed when toggled off, but I get an error in the console. I tried logging the graphicsLayer.graphics properties to the console directly after and new line gets toggled on and then again once a line gets toggled off and then removed. The logs beforehand loos as expected, but when I toggle off a line a get an empty array back even though there is still at least one graphic left visible on the graphics layer.

Error:

main.js:2446 Uncaught TypeError: Cannot read property 'attributes' of undefined

New function:

app.removeGraphic = function (graphicsLayer, description){
  for (gL = 0; graphicsLayer.graphics.length; gL++){
    if (graphicsLayer.graphics[gL].attributes[0] == description){
      graphicsLayer.remove(graphicsLayer.graphics[gL]);
      graphicsLayer.redraw();
    }
  }
}

rscheitlin

You loop through the GraphicsLayer.graphics and look at each graphic for the unique Id.

RachelAlbritton

Robert -

My intention is that it is but I must be doing this incorrectly.

In my app.routesGraphicFunction (line 66), at the very end of the function I create a new Graphic (line 76).

in the function, rather than assigning a variable to the new graphic, I assign an argument that can be passed into the function with the idea that the argument value is the unique id. So in this example, when I call the app.routesGraphicFunction, I pass the argument redRoute as the new graphic variable.

'redRoute' was already defined as a global variable on line 11.

What is an alternative for identifying a unique graphic?

rscheitlin

So a GraphicsLayer.remove is expecting to be based a Graphic (not an Id), so is redRoute an actual graphic?

app<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>routesGraphicsLayer<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">remove</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>redRoute<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.