How to remove all graphics from only one function at a time

[AlexGole]

Hi all,

I am trying to figure out how to remove graphics from only one function at a time. I have two sets of graphics: the one for drawing polygons and the one to add marker to map when coordinates are added. I always use:

 map.graphics.clear();

but it clears ALL the graphs from both functions. Is there a way to keep them separated?

My map is here.

function coordinates() {
                         console.log("Coordinates");
                         var lat = document.getElementById("sel_lat").value;
                         var longitude = document.getElementById("sel_long").value;
                         var mp = new Point(longitude, lat);
                         var graphic = new Graphic(mp, symbol);
                         map.graphics.add(graphic);
                         map.centerAndZoom(mp, 9);


                     }


                     function clear() {
                         console.log("Clearing")
                         map.graphics.clear();
                     }


                     //Button to select features and deactivate select toolbar


                     on(dom.byId("polygon"), "click", function () {
                         activateTool(this.id);
                     });


                     on(dom.byId("freehandpolygon"), "click", function () {
                         activateTool(this.id);
                     });


                     on(dom.byId("stop"), "click", function () {
                         map.graphics.clear();
                         selectionToolbar.deactivate();
                     });


                     //Initiate Select Draw tool on map load dojo.connect


                     dojo.connect(map, "onLoad", function () {

                         selectionToolbar = new Draw(map);
                         selectionToolbar.on("draw-end", function (e) {
                             selectionToolbar.deactivate();


                             var symbol3 = new SimpleFillSymbol(
                                "solid",
                                "solid",
                                new SimpleLineSymbol("dash", new Color([255, 0, 0]), 2),
                                new Color([255, 255, 0, 0.25])
                             );


                             var graphic = new Graphic(e.geometry, symbol3);
                             map.graphics.add(graphic);
                         });




                     });


                     function activateTool(tool) {
                         map.graphics.clear();
                         // The draw.activate expects a string like "polygon" or "freehand_polygon".
                         selectionToolbar.activate(tool);
                     }

Thank you,

Alex

[RobertScheitlin__GISP · Accepted solution]

Alex,

   You are adding graphics to the maps default map.graphics if you instead create a graphics layer for your coordinates and your draw then you can clear them individually .

[AlexGole]

Robert,

At the moment you answered, I found this thread : how to clear just one of multiple graphics layers?

I am going to dig in Graphic Layer a little to see how it works.

Thanks,

Alex

[RobertScheitlin__GISP]

Alex,

  Just add a separate GraphicsLayer to the map for your tools:

CoordResultsLayer = new GraphicsLayer();
StoresResultsLayer.id = 'CoordResults';  
map.addLayer(CoordResultsLayer,0);

[AlexGole]

Sorry to get back to you so soon but I am not succeeding here. I am still unclear on how to push graphics to graphic layer. Here is what I have so far:

var gLayer = new GraphicsLayer();
                     gLayer.id = 'layer1';
                     map.addLayer(gLayer);


                     gLayer = new GraphicsLayer();
                     gLayer.id = 'layer2';
                     map.addLayer(gLayer);




                     function coordinates(layer1) {
                         console.log("Coordinates");
                         var lat = document.getElementById("sel_lat").value;
                         var longitude = document.getElementById("sel_long").value;
                         var mp = new Point(longitude, lat);
                         AddGraphictoLayer(mp, map.getLayer(layer1), symbol)
                         map.centerAndZoom(mp, 9);


                     }

Thank you for your help!

Alex

[RobertScheitlin__GISP]

Alex,

  like this:

map.getLayer('layer1').add(graphic);

If you look though the code and try to track logically what it is doing you will find that the "AddGraphictoLayer" was a custom function in one of the code snippets in that other post and is not a api function.

[AlexGole]

First of all thank you for your help Robert!

I cannot figure out why my graphics are not added to my map. I have no errors showing up, I push the graphs to the Graphic Layer, and then create an id, and finally add to the map as such:

var gLayer = new GraphicsLayer();
                     var graph;
                     gLayer.id = 'layer1';
                     map.addLayer(gLayer);




                     function coordinates() {
                         console.log("got here")
                         var lat = document.getElementById("sel_lat").value  
                         var long = document.getElementById("sel_long").value  
                         var mp = new Point(long, lat);
                         graph = new Graphic(mp, symbol);
                         gLayer.add(graph);
                         map.centerAndZoom(mp, 9);


                     }

It is located line 630 of my script.

What am I missing here?

Thank you,

Alex

[RobertScheitlin__GISP]

Alex,

  I have done some minor cleanup in your code and commented my changes to get the Coordinates and the draw to use their own GraphicsLayer.

[AlexGole]

Robert,

I am reviewing the code and taking good not of how you managed to make it work.It works great and your logic makes total sense to me.

Thank you for your patience.

Alex