topic Re: toolbars.Draw: Clear last point when a new point is clicked. in ArcGIS JavaScript Maps SDK Questions

toolbars.Draw: Clear last point when a new point is clicked.

MikeLong — Fri, 14 Jan 2011 14:20:51 GMT

I am creating a map that will provide coordinates when a point is clicked on the map. I want to have a graphic provided on the clicked location so I am going to using the drawing functionality as well. Where I am stuck so far is how do I clear the last point when a new point is clicked?

I have pasted my code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>
    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");


      var map, toolbar, symbol, geomTask;
      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159.665358918,"ymin":-1138850.8106919006,"xmax":8277212.918942982,"ymax":9858297.322750043,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
        dojo.connect(map, "onLoad", createToolbar);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);
      }

      function createToolbar(map) {
        toolbar = new esri.toolbars.Draw(map);
        //set drawing mode to extent
        toolbar.activate(esri.toolbars.Draw.POINT);
        dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
      //toolbar.deactivate();
      map.showZoomSlider();
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));
            
        }
        
        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    
      
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
</div>
  </body>
</html>

Re: toolbars.Draw: Clear last point when a new point is clicked.

Kathleen_Crombez — Fri, 14 Jan 2011 18:52:02 GMT

add the following line to the top of your addToMap function:

map.graphics.clear();

function addToMap(geometry) {
      map.graphics.clear();
      //toolbar.deactivate();
      map.showZoomSlider();
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));
      }
      var graphic = new esri.Graphic(geometry, symbol);
      map.graphics.add(graphic);
}

Re: toolbars.Draw: Clear last point when a new point is clicked.

MikeLong — Fri, 14 Jan 2011 19:04:26 GMT

Thanks Kathleen, that was it. 🙂

I had actually tried that but just added it to the wrong place. 😮

Re: toolbars.Draw: Clear last point when a new point is clicked.

MarkHoover — Tue, 18 Jan 2011 19:34:35 GMT

Of course, if there are other graphics on the map you do not want cleared (i.e., you only want the coordinate point graphics cleared) this will not work. You could have a separate graphics layer that only holds the coordinate point graphics and clear out all of the graphics in it before adding the new point.

Re: toolbars.Draw: Clear last point when a new point is clicked.

HemingZhu — Sun, 12 Dec 2021 00:50:44 GMT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>
    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");


      var map, toolbar, symbol, geomTask;
      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159.665358918,"ymin":-1138850.8106919006,"xmax":8277212.918942982,"ymax":9858297.322750043,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
        dojo.connect(map, "onLoad", createToolbar);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);
      }

      function createToolbar(map) {
        toolbar = new esri.toolbars.Draw(map);
        //set drawing mode to extent
        toolbar.activate(esri.toolbars.Draw.POINT);
        dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
      //toolbar.deactivate();
      map.showZoomSlider();
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));
            
        }
        
        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    
      
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
</div>
  </body>
</html>

add a line map.graphics.clear(); in your function like this:
function addToMap(geometry) {
      //toolbar.deactivate();
      map.showZoomSlider();
      map.graphics.clear();
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));

        }

        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
      }

OR: set the point graphic as globle variable and add map.graphics.remove(graphic) in your function:
function addToMap(geometry) {
      //toolbar.deactivate();
      map.showZoomSlider();
      map.graphics.remove(graphic);
       switch (geometry.type) {
          case "point":
            var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([0,255,0,1]));

        }

        graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);
      }