How can i add and remove the dynamic marker on esri map javascript api?

Question

How can I add and remove the dynamic marker on esri map using the javascript api? When I add the marker in the graphics layer, it's added but how can I remove it and add the new marker by another latitude longitude?

This is my code so far;

require(
    ["esri/map",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/ProjectParameters",
    "esri/tasks/GeometryService",
    "dojo/dom",
    "dojo/on",
    "esri/dijit/HomeButton",
    "dojo/domReady!"
    ],
    function setupmap(Map, Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService, dom, on, HomeButton) {
        var map = new Map("map-container", {
            center: [83.0179802, 25.32327],
            zoom: 13,
            basemap: "streets"
        });
        map.graphics.clear();
        map.on("load", function (evt) {
        var home = new HomeButton({map: map}, "HomeButton");
        home.startup();
        picSymbol = new PictureMarkerSymbol(iconType, 20, 20);
        $.each(detailsJSON, function (location, lstNodes) {
            var locArr = location.split("--");
            var latitude=locArr[0];
            var longitude=locArr[1];
            var geometryPoint = new Point(longitude, latitude,new SpatialReference(4326));
            map.graphics.add(new Graphic(geometryPoint, picSymbol));
        });
        });
    }
);

Answer 1

You can store a reference to the Graphic object you're adding and later remove it using the remove(graphic) method.

let graphic = new Graphic(geometryPoint, picSymbol);
map.graphics.add(graphic);
...
map.graphics.remove(graphic);

You can also remove all graphics from the layer using method removeAll() .

See the arcgis-js-api reference for further info.

To make your component more stateless you can use the attributes collection of the Graphic to store a tag (or an Id or similar) and remove the item based on this value.

When adding;

let graphic = new Graphic(geometryPoint, picSymbol);
graphic.attributes = { "tag": "toBeRemovedLater" };
map.graphics.add(graphic);

When removing;

angular.forEach(map.graphics.graphics, (graphic: any) => {
   if (graphic.attributes && graphic.attributes.tag == "toBeRemovedLater")
       map.graphics.remove(graphic);
   });

Answer 2

You can use Sketch Widget that simplifies the process of adding and updating graphics.

const sketch = new Sketch({ availableCreateTools: ['point'], layer: graphicsLayer, view, }); view.ui.add(sketch, 'top-right');