topic Re: remove previous graphic in ArcGIS JavaScript Maps SDK Questions

remove previous graphic

evanpicard — Mon, 09 Apr 2012 17:37:44 GMT

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;
      };

Re: remove previous graphic

JeffPace — Sat, 11 Dec 2021 16:43:29 GMT

I do this in kind of a round about way. ON creation I add an ID to the graphic.

this.highlightGraphic=new esri.Graphic(geometry, sym);
                        this.highlightGraphic.id="highlight";
   this.map.graphics.add(this.highlightGraphic);

Then you can

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

does that help?

      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;
      };

Re: remove previous graphic

evanpicard — Mon, 09 Apr 2012 19:48:53 GMT

Got it!
Thanks.
Can you explain what "this" is all about? I've read a few articles, and can't get my head around it.

Re: remove previous graphic

derekswingley1 — Sat, 11 Dec 2021 16:43:31 GMT

Good explanation of "this" in JS: http://www.quirksmode.org/js/this.html

As an aside, dojo.forEach takes a third argument to specify the scope for the callback. So...you could omit that call to dojo.hitch:

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

which is cleaner, IMO. Great info on forEach here: http://dojotoolkit.org/documentation/tutorials/1.6/arrays/

Re: remove previous graphic

JeffPace — Tue, 10 Apr 2012 11:25:48 GMT

Yes sorry you dont need the "this" my code was from within a widget we load, so it was for scoping.

Glad i helped!

Re: remove previous graphic

JeffPace — Tue, 10 Apr 2012 11:27:32 GMT

wait so i post the code and derek gets credit for the answer ?? not cool derek, not cool.

🙂 😞

Re: remove previous graphic

evanpicard — Sat, 11 Dec 2021 16:43:34 GMT

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

I've got it working very nicely, I appreciate the help from both of you. But I have a question, how would you re-write the dojo statement without the "this"?

dojo.forEach(this.map.graphics.graphics, function(g) {
  if( g && g.id === "highlight" ) {
    //remove graphic with specific id
    map.graphics.remove(g);
  }
}, this);   // <-----WHAT HAPPENS TO THIS this?

Thanks again, to BOTH OF YOU!

Re: remove previous graphic

JeffPace — Tue, 10 Apr 2012 11:50:21 GMT

you will need a "this" somewhere, because you are removing the graphic from the map.

In my sample I use dojo.hitch to explicitly hitch the new function(g) into the larger scope (this) so that i have access to this.map

In derek's sample, he more eloquently realizes that dojo.forEach can take scope as a third argument, so his code becomes

dojo.forEach(graphic, function, scope) - which is the "this" at the end, allowing him to skip the hitch statement.

Both have the same effect

The only way you could completely avoid using this would be to pass your map object into your function. I dont think that would be very efficient.

Re: remove previous graphic

derekswingley1 — Tue, 10 Apr 2012 14:08:00 GMT

wait so i post the code and derek gets credit for the answer ?? not cool derek, not cool.

🙂 😞

Jeff should absolutely get credit for answering this thread...I just piggy-backed on what he was saying :).

Re: remove previous graphic

JeffPace — Wed, 11 Apr 2012 11:56:13 GMT

Jeff should absolutely get credit for answering this thread...I just piggy-backed on what he was saying :).

I was just teasing Derek. 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.

Re: remove previous graphic

derekswingley1 — Wed, 11 Apr 2012 18:49:21 GMT

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 :).

Re: remove previous graphic

evanpicard — Sat, 11 Dec 2021 16:43:36 GMT

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!

Re: remove previous graphic

evanpicard — Thu, 10 May 2012 17:27:57 GMT

help help? 🙂 please?

Re: remove previous graphic

JeffPace — Thu, 10 May 2012 18:06:56 GMT

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?

Re: remove previous graphic

evanpicard — Thu, 10 May 2012 18:09:49 GMT

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.

Re: remove previous graphic

JeffPace — Thu, 10 May 2012 18:22:45 GMT

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.

Re: remove previous graphic

evanpicard — Sat, 11 Dec 2021 16:43:39 GMT

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.

Re: remove previous graphic

JeffPace — Sat, 11 Dec 2021 16:43:42 GMT

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

Re: remove previous graphic

evanpicard — Sat, 11 Dec 2021 16:43:44 GMT

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);
            });
         };
       });
      };

Re: remove previous graphic

derekswingley1 — Fri, 11 May 2012 15:35:15 GMT

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.