Community

How to Clear Graphic from layer

1025
2
Jump to solution
05-13-2022 02:07 AM
SaihaniIdaffieSaidin
by
New Contributor II
‎05-13-2022 02:07 AM

Hi kindly please help,

I am new to the ArcGis, I have added a button to clear graphic, but fail to do so.

I have tried using

map.graphics.removeAll(); or graphicsLayer.removeAll();
 
but still fail to do so. below is the code
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
      #controls {
        background: #fff;
        box-shadow: 0 6px 6px -6px #999;
        color: #444;
        font-family: sans-serif;
        height: auto;
        left: 1em;
        padding: 1em;
        position: absolute;
        top: 1em;
        width: auto;
        z-index: 40;
      }
      #controls div {
        padding: 0 0 1em 0;
      }
    </style>

    <script src="https://js.arcgis.com/3.40/"></script>
    <script>
      var map;
   
      require([
        "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
        "esri/graphic", "esri/layers/GraphicsLayer",
        "dojo/dom", "dojo/on", "dojo/dom-attr", "dojo/domReady!"
      ], function(
        Map, Circle, SimpleFillSymbol,
        Graphic, GraphicsLayer, on,
        dom, domAttr
      ) {

       //Setup button click handlers
       on(dom.byId("clearGraphics"), "click", function(){
          if(map){
            // map.graphics.removeAll();
            graphicsLayer.removeAll();
          }
        });

        map = new Map("map", {
          basemap: "topo-vector",
          center: [-120.741, 56.39],
          slider: false,
          zoom: 5
        });
        var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
        var gl = new GraphicsLayer({ id: "circles" });
        var geodesic = dom.byId("geodesic");
        map.addLayer(gl);
        map.on("click", function(e) {
          var radius = map.extent.getWidth() / 10;
          var circle = new Circle({
            center: e.mapPoint,
            geodesic: domAttr.get(geodesic, "checked"),
            radius: radius
          });
          var graphic = new Graphic(circle, symbol);
          gl.add(graphic);
        });
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="controls">
      <div>Click the map.</div>
      <input type="checkbox" id="geodesic">
      <label for="geodesic">Geodesic?</label><br />
      <button type="button" id="clearGraphics">Clear Graphics</button>
    </div>
  </body>
</html>
 
any advise.
 
Thank you and regards

 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
JeffreyWilkerson
by
Occasional Contributor III
‎05-13-2022 08:02 AM

You have the Dojo 'On' and 'Dom' calls in your require backwards.  In your 'on click' function you call a non-existent graphics layer as you called it 'gl' at the root. And for a 3X library you should be using 'clear()' instead of 'removeAll()' which is from the 4x library.  I would recommend you move all of this to the 4x library as it is easily done there as well.  This works:

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }

            #controls div {
                padding: 0 0 1em 0;
            }
    </style>

    <script src="https://js.arcgis.com/3.40/"></script>

    <script>
        var map;

        require([
            "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
            "esri/graphic", "esri/layers/GraphicsLayer",
            "dojo/dom", "dojo/on", "dojo/dom-attr", "dojo/domReady!"
        ], function (
            Map, Circle, SimpleFillSymbol,
            Graphic, GraphicsLayer, dom, on, domAttr
        ) {

            //Setup button click handlers
            on(dom.byId("clearGraphics"), "click", function () {
                if (map) {
                    // map.graphics.removeAll();
                    gl.clear(); //removeAll();
                }
            });

            map = new Map("map", {
                basemap: "topo-vector",
                center: [-120.741, 56.39],
                slider: false,
                zoom: 5
            });
            var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
            var gl = new GraphicsLayer({ id: "circles" });
            var geodesic = dom.byId("geodesic");
            map.addLayer(gl);
            map.on("click", function (e) {
                var radius = map.extent.getWidth() / 10;
                var circle = new Circle({
                    center: e.mapPoint,
                    geodesic: domAttr.get(geodesic, "checked"),
                    radius: radius
                });
                var graphic = new Graphic(circle, symbol);
                gl.add(graphic);
            });
        });
    </script>
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <div>Click the map.</div>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label><br />
        <button type="button" id="clearGraphics">Clear Graphics</button>
    </div>
</body>
</html>

 

View solution in original post

2 Replies
JeffreyWilkerson
by
Occasional Contributor III
‎05-13-2022 08:02 AM

You have the Dojo 'On' and 'Dom' calls in your require backwards.  In your 'on click' function you call a non-existent graphics layer as you called it 'gl' at the root. And for a 3X library you should be using 'clear()' instead of 'removeAll()' which is from the 4x library.  I would recommend you move all of this to the 4x library as it is easily done there as well.  This works:

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }

            #controls div {
                padding: 0 0 1em 0;
            }
    </style>

    <script src="https://js.arcgis.com/3.40/"></script>

    <script>
        var map;

        require([
            "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
            "esri/graphic", "esri/layers/GraphicsLayer",
            "dojo/dom", "dojo/on", "dojo/dom-attr", "dojo/domReady!"
        ], function (
            Map, Circle, SimpleFillSymbol,
            Graphic, GraphicsLayer, dom, on, domAttr
        ) {

            //Setup button click handlers
            on(dom.byId("clearGraphics"), "click", function () {
                if (map) {
                    // map.graphics.removeAll();
                    gl.clear(); //removeAll();
                }
            });

            map = new Map("map", {
                basemap: "topo-vector",
                center: [-120.741, 56.39],
                slider: false,
                zoom: 5
            });
            var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
            var gl = new GraphicsLayer({ id: "circles" });
            var geodesic = dom.byId("geodesic");
            map.addLayer(gl);
            map.on("click", function (e) {
                var radius = map.extent.getWidth() / 10;
                var circle = new Circle({
                    center: e.mapPoint,
                    geodesic: domAttr.get(geodesic, "checked"),
                    radius: radius
                });
                var graphic = new Graphic(circle, symbol);
                gl.add(graphic);
            });
        });
    </script>
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <div>Click the map.</div>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label><br />
        <button type="button" id="clearGraphics">Clear Graphics</button>
    </div>
</body>
</html>

 

SaihaniIdaffieSaidin
by
New Contributor II
‎05-17-2022 08:08 PM

thank you very much Sir, for your advise,

I will look into 4x library for my code.

0 Kudos