Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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">
            <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>
share|improve this question

3 Answers 3

up vote 4 down vote accepted

Hey Mike! Add this line to your addToMap function:

map.graphics.clear();

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
share|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) {
         map.graphics.remove(graphic);
      }

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

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

share|improve this answer
    
Thanks Steve, that's good advice. –  Mike Long Jan 17 '11 at 11:21

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

Esri Forum Post

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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