AnsweredAssumed Answered

Javascript for geocoding the address and buffer around it.

Question asked by manjarigoyal on Oct 29, 2014
Latest reply on Oct 29, 2014 by rscheitlin

Hi,

 

I have a script which geocode an address and buffer that address by 1, 5 and 10 mile radius. The problem I am having is that the address on the map shows 4 different points.not sure what's causing it. I am attaching a screen shot of the output. Please let me know how to fix this issue.

 

 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Find Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        bottom: 30px;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 80px;
        left: 30px;
        margin: 5px;
        padding: 10px;
        width: 300px;
        z-index: 40;
      }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.Button");
      dojo.require("esri.arcgis.utils");
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");

      var map, locator;
      function init() {
        var webmapId = "1234567asdfg";

        //create map
        var mapDeferred = esri.arcgis.utils.createMap(webmapId, "map", {
          mapOptions: { slider: false }
        });

        locator = new esri.tasks.Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        dojo.connect(dijit.byId("locate"), "onClick", function() {
          map.graphics.clear();
          var address = dojo.byId("address").value;
          console.log("address: ", address);
          if ( ! address ) {
            alert("Please enter an address to geocode.");
            return;
          }
          locator.outSpatialReference = map.spatialReference;
          var geocode = locator.addressToLocations({
            address: { "SingleLine": address },
            outFields: ["*"]
          });

          geocode.then(function(results) {
            console.log("got results: ", results);
            // add the results to the map
            dojo.forEach(results, function(r) {
              map.graphics.add(new esri.Graphic(
                r.location, new esri.symbol.SimpleMarkerSymbol(), r.attributes
              ));
            });
            console.log("added graphics...now buffer the first one");
            bufferLocation(results[0]);
          }, function(error) {
            console.log("geocode failed: ", error);
          });
        });

        mapDeferred.addCallback(function (response) {
          map = response.map;
          dojo.connect(dijit.byId("map"), "resize", map, map.resize);
        });
      }

      function bufferLocation(place) {
        var bufferParams = new esri.tasks.BufferParameters();
        bufferParams.geometries = [ place.location ];
        bufferParams.distances = [ 1, 5, 10 ]; // miles
        bufferParams.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
bufferParams.outSpatialReference = map.spatialReference;

        var gs = new esri.tasks.GeometryService("http://networkgis.corp.sprint.com/networkags/rest/services/Utilities/Geometry/GeometryServer");
        var buffer = gs.buffer(bufferParams);
        buffer.then(function(buffers) {
          console.log("got buffers: ", buffers);
          dojo.forEach(buffers, function(b) {
            map.graphics.add(new esri.Graphic(
              b, new esri.symbol.SimpleFillSymbol()
            ));
          });
        }, function(error) {
          console.log("error doing buffer...", error);
        });
      }
      dojo.ready(init);
    </script>
  </head>

  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        <div id="feedback" class="shadow">
          <h3>Locate and buffer an address</h3>
          <div id="info">
            <input type="text" id="address" value="6360 Sprint Parkway Overland Park KS">
            <button dojotype="dijit.form.Button" id="locate">Locate</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

Thanks

Attachments

Outcomes