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

ChrisSergent · ‎11-14-2014

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>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#search

{

display:block;

position:absolute;

z-index:3;

top:20px;

left:75px;

}

</style>

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>

</html>

SteveCole · ‎11-14-2014

Rather than the Geocode dijit, you could remove the graphic when the infoWindow is hidden:

                      map.infoWindow.on("hide", function () {
                        map.graphics.clear();
                      });

View solution in original post

SteveCole · ‎11-14-2014

Rather than the Geocode dijit, you could remove the graphic when the infoWindow is hidden:

                      map.infoWindow.on("hide", function () {
                        map.graphics.clear();
                      });

RobertScheitlin__GISP · ‎11-14-2014

Chris,

Steves answer is correct. Here is the edited code with the clear event on the geocoder doing the same thing (hiding the map info window and clearing the maps graphics.

<!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);
        geocoder.on("clear", function(){
          map.infoWindow.hide();
          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);
          map.infoWindow.on('hide', function(){
            map.graphics.clear();
          });
        }
// 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>