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 posted my code below.

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
                <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;
                <script type="text/javascript">
                  djConfig = {
                    parseOnLoad: true
                <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
                <script type="text/javascript">
                  dojo.require("dijit.dijit"); // optimize: load dijit layer

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

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

                  function addToMap(geometry) {
                   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);

              <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">

Hey Mike! Add this line to your addToMap function:


If that's too heavy handed, there are a couple of other options:

  • use a new graphics layer specifically for your click point and use glayer.graphics.clear() each time there's a new click
  • keep a reference to your graphic and just update the geometry when someone clicks a new point
| improve this answer | |
  • Thanks Derek! That solved it. I will have to play with your other ideas. – Mike Long Jan 16 '11 at 13:10

you really should get in the habbit of @Swingley's sencond bullet of keeping a reference to your graphic and clearing it that way or else when you start having more than one graphic on your page you'll be back looking for answers to how to remove only the one you want.

I would suggest making these changes to your code:

var graphic = null;
 function addToMap(geometry) {
      if(grapic) {

      switch (geometry.type) {
          case "point":
            var symbol = new ...      
                graphic = new esri.Graphic(geometry, symbol);

make graphic a global and assign it when you create it. Check to see if it's truthy and remove it if it is.

| improve this answer | |

I also received an answer from the ESRI Forums as well. Link below.

Esri Forum Post

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.