Javascript for geocoding the address and buffer around it.

ManjariGoyal · ‎10-29-2014

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" />

      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>

        <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

RobertScheitlin__GISP · ‎10-29-2014

Hi Manjari,

Just to add to Jake's correct answer the geocode service from arcgis.com also returns 100% matches for just the street name and the city being correctly matched so to further refine the geocode results you can filter then by candidate.attributes.AddNum.

This would ignore the 100% matches of just:

Sprint Pky, Overland Park, Kansas, 66251
Sprint Pky, Overland Park, Kansas, 66211
Overland Park, Kansas

Here is an example:

        geocode.then(function (results) {
          console.log("got results: ", results);
          // add the results to the map
          dojo.forEach(results, function (r) {
            if(r.score >= 90 && r.attributes.AddNum !== ""){
              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);
        });

View solution in original post

JakeSkinner · ‎10-29-2014

Hi Manjari,

This is occurring because there is more than one address returned when you perform the geocode. You can limit this to the first result if the matching score is high enough. For example, try the following:

geocode.then(function(results) {
    var candidate = results[0];
    if(candidate.score > 90){
        map.graphics.add(new esri.Graphic(
          candidate.location, new esri.symbol.SimpleMarkerSymbol(), candidate.attributes
        ));
    }
    bufferLocation(candidate);
  }, function(error) {
    console.log("geocode failed: ", error);
  });

ManjariGoyal · ‎10-29-2014

Thanks Jake for the help.

RobertScheitlin__GISP · ‎10-29-2014

Hi Manjari,

Just to add to Jake's correct answer the geocode service from arcgis.com also returns 100% matches for just the street name and the city being correctly matched so to further refine the geocode results you can filter then by candidate.attributes.AddNum.

This would ignore the 100% matches of just:

Sprint Pky, Overland Park, Kansas, 66251
Sprint Pky, Overland Park, Kansas, 66211
Overland Park, Kansas

Here is an example:

        geocode.then(function (results) {
          console.log("got results: ", results);
          // add the results to the map
          dojo.forEach(results, function (r) {
            if(r.score >= 90 && r.attributes.AddNum !== ""){
              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);
        });

ManjariGoyal · ‎10-29-2014

Thanks Robert for ur help

RobertScheitlin__GISP · ‎10-29-2014

Manjari,

Also I would really recommend that you move away from the Legacy coding style and switch to AMD.

Here is your app using 3.11 and AMD.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples   
      on iOS devices-->  
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  <title>Find Address</title>
  
  <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">
  <script src="http://js.arcgis.com/3.11/"></script>

  <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;
      height: 100%;
      width: 100%;
    }
    #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 map, locator;
    require([
      "esri/map",
      "esri/tasks/locator",
      "esri/arcgis/utils",
      "dojo/parser",
      "esri/tasks/BufferParameters",
      "esri/tasks/GeometryService",
      "dijit/registry",
      "dojo/on",
      "dijit/form/Button",
      "dijit/layout/BorderContainer",  
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map,
      Locator,
      arcgisUtils,
      parser,
      BufferParameters,
      GeometryService,
      registry,
      on,
      Button,
      BorderContainer,
      ContentPane
     ){
        parser.parse();

        //create map
        arcgisUtils.createMap("7a7a9694c9b241aba171fa11fc9b0448", "map", {mapOptions: {slider: false}}).then(function(response){
          map = response.map;
          
          locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

          function bufferLocation(place) {
            var bufferParams = new 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 GeometryService("http://gislap183:6080/arcgis/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);
            });
          }

          registry.byId("locate").on("click",  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) {
                if(r.score >= 90 && r.attributes.AddNum !== ""){
                  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);
            });
          });
        });
    });
  </script>
</head>

<body class="claro">
  <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 id="locate" data-dojo-type="dijit/form/Button" type="button">Locate</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>