Search code examples
javascriptarcgisesriarcgis-js-api

Fetch geometry of an Address Location


If I were to search for a textual address (Let's say the address is "305 Quincy St NE"), how would I go about doing it in ArcGIS using the ArcGIS API for Javascript?

My aim is to call a function which has the geometry of a place passed as its function argument.

function showLocation(evt) {
    map.graphics.clear();
    var point = evt.result.feature.geometry; // how do I get this value from a textual address?
    .
    .
    .
}

Solution

  • Use the Locator class. Here's an example:

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Using Locator to Find Address</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
        <style>
          html, body, #map {
            height:100%;
            width:100%;
            margin:0;
            padding:0;
          }
          body {
            background-color:#FFF;
            overflow:hidden;
            font-family:"Trebuchet MS";
          }
          #search {
            display: block;
            position: absolute;
            z-index: 2;
            top: 20px;
            left: 75px;
          } 
        </style>
    
        <script src="https://js.arcgis.com/3.14/"></script>
        <script>
          var map;
          var locator;
          var symbol;
          var locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";
          require([
            "esri/map", "esri/tasks/locator", "esri/graphic",
            "esri/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
            "dijit/form/TextBox", "dijit/registry", "dojo/on", "dojo/parser",
            "dojo/keys",
            "dojo/domReady!"
          ], function(
            Map, Locator, Graphic,
            Color, SimpleMarkerSymbol, SimpleLineSymbol,
            TextBox, registry, on, parser,
            keys
          ) {
            map = new Map("map",{
              basemap: "topo",
              center: [-117.19, 34.05],
              zoom: 13
            });
    
            locator = new Locator(locatorUrl);
    
            symbol = new SimpleMarkerSymbol(
                SimpleMarkerSymbol.STYLE_CIRCLE,
                20,
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    Color.fromHex("#EEAA00"),
                    3),
                Color.fromHex("#002255")
            );        
    
            parser.parse();
            var box = registry.byId("textBox_address");
            on(box, "keypress", function (evt) {
                if (keys.ENTER == evt.keyCode) {
                    var addressText = box.get("value");
    
                    //This is the important part. Call Locator.addressToLocations.
                    locator.addressToLocations({
                        address: {
                            SingleLine: addressText
                        }
                    }, function (addresses) {
                        //Success
                        if (0 == addresses.length) {
                            alert("Address not found");
                        } else {
                            var address = addresses[0];
                            var pt = address.location;
                            map.graphics.clear();
                            map.graphics.add(new Graphic(pt, symbol));
                            map.centerAt(pt);
                        }
                    }, function (error) {
                        //Failure
                        alert("Error: " + error);
                    });
                }
            });
          });
        </script>
      </head>
      <body>
        <div id="search">
            <label for="firstname" style="background-color: white">Address:</label>
            <input type="text" name="textBox_address" value="808 Travis St, Houston TX"
                data-dojo-type="dijit/form/TextBox" id="textBox_address" />
        </div>
        <div id="map"></div>
      </body>
    </html>