Esri Javascript API Graphics Removal

Question

Hey Guys new to ESRI and the javascript api. I have the following function that when you click on the map adds a circle graphic to the map at that locations geographic lat and Long. But what im tyring to accomplish is that when you click on the map it adds the circle and when you click on the map again it updates the circle's locations. Any help would be great.

        function update_circle(first, second) {
            //add circle to map for current locaiotn
            var gl = new GraphicsLayer();
            var p = new Point(first, second);
            var s = new SimpleMarkerSymbol().setSize(60);
            var g = new Graphic(p, s);
            map.removeLayer(gl);
            gl.add(g);
            map.addLayer(gl);
        }

Answer 1

You are creating a new empty graphics layer gl but when you then call map.removeLayer(gl) it won't do anything as that new empty layer hasn't been added to the map yet. I'm guessing you wanted to remove the graphics layer previously created. You could do this giving the graphics layer a specific id when you create it, and then retrieving that existing layer from the map's layers collection. For example, create the graphics layer like this:

var gl = new GraphicsLayer({ id: "circles" });

Now you can then later retrieve a reference to that layer by using:

var gl = map.getLayer("circles");

You could therefore use the above in your update_circle function to retrieve and remove the old graphics layer which should work. However, another option, rather than removing and recreating a layer each time, would be to just remove the old graphic from the layer and add a new one, leaving the same layer in use:

    function update_circle(first, second) {

        // Get the layer, create it if it doesn't yet exist
        var gl = map.getLayer("circles");
        if (!gl) {
            gl = new GraphicsLayer({ id: "circles" });
            map.addLayer(gl);
        }

        // Clear the layer of old graphics
        gl.clear();

        //add circle to map for current locaiotn
        var p = new Point(first, second);
        var s = new SimpleMarkerSymbol().setSize(60);
        var g = new Graphic(p, s);
        gl.add(g);

    }

You can even remove just a single graphic rather than clearing the whole layer if you wanted to use the layer for multiple graphics (i.e. you could just remove the circle graphic). See the API for help:

https://developers.arcgis.com/javascript/jsapi/graphicslayer-amd.html