GraphicsLayer

[deleted-user-yA_w_FC9FKe5]

I am trying to clear out graphics on a graphicsLayer so that I can get a new selection.  Everything works with my Query task but I can't seem to clear out the old results.  All I end up doing is adding to the new results.  I've tried a lot of different stuff but it is not working.  How can I do this?  I thought a graphics layer would allow me to do this and seems to be my best choice since I have a couple of other layers I want to be able to filter as well as different results.


I tried up at the top putting the code up top where I add in some ArcGISDynamicMapServiceLayers but in my function it does not recognize my add layer and just bombs out.  Works in my function though.  However, I have a feeling it is creating multiple instances of otherRetailers.


//Where should I put this in my code. 
otherRetailerLayer = new esri.layers.GraphicsLayer();
otherRetailerLayer.id = 'otherRetailers';   
map.addLayer(otherRetailerLayer);

//Why does this not clear out my layer?
map.graphics.clear(otherRetailerLayer);

 function showCEResults(featureSet) {       //  Clear Datagrid          //create an empty store and then bind to grid var emptyCells = { items: "" }; var emptyStore = new dojo.data.ItemFileWriteStore({data: emptyCells});    grid = dijit.byId('gridCE');       grid.setStore(emptyStore); //alert ("Found InfoTemplate"); //Popup window settings  var content = "<b>FID</b>: ${FID}"  +               "<br><b>MALLID</b>: ${MALLID}" +        "<br><b>Mall Grade</b>: ${MALL_GRADE}" +      "<br><b>District</b>: ${DISTRICT}" +      "<br><b>MALL NAME</b>: ${MALLNAME}";                     var infoTemplate = new esri.InfoTemplate("${DIVISIONNA}", content);   var symbol = new esri.symbol.SimpleMarkerSymbol({   "color": [120,120,120,255],   "size": 8,   "type": "esriSMS",   "style": "esriSMSSquare",   "outline": {     "color": [0,0,0,255],     "width": 2,     "type": "esriSLS",     "style": "esriSLSSolid"  }});   var symbolRedShinyPin = new esri.symbol.PictureMarkerSymbol({  "angle": 0, "xoffset": 0, "yoffset": 12, "type": "esriPMS",  "url": "http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png",  "contentType": "image/png", "width": 18, "height": 18  });  var symbolShinyPin = new esri.symbol.PictureMarkerSymbol({  "angle": 0, "xoffset": 0, "yoffset": 12, "type": "esriPMS",  "url": "http://static.arcgis.com/images/Symbols/Basic/ShinyPin.png",  "contentType": "image/png", "width": 18, "height": 18  });      //alert ("Found DataGrid and Graphics");    var dataForGrid = [];  var temp = "";  var varRetailer = "";       //remove all graphics on the maps graphics layer                otherRetailerLayer = new esri.layers.GraphicsLayer();    otherRetailerLayer.id = 'otherRetailers';         map.addLayer(otherRetailerLayer);       //map.graphics.clear(otherRetailerLayer);              //Performance enhancer - assign featureSet array to a single variable.          var resultFeatures = featureSet.features;          //Loop through each feature returned           for (var i=0, il=resultFeatures.length; i<il; i++) {            //Get the current feature from the featureSet.            //Feature is a graphic            var graphic = resultFeatures;            varRetailer = resultFeatures.attributes.RETAILERID;         if (varRetailer == "3000"){      resultFeatures.setSymbol(symbolRedShinyPin );       }           else {      resultFeatures.setSymbol(symbolShinyPin);          }       resultFeatures.setInfoTemplate(infoTemplate);   otherRetailerLayer.add(resultFeatures);              //Put values in array for datagrid      var attValues = resultFeatures.attributes;                      dataForGrid.push(attValues);       };  //var grid = registry.byId("gridCE");        var data = {   identifier : "FID",   label : "FID",         items : dataForGrid         };      var store = new dojo.data.ItemFileReadStore({data: data});  grid.setSortIndex(2,"true"); //sort on the state name      grid.setStore(store);   grid.on("rowclick", onRowClickHandler);        //window.map.centerAndZoom(graphic.geometry);    }

[KenBuja]

The GraphicsLayer you obtain from map.graphics is a separate layer from the GraphicsLayer "otherRetailerLayer" you have added to the map. Instead, you should use

otherRetailerLayer.clear();

An alternative would be to not add your own GraphicsLayers and add your graphics to the map.graphics layer.

resultFeatures.setInfoTemplate(infoTemplate);         
map.graphics.add(resultFeatures);

You would then then use

map.graphics.clear();

to clear the map's graphics

[DanielWebb2]

I use the id of my graphics layer. Like this.

map.getLayer("otherRetailers").clear();

Hope this helps.

[deleted-user-yA_w_FC9FKe5]

thanks.  those both seemed to work.  Only problem I have is that once I clear out the layer I can't post to it anymore.  I have a feeling that it is because I am creating this layer inside the function and when I go through it a second time it is trying to create it again. 

     otherRetailerLayer = new esri.layers.GraphicsLayer();
   otherRetailerLayer.id = 'otherRetailers';
   map.addLayer(otherRetailerLayer);

otherRetailerLayer.add(resultFeatures);

I tried to add it at the start of my code when I load other things like this but then my function does not see the layer.

var otherRetailerLayer = new GraphicsLayer();
otherRetailerLayer.id = 'otherRetailers';
map.addLayers([dlDRegionDistrictPolygons,flMCY_Stores,flMCY_Stores_Regions,dlMCY_Stores,otherRetailerLayer]);


Then in my function I tried a couple of things like this:
    var layer = map.getLayer(otherRetailerLayer);
    layer.add(resultFeatures);

[DanielWebb2 · Accepted solution]

Iâ??m still new to javascript and coding but Iâ??ll try to give what Iâ??ve found and used.

If the function canâ??t see the layer, it sounds there is a problem with scope. Is the function in a separate .js file? Or maybe the layer and function are within their own curly braces? Things like this â??hideâ?? things from one another.

But I discovered if you donâ??t use the var keyword, than that variable becomes global and can be seen by everything, even by other .js files further down the file structure (though not â??upâ?? the file structure). So you might try declaring your graphics layer variable with no var keyword and see if that works.

Thatâ??s what Iâ??ve done. I declared and added the graphics layers (with no var keyword) at the same time as the other service layers using map.addLayer(graphicsLayer). Then, wherever I fire a function that creates a graphic (even one in a separate .js file), I add the graphic to that layer using graphicsLayer.add(graphic).

This strategy seems to work well for me, though there may be better ways. Like I said, Iâ??m still new to all this.

Hope this helps.

Almost forgot! No need to add the graphic using map.graphics.add(graphic); That will also put the graphic in the default graphics layer. I was doing this and getting multiple graphics I didn't want.

[deleted-user-yA_w_FC9FKe5]

Thanks Daniel.  That was problem.  I've been working on this issue for hours.  Augh. 

I knew it was something simple as I thought I was doing everything correctly.   Just was not sure what the heck was the problem. 


Thank-you so much for your help.