How do clear all graphics on map with a button click?

ChrisSergent · ‎11-17-2014

I have an image button that I want to use so I can clear all graphics from a map. I thought it might be map.on, but I am not sure what I should write. Here is my code where I tried to clear the graphics from the map on a button click.

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#HomeButton

{

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#LocateButton

{

position: absolute;

top: 140px;

left: 20px;

z-index: 50;

}

#clearGraphicsBtn

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:Gray;

border-radius:5px;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/tasks/GeometryService",

"dojo/dom",

"dojo/on",

"dojo/parser",

"esri/geometry/Extent",

"dojo/domReady!"], function (Map, esriConfig, HomeButton,

LocateButton, ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,

GeometryService, dom, on, parser, Extent

) {

// set custom extent

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(operationalLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add geolocate button to find the location of the current user

geoLocate = new LocateButton({

map: map,

highlightLocation: true

}, "LocateButton");

geoLocate.startup();

},

// Clear all graphics from map

function clearGraphics() {

map.graphics.clear();

}

);

</script>

</head>

</div>

</body>

</html>

DerekLoi · ‎11-17-2014

Hi Chris,

try this... I left an alert in the function to see if it fires when you click the clear map button... this should work for you...

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#HomeButton

{

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#LocateButton

{

position: absolute;

top: 140px;

left: 20px;

z-index: 50;

}

#clearGraphicsBtn

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:Gray;

border-radius:5px;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/tasks/GeometryService",

"dojo/dom",

"dojo/on",

"dojo/parser",

"esri/geometry/Extent",

"dojo/domReady!"], function (Map, esriConfig, HomeButton,

LocateButton, ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,

GeometryService, dom, on, parser, Extent

) {

// set custom extent

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(operationalLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add geolocate button to find the location of the current user

geoLocate = new LocateButton({

map: map,

highlightLocation: true

}, "LocateButton");

geoLocate.startup();

}

);

// Clear all graphics from map

function clearGraphics() {

alert('clear map');

map.graphics.clear();

}

</script>

</head>

</div>

</body>

</html>

View solution in original post

DerekLoi · ‎11-17-2014

Hi Chris,

try this... I left an alert in the function to see if it fires when you click the clear map button... this should work for you...

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#HomeButton

{

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#LocateButton

{

position: absolute;

top: 140px;

left: 20px;

z-index: 50;

}

#clearGraphicsBtn

{

height:20px;

width:20px;

position:absolute;

top:200px;

left:20px;

z-index:50;

padding:5px 6px 5px 6px;

background-color:Gray;

border-radius:5px;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/tasks/GeometryService",

"dojo/dom",

"dojo/on",

"dojo/parser",

"esri/geometry/Extent",

"dojo/domReady!"], function (Map, esriConfig, HomeButton,

LocateButton, ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,

GeometryService, dom, on, parser, Extent

) {

// set custom extent

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(operationalLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add geolocate button to find the location of the current user

geoLocate = new LocateButton({

map: map,

highlightLocation: true

}, "LocateButton");

geoLocate.startup();

}

);

// Clear all graphics from map

function clearGraphics() {

alert('clear map');

map.graphics.clear();

}

</script>

</head>

</div>

</body>

</html>

ChrisSergent · ‎11-17-2014

The alert does not work. I get this in the debugger: Uncaught ReferenceError: clearGraphics is not defined

DerekLoi · ‎11-17-2014

I copied the code I posted above (thought i missed a line or something) but it runs fine in both IE 11 and Chrome.

What debugger are you using?

ChrisSergent · ‎11-17-2014

Okay I copied your code and ran it and it works.

RobertScheitlin__GISP · ‎11-17-2014

Chris,

If you are wanting to keep the buttons function inside the AMD scope then you need to add the click event in code and not declaration.

<!DOCTYPE html>
<html>

<head>
  <title>Decatur GIS Template</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
    #LocateButton {
      position: absolute;
      top: 140px;
      left: 20px;
      z-index: 50;
    }
    #clearGraphicsBtn {
      height: 20px;
      width: 20px;
      position: absolute;
      top: 200px;
      left: 20px;
      z-index: 50;
      padding: 5px 6px 5px 6px;
      background-color: Gray;
      border-radius: 5px;
    }
  </style>

  <script src="http://js.arcgis.com/3.11/"></script>

  <script>
    var map;
    require(["esri/map", "esri/config",
              "esri/dijit/HomeButton",
              "esri/dijit/LocateButton",
              "esri/layers/ArcGISTiledMapServiceLayer",
              "esri/layers/ArcGISDynamicMapServiceLayer",
              "esri/tasks/GeometryService",
              "dojo/dom",
              "dojo/on",
              "dojo/parser",
              "esri/geometry/Extent",
              "dojo/domReady!"
            ], function (Map, esriConfig, HomeButton,
      LocateButton, ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
      GeometryService, dom, on, parser, Extent
    ) {

      // set custom extent
      var initialExtent = new Extent({
        "xmin": 777229.03,
        "ymin": 1133467.92,
        "xmax": 848340.14,
        "ymax": 1185634.58,
        "spatialReference": {
          "wkid": 3435
        }
      });

      map = new Map("mapDiv", {
        showAttribution: false,
        sliderStyle: "small",
        extent: initialExtent
      });

      // add imagery
      var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
      map.addLayer(tiled);

      // add operational layer
      var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", {
        "opacity": 0.5
      });
      map.addLayer(operationalLayer);

      // declare geometry service
      esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

      // add home button to get full extent
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      // add geolocate button to find the location of the current user
      geoLocate = new LocateButton({
        map: map,
        highlightLocation: true
      }, "LocateButton");
      geoLocate.startup();
      
      // Clear all graphics from map
      on(dom.byId("clearGraphicsBtn"), "click", function(evt){
        alert('clear map');
        map.graphics.clear();
      });

    });
  </script>

</head>

<body class="soria">
  <div id="mapDiv">
    <div id="HomeButton"></div>
    <div id="LocateButton"></div>
    <div id="ClearGraphicsButton">
      <input type="image" id="clearGraphicsBtn" src="images/nav_decline.png" alt="Clear Graphics" title="Clear Graphics" />
    </div>
  </div>
</body>

</html>

ChrisSergent · ‎11-17-2014

That works too. Is there an advantage in placing it within the AMD scope? Does evt serve a purpose for this code block?

RobertScheitlin__GISP · ‎11-17-2014

Chris,

The evt object does not serve a purpose in this implementation. Yes keeping everything in the same scope has some big advantages. Say map was not defined globally, then the way the code was originally you would receive an error because map would be undefined in the scope of the clearGraphicsBtn click function or say you wanted to do something with the geoLocate dijit you could not because it is not inside the click events scope the way the code was originally.

JohnRitsko · ‎09-17-2015

Robert and all,

I am curious on why I'm having an issue with my LocateButton. The code works fine when I initially load the application and click on the LocateButton (It zooms in and shows the graphic). I then have a HOME button that I created myself that does multiple tasks one of which is the maps.graphics.clear();

Problem: If user clicks on the Home Button before anything then the LocateButton it works fine and zooms in and shows the graphic. Say right after this the user clicks on the Home Button and then clicks on the LocateButton it will zoom in but will have no graphic. Also, user starts application, clicks on the LocateButton, then the home button, then the LocateButton again it will zoom in but the graphic goes away.

Seems as though once I click the LocateButton and the graphic is created, it will not show the graphic again but it will zoom to the correct position. Dang Graphic hiding on me.

As a note when I use my Geocoder it creates two map graphics, one for the point and one for the TextSymbol that I use which are added as map.graphics.add();

Thoughts?

RobertScheitlin__GISP · ‎09-17-2015

John,

The issue is that the locate widget uses the maps.graphics layer instead of creating it's own Graphics Layer. So when you do maps.graphics.clear(); you are removing the graphic that the locate is trying to use. You can fix this in either two ways.

Have you code in your home button create and add it's own specific GraphicsLayer (this is my recommended option, as I think all widgets should create their own GL and NOT use the map.graphics layer).
Or fix the MyLocate widget by adding a GL for it use instead of the map.grapics.