AnsweredAssumed Answered

How do I clear graphics after I close the balloon in the geocoding widget?

Question asked by csergent08 Champion on Nov 14, 2014
Latest reply on Nov 14, 2014 by rscheitlin

When I search for an address, balloon appears to display that address. I would like the graphics to clear when I close the balloon. Below is the code with part of it commented out on how I thought I was supposed to do it. What do I need to change?

 

<!DOCTYPE html>

<html>

    <head>

        <title>Geocoder 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%;

            }

           

            #search

            {

                display:block;

                position:absolute;

                z-index:3;

                top:20px;

                left:75px;

            }

        </style>

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

        <script>

            var map;

            require(["esri/map",

                     "esri/dijit/Geocoder",

                     "esri/graphic",

                     "esri/symbols/SimpleMarkerSymbol",

                     "esri/geometry/screenUtils",

                     "esri/geometry/Extent",

                     "esri/layers/ArcGISDynamicMapServiceLayer",

                     "esri/layers/ArcGISTiledMapServiceLayer",

                     "dojo/dom",

                     "dojo/dom-construct",

                     "dojo/on",

                     "dojo/parser",

                     "dojo/query",

                     "dojo/_base/Color",

                     "dojo/domReady!"], function (Map, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, dom, domConstruct, on, parser, query, Color

            ) {

                         // declare initial map extent with spatial reference

                         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

                         });

 

 

                         // begin geocoder

                         var geocoder = new Geocoder({

                            arcgisGeocoder:false,

                            geocoders: [{

                            url:"http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

                            name: "Web Address Locator",

                            placeholder: "Find address",

                            outFields:"*"

                            }],

                            map:map,

                            autoComplete:true,

                            }, dom.byId("search"));

                            geocoder.startup();

 

 

                        geocoder.on("select",showLocation);

 

 

//                        dojo.disconnect(Geocoder,'onClear',function(){

//                            removeGraphics();

//                            });

 

 

//                       function removeGraphics() {

//                        map.graphics.clear();

//                        }

 

 

                        function showLocation(evt) {

                           map.graphics.clear();

                           var point = evt.result.feature.geometry;

                           var symbol = new SimpleMarkerSymbol()

                                .setStyle("square")

                                .setColor([255,0,0,0.5]);

                           var graphic = new Graphic(point, symbol);

                           map.graphics.add(graphic);

 

 

                           map.infoWindow.setTitle("Search Result");

                           map.infoWindow.setContent(evt.result.name);

                           map.infoWindow.show(evt.result.feature.geometry);

                        }

                        // end geocoder

                       

                         // add imagery

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

                         map.addLayer(tiled);

                         // set operational layers

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

                         // add operational layers

                         map.addLayer(operationalLayer);

 

 

 

 

                     }

            );

 

 

           

 

 

        </script>

    </head>

    <body class="soria">

        <div id="search"></div>

        <div id="mapDiv"></div>

    </body>

</html>

Outcomes