AnsweredAssumed Answered

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

Question asked by csergent08 Champion on Nov 17, 2014
Latest reply on Sep 17, 2015 by thejohnny

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>

        <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

                    function clearGraphics() {

                        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" onclick="clearGraphics()" alt="Clear Graphics" title="Clear Graphics" />

            </div>

        </div>

    </body>

</html>

Outcomes