remove previous graphic

[evanpicard]

as many have read by now, I've got a data grid populated by a spatial query, and corresponding points in a map (red circles).

when you click on a record in the table, I would like a graphic added to the map to highlight (green circle) an already existing point(red circle). when you click a different record in the grid, i would like the first highlighter to disappear, and a new one appear.
right now, things go 2 ways, either the selected point never clears, and it adds more and more graphic points, or the last of the red query point graphics to be drawn disappears. 

how do i specifically remove a graphic from selectedRepGraphic, not just the last graphic added, which is what happens now?

      function onRowClickHandler(evt){
        var clickedRep = grid.getItem(evt.rowIndex).rep_no;
        var selectedRep;
        var selectedRepSymbol = new esri.symbol.SimpleMarkerSymbol();
        selectedRepSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
        selectedRepSymbol.setSize(10);
        selectedRepSymbol.setColor(new dojo.Color([0,255,0, 1]));   
        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.rep_no === clickedRep){
            selectedRep = graphic;
            var selectedRepGraphic = new esri.Graphic(selectedRep, selectedRepSymbol);
            selectedRepGraphic.setSymbol(selectedRepSymbol);
            
            var selInfoTemplate = new esri.InfoTemplate("Sales Rep: ${NAME}", ("${*}")); //"Rep # : ${rep_no}", "Address : ${ADDR1}");
            map.infoWindow.setTitle(selectedRepGraphic.getContent("${NAME}"));
            map.infoWindow.setContent(selectedRepGraphic.getContent("Sales Rep: ${NAME}", "Rep #: ${rep_no}", "Address : ${ADDR1}"));
            selectedRepGraphic.setInfoTemplate(selInfoTemplate);
            map.infoWindow.show(selectedRepGraphic.geometry);

            if (selectedRepGraphic != undefined){
              map.graphics.remove(map.graphics.graphics[map.graphics.graphics.length - 1]);
            };
            
            map.graphics.add(selectedRepGraphic);
            

            return;
          };
        });
            return;
      };

[derekswingley1]

Thats why I love these forums, lots of people working together to help each other.  It is a pleasure to be part of this community.

Indeed, we've got a good thing going here :).

[evanpicard]

Sorry to beat a dead horse here, but I'm trying to re-use this, and I cant get the previous point to disappear on an onClick event.
Here's my whole onclick function:

      function onClicker(evt){
        identifyTaskReps = new esri.tasks.IdentifyTask("http://server/ArcGIS/rest/services/IndivTerritoriesOnly/SalesReps_simple/MapServer/");
        identifyParamsReps = new esri.tasks.IdentifyParameters();
        identifyParamsReps.tolerance = 5;
        identifyParamsReps.returnGeometry = true;
        identifyParamsReps.layerIds = [0];
        identifyParamsReps.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
        identifyParamsReps.width  = map.width;
        identifyParamsReps.height = map.height;
        identifyParamsReps.geometry = evt.mapPoint;
        identifyParamsReps.mapExtent = map.extent;
        var deferred = identifyTaskReps.execute(identifyParamsReps);
        deferred.addCallback(function(response){
          if (response.length > 0) {
            return dojo.map(response, function(result){
              var feature = result.feature;
              var featureSymbol = new esri.symbol.SimpleMarkerSymbol();
              featureSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
              featureSymbol.setSize(10);
              featureSymbol.setColor(new dojo.Color([0,255,0, 1]));
              feature.setSymbol(featureSymbol);

              feature.attributes.layerName = result.layerName;
              var infoTemplate = new esri.InfoTemplate();
              feature.setInfoTemplate(infoTemplate);
              var name = feature.attributes.NAME;
              var rep_no = feature.attributes.rep_no;
              var address = feature.attributes.ADDR1;
              var city = feature.attributes.CITY;
              var state = feature.attributes.ST_ABBR;
              var zipcode = feature.attributes.ZIP_CODE;
              var leader = feature.attributes.Ldr_type;
              var prez = feature.attributes.PCText;                        
              var content = "<b>Rep # : </b>" + rep_no + "<br><b>Address : </b>" + address + "<br><b>City : </b>" + city + "<br><b>State : </b>" + state + "<br><b>Zip : </b>" + zipcode + "<br><b> Leader : </b>" + leader + "<br><b>Presidents Club :</b>" + prez;
              var title = "<b>Name : </b>" + name;            
              map.infoWindow.setTitle(title);
              map.infoWindow.setContent(content);            
              feature.setInfoTemplate(infoTemplate);
              map.graphics.add(feature);  
              map.infoWindow.show(feature.geometry);       
              
              this.highlightGraphic = new esri.Graphic(feature, featureSymbol);
              this.highlightGraphic.id = "highlight";

              dojo.forEach(this.map.graphics.graphics, function(g) {
                if (g && g.id === "highlight") {
                  //remove graphic with specific id
                  this.map.graphics.remove(g);
                }
              }, this);
              this.map.graphics.add(this.highlightGraphic);                
              
          return;
          });
       };
       });
      };

Please help!
Jeff?  Derek? Help!

[evanpicard]

help help? 🙂  please?

[JeffPace]

help help? 🙂  please?

looking at your code (the last 3 blocks) you create the graphic, remove the graphic, then add the graphic.  I dont think that is the logic you want

is you onclick supposed to add a graphic or remove one?

[evanpicard]

looking at your code (the last 3 blocks) you create the graphic, remove the graphic, then add the graphic.  I dont think that is the logic you want

is you onclick supposed to add a graphic or remove one?

all the points should have a graphic.
if you click on a point, a new "highlight point" should appear.  if you click on a second point, a new highlight point needs to appear, and the the first one needs to disappear.
thanks.

[JeffPace]

all the points should have a graphic.
if you click on a point, a new "highlight point" should appear.  if you click on a second point, a new highlight point needs to appear, and the the first one needs to disappear.
thanks.

That makes more sense. 

First, remove the old graphic before you create the new one. (the forEach loop)
Second, remove all the "this"'s.  Looking at your code, you dont need them.

[evanpicard]

That makes more sense. 

First, remove the old graphic before you create the new one. (the forEach loop)
Second, remove all the "this"'s.  Looking at your code, you dont need them.

I'm seriously ready to slap my computer in its virtual face.

      function onClicker(evt){
        dojo.forEach(map.graphics.graphics, function(g) {
          console.log(g.id)
          if ( g && g.id === "highlight" ) {
            //remove graphic with specific id
            map.graphics.remove(g); // <-- this doesn't remove anything.
          }
        });          
        identifyTaskReps = new esri.tasks.IdentifyTask("http://172.26.197.91/ArcGIS/rest/services/IndivTerritoriesOnly/SalesReps_simple/MapServer/");
        identifyParamsReps = new esri.tasks.IdentifyParameters();
        identifyParamsReps.tolerance = 7;
        identifyParamsReps.returnGeometry = true;
        identifyParamsReps.layerIds = [0];
        identifyParamsReps.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
        identifyParamsReps.width  = map.width;
        identifyParamsReps.height = map.height;
        identifyParamsReps.geometry = evt.mapPoint;
        identifyParamsReps.mapExtent = map.extent;
        var deferred = identifyTaskReps.execute(identifyParamsReps);
        deferred.addCallback(function(response){
          if (response.length > 0) {
//           console.log("response length ",  response.length)
//           response is an array of identify result objects    
//           Let's return an array of features.
            return dojo.map(response, function(result){
              var selFeature = result.feature;
              var selFeatureSymbol = new esri.symbol.SimpleMarkerSymbol();
              selFeatureSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
              selFeatureSymbol.setSize(10);
              selFeatureSymbol.setColor(new dojo.Color([0,255,0, 1]));

              selFeature.setSymbol(selFeatureSymbol);

              selFeature.attributes.layerName = result.layerName;
              var infoTemplate = new esri.InfoTemplate();
              selFeature.setInfoTemplate(infoTemplate);
              var name = selFeature.attributes.NAME;
              var rep_no = selFeature.attributes.rep_no;
              var address = selFeature.attributes.ADDR1;
              var city = selFeature.attributes.CITY;
              var state = selFeature.attributes.ST_ABBR;
              var zipcode = selFeature.attributes.ZIP_CODE;
              var leader = selFeature.attributes.Ldr_type;
              var prez = selFeature.attributes.PCText;                        
              var content = "<b>Rep # : </b>" + rep_no + "<br><b>Address : </b>" + address + "<br><b>City : </b>" + city + "<br><b>State : </b>" + state + "<br><b>Zip : </b>" + zipcode + "<br><b> Leader : </b>" + leader + "<br><b>Presidents Club :</b>" + prez;
              var title = "<b>Name : </b>" + name;            
              map.infoWindow.setTitle(title);
              map.infoWindow.setContent(content);            
              map.graphics.add(selFeature);  
              map.infoWindow.show(selFeature.geometry);       
              
              highlightGraphic = new esri.Graphic(selFeature, selFeatureSymbol);
              highlightGraphic.id = "highlight";
              highlightGraphic.setSymbol;
              map.graphics.add(highlightGraphic);
            });
         };
       });
      };

map.graphics.remove(g);//<-- this doesn't remove anything.  If I change it to
map.graphics.clear();//            all graphics get cleared.

if I use console.log(g.id) I get logical results.  on the first click its nothing, on the second and any subsequent its "highlight"
please tell me I'm missing something stupid.

[JeffPace]

Okay i think i might have over generalized, and i am sorry for the frustration

dojo.forEach(map.graphics.graphics, function(g) {
          console.log(g.id)
          if ( g && g.id === "highlight" ) {
            //remove graphic with specific id
            map.graphics.remove(g); // <-- this doesn't remove anything.
          }
        }); 

the console see's g because you are passing it into the function, however it no longers knows what "map" is because the scope has changed

so

dojo.forEach(map.graphics.graphics, function(g) {
          console.log(g.id)
          if ( g && g.id === "highlight" ) {
            //remove graphic with specific id
            map.graphics.remove(g); // <-- this doesn't remove anything.
          }
        }, this); 

will keep the function in "this" scope which is aware of the "map" variable.

alternatively (same, just different syntax)

dojo.forEach(map.graphics.graphics, dojo.hitch(this, function(g) {
          console.log(g.id)
          if ( g && g.id === "highlight" ) {
            //remove graphic with specific id
            map.graphics.remove(g); // <-- this doesn't remove anything.
          }
        })); 

once you are in your "if", make sure you can alert map.  if not, you still have scope issues

[evanpicard]

Thank you for the help thus far.
Im going to be bald by the end of the day if I keep up all this hairpulling...


map.graphics.clear(); works, (and worked previously) but map.graphics.remove(g); does nothing.
as a test, within the IF i tried console.log(map.spatialReference), and it reported back to the console just fine.

      function onClicker(evt){
        dojo.forEach(map.graphics.graphics, function(g) {
          if ( g && g.id === "highlight" ) {
            //remove graphic with specific id
            map.graphics.remove(g); 
            console.log(map.spatialReference)
          }
        }, this);
        identifyTaskReps = new esri.tasks.IdentifyTask("http://172.26.197.91/ArcGIS/rest/services/IndivTerritoriesOnly/SalesReps_simple/MapServer/");
        identifyParamsReps = new esri.tasks.IdentifyParameters();
        identifyParamsReps.tolerance = 5;
        identifyParamsReps.returnGeometry = true;
        identifyParamsReps.layerIds = [0];
        identifyParamsReps.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
        identifyParamsReps.width  = map.width;
        identifyParamsReps.height = map.height;
        identifyParamsReps.geometry = evt.mapPoint;
        identifyParamsReps.mapExtent = map.extent;
        var deferred = identifyTaskReps.execute(identifyParamsReps);
        deferred.addCallback(function(response){
          if (response.length > 0) {
//           console.log("response length ",  response.length)
//           response is an array of identify result objects    
//           Let's return an array of features.
            return dojo.map(response, function(result){
              var selFeature = result.feature;
              var selFeatureSymbol = new esri.symbol.SimpleMarkerSymbol();
              selFeatureSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
              selFeatureSymbol.setSize(10);
              selFeatureSymbol.setColor(new dojo.Color([0,255,0, 1]));

              selFeature.setSymbol(selFeatureSymbol);

              selFeature.attributes.layerName = result.layerName;
              var infoTemplate = new esri.InfoTemplate();
              selFeature.setInfoTemplate(infoTemplate);
              var name = selFeature.attributes.NAME;
              var rep_no = selFeature.attributes.rep_no;
              var address = selFeature.attributes.ADDR1;
              var city = selFeature.attributes.CITY;
              var state = selFeature.attributes.ST_ABBR;
              var zipcode = selFeature.attributes.ZIP_CODE;
              var leader = selFeature.attributes.Ldr_type;
              var prez = selFeature.attributes.PCText;                        
              var content = "<b>Rep # : </b>" + rep_no + "<br><b>Address : </b>" + address + "<br><b>City : </b>" + city + "<br><b>State : </b>" + state + "<br><b>Zip : </b>" + zipcode + "<br><b> Leader : </b>" + leader + "<br><b>Presidents Club :</b>" + prez;
              var title = "<b>Name : </b>" + name;            
              map.infoWindow.setTitle(title);
              map.infoWindow.setContent(content);            
              map.graphics.add(selFeature);  
              map.infoWindow.show(selFeature.geometry);       

              highlightGraphic = new esri.Graphic(selFeature, selFeatureSymbol);
              highlightGraphic.id = "highlight";
              highlightGraphic.setSymbol(selFeatureSymbol);
              map.graphics.add(highlightGraphic);
            });
         };
       });
      };

[derekswingley1]

What do you see if you log the actual graphic being removed, as opposed to logging the map's spatial reference?

I would also recommend setting your "highlight" attribute on the graphic's attributes object, rather than on the graphic object itself.

Edit:  also, in your forEach, you don't need to specify "this" as the third argument since you're only referencing globals in your callback function.