Community

find sample Reverse geocode | ArcGIS API for JavaScriptfor 4.8

4428
17
Jump to solution
08-13-2018 08:45 PM
HsuKao-Ming
by
New Contributor II
‎08-13-2018 08:45 PM

Hey gutys:

I want to find sample Reverse geocode | ArcGIS API for JavaScriptfor 4.8  than search[ lon, lat]  to address(not click map to address).

but I didn't find this

So where can I go to find this

Ask for help

THANKS

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-15-2018 07:51 AM

Hsu,

   Your code:

var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));‍

was the way it was done in 3.x API. In the 4.x API you need to provide an object in the Point constructor that specifies the objects property names:

var pt = new Point({x: x, y: y, spatialReference: new SpatialReference({ wkid: 4326 })});‍

Here is an updated sample:

<!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>Find Address</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map {
        padding: 0;
        border: solid 2px #666;
        margin: 0 5px 5px 5px;
      }
      #header {
        border: solid 2px #666;
        color: #666;
        font-family: sans-serif;
        font-size: 1.1em;
        height: auto;
        margin: 5px;
        overflow: hidden;
        padding: 10px 0 10px 20px;
        text-align:left;
      }
      .roundedCorners {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    </style>

    <script src="https://js.arcgis.com/4.8/"></script>
    <script>
      var map;
      require([
        "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic",
        "esri/geometry/support/webMercatorUtils",
        "esri/PopupTemplate", "esri/geometry/SpatialReference", "esri/geometry/Point",
        "dojo/number", "dojo/parser", "dojo/dom", "dojo/on",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, MapView, Locator, Graphic,
        webMercatorUtils,
        PopupTemplate, SpatialReference, Point,
        number, parser, dom, on
      ) {
        parser.parse();

        map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "map",
          map: map,
          center: [-118.3, 34.2],
          zoom: 11
        });

        var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        var infoTemplate = new PopupTemplate({
          title: "Location",
          content: "Address: {Address}"
        });

        on(dom.byId('btnGo'), 'click', function(){
          var lon = dom.byId('Lon').value;
          var lat = dom.byId('Lat').value;
          var x = parseFloat(lon);
          var y = parseFloat(lat);
          var pt = new Point({
            x: x,
            y: y,
            spatialReference: new SpatialReference({ wkid: 4326 })
          });
          locator.locationToAddress(pt, 100).then(function(evt){
            if (evt.address) {
              var address = {Address: evt.address};
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              var graphic = new Graphic({
                geometry: location,
                symbol: {
                  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                  color: "blue",
                  size: 8,
                  outline: {  // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: "darkblue"
                  }
                },
                attributes: address,
                popupTemplate: infoTemplate
              });
              view.graphics.add(graphic);

              //display the info window with the address information
              view.popup.open({
                features: [graphic],
                location: location
              });
            }
          });
        });

        view.on("click", function(evt) {
          view.graphics.removeAll();
          console.info(webMercatorUtils.webMercatorToGeographic(evt.mapPoint));
          locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 100).then(function(evt){
            if (evt.address) {
              var address = {Address: evt.address};
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              var graphic = new Graphic({
                geometry: location,
                symbol: {
                  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                  color: "blue",
                  size: 8,
                  outline: {  // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: "darkblue"
                  }
                },
                attributes: address,
                popupTemplate: infoTemplate
              });
              view.graphics.add(graphic);

              //display the info window with the address information
              view.popup.open({
                features: [graphic],
                location: location
              });
            }
          });
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%; height:100%;">

      <div id="header" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        <span>Click the map to get the address for the input location.</span>
        <input type='text' id='Lat' value="34.250812723611325"></input>
        <input type='text' id='Lon' value='-118.51732330322035'></input>
        <button type="button" id='btnGo'>Locate</button>
      </div>
      <div id="map" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

17 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-14-2018 07:53 AM

Hsu,

  Here is the 3.x sample updated to 4.8:

<!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>Find Address</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map {
        padding: 0;
        border: solid 2px #666;
        margin: 0 5px 5px 5px;
      }
      #header {
        border: solid 2px #666;
        color: #666;
        font-family: sans-serif;
        font-size: 1.1em;
        height: auto;
        margin: 5px;
        overflow: hidden;
        padding: 10px 0 10px 20px;
        text-align:left;
      }
      .roundedCorners {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    </style>

    <script src="https://js.arcgis.com/4.8/"></script>
    <script>
      var map;
      require([
        "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic",
        "esri/geometry/support/webMercatorUtils",
        "esri/PopupTemplate",
        "dojo/number", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, MapView, Locator, Graphic,
        webMercatorUtils,
        PopupTemplate,
        number, parser
      ) {
        parser.parse();

        map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "map",
          map: map,
          center: [-118.3, 34.2],
          zoom: 11
        });

        var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        var infoTemplate = new PopupTemplate({
          title: "Location",
          content: "Address: {Address}"
        });

        view.on("click", function(evt) {
          view.graphics.removeAll();
          locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 100).then(function(evt){
            if (evt.address) {
              var address = {Address: evt.address};
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              var graphic = new Graphic({
                geometry: location,
                symbol: {
                  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                  color: "blue",
                  size: 8,
                  outline: {  // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: "darkblue"
                  }
                },
                attributes: address,
                popupTemplate: infoTemplate
              });
              view.graphics.add(graphic);

              //display the info window with the address information
              view.popup.open({
                features: [graphic],
                location: location
              });
            }
          });
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%; height:100%;">

      <div id="header" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        <span>Click the map to get the address for the input location.</span>
      </div>
      <div id="map" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

HsuKao-Ming
by
New Contributor II
‎08-14-2018 09:14 PM

Thanks

but I want "search[ lon, lat]  to address(not click map to address)"

this my code:

var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var x = parseFloat(lon);
var y = parseFloat(lat);
var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));

-------------------------------------------------------

got error this :

Uncaught TypeError: c.indexOf is not a function
at Object.m (dojo.js:315)
at Object.set (dojo.js:228)
at Object.postscript (dojo.js:227)
at new <anonymous> (dojo.js:237)
at Location.js?20161027:381
at K (dojo.js:18)
at dojo.js:19
at E (dojo.js:19)
at da (dojo.js:19)
at e (dojo.js:21)

How can I do this ?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-15-2018 07:51 AM

Hsu,

   Your code:

var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));‍

was the way it was done in 3.x API. In the 4.x API you need to provide an object in the Point constructor that specifies the objects property names:

var pt = new Point({x: x, y: y, spatialReference: new SpatialReference({ wkid: 4326 })});‍

Here is an updated sample:

<!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>Find Address</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map {
        padding: 0;
        border: solid 2px #666;
        margin: 0 5px 5px 5px;
      }
      #header {
        border: solid 2px #666;
        color: #666;
        font-family: sans-serif;
        font-size: 1.1em;
        height: auto;
        margin: 5px;
        overflow: hidden;
        padding: 10px 0 10px 20px;
        text-align:left;
      }
      .roundedCorners {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    </style>

    <script src="https://js.arcgis.com/4.8/"></script>
    <script>
      var map;
      require([
        "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic",
        "esri/geometry/support/webMercatorUtils",
        "esri/PopupTemplate", "esri/geometry/SpatialReference", "esri/geometry/Point",
        "dojo/number", "dojo/parser", "dojo/dom", "dojo/on",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, MapView, Locator, Graphic,
        webMercatorUtils,
        PopupTemplate, SpatialReference, Point,
        number, parser, dom, on
      ) {
        parser.parse();

        map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "map",
          map: map,
          center: [-118.3, 34.2],
          zoom: 11
        });

        var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        var infoTemplate = new PopupTemplate({
          title: "Location",
          content: "Address: {Address}"
        });

        on(dom.byId('btnGo'), 'click', function(){
          var lon = dom.byId('Lon').value;
          var lat = dom.byId('Lat').value;
          var x = parseFloat(lon);
          var y = parseFloat(lat);
          var pt = new Point({
            x: x,
            y: y,
            spatialReference: new SpatialReference({ wkid: 4326 })
          });
          locator.locationToAddress(pt, 100).then(function(evt){
            if (evt.address) {
              var address = {Address: evt.address};
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              var graphic = new Graphic({
                geometry: location,
                symbol: {
                  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                  color: "blue",
                  size: 8,
                  outline: {  // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: "darkblue"
                  }
                },
                attributes: address,
                popupTemplate: infoTemplate
              });
              view.graphics.add(graphic);

              //display the info window with the address information
              view.popup.open({
                features: [graphic],
                location: location
              });
            }
          });
        });

        view.on("click", function(evt) {
          view.graphics.removeAll();
          console.info(webMercatorUtils.webMercatorToGeographic(evt.mapPoint));
          locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 100).then(function(evt){
            if (evt.address) {
              var address = {Address: evt.address};
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              var graphic = new Graphic({
                geometry: location,
                symbol: {
                  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                  color: "blue",
                  size: 8,
                  outline: {  // autocasts as new SimpleLineSymbol()
                    width: 0.5,
                    color: "darkblue"
                  }
                },
                attributes: address,
                popupTemplate: infoTemplate
              });
              view.graphics.add(graphic);

              //display the info window with the address information
              view.popup.open({
                features: [graphic],
                location: location
              });
            }
          });
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%; height:100%;">

      <div id="header" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        <span>Click the map to get the address for the input location.</span>
        <input type='text' id='Lat' value="34.250812723611325"></input>
        <input type='text' id='Lon' value='-118.51732330322035'></input>
        <button type="button" id='btnGo'>Locate</button>
      </div>
      <div id="map" class="roundedCorners"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
HsuKao-Ming
by
New Contributor II
‎08-16-2018 01:46 AM

Thank your help

I have two questions.

1.

this my code.

var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var x = parseFloat(-118.51732330322035);
var y = parseFloat(34.250812723611325);
var pt = new Point({
x: x,
y: y,
spatialReference: new SpatialReference({ wkid: 4326 })
});
locator.locationToAddress(pt, 100).then(function(evt){
if (evt.address) {
var address = {Address: evt.address};

}
});

---------------------------------------------------------

get error this:

Uncaught TypeError: a.clone(...).normalize is not a function
at Object.b.locationToAddress (Locator.js:8)
at Location.js?20161027:388
at K (dojo.js:18)
at dojo.js:19
at E (dojo.js:19)
at da (dojo.js:19)
at e (dojo.js:21)
at HTMLScriptElement.<anonymous> (dojo.js:23)

What have I ignored?

2.The sample you provided

var address = {Address: evt.address};
I want to get "Match_addr" , but I can't
Why?
{"address":{"Match_addr":"17545 Lassen St, Northridge, California, 91325","LongLabel":"17545 Lassen St, Northridge, CA, 91325, USA","ShortLabel":"17545 Lassen St","Addr_type":"PointAddress","Type":"","PlaceName":"","AddNum":"17545","Address":"17545 Lassen St","Block":"","Sector":"","Neighborhood":"Northridge","District":"","City":"Northridge","MetroArea":"Los Angeles Metro Area","Subregion":"Los Angeles County","Region":"California","Territory":"","Postal":"91325","PostalExt":"","CountryCode":"USA"},"location":{"x":-118.51724250000001,"y":34.250362478792603,"spatialReference":{"wkid":4326,"latestWkid":4326}}}
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-16-2018 06:04 AM

Hsu,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

  1. var x = parseFloat(-118.51732330322035); 
    var y = parseFloat(34.250812723611325); 

You are telling the parseFloat function to parse a number (which make no sense). The parseFloat is for making a sting a number.

This would be correct:

var x = parseFloat('-118.51732330322035'); 
var y = parseFloat('34.250812723611325'); 

  2. Because Match_addr is not part of the evt object it is part of the evt.attributes object:

var address = {Address: evt.attributes.Match_addr};

HsuKao-Ming
by
New Contributor II
‎08-16-2018 05:59 PM

THANK Your Tips.

but I have the 1 same error again.

mycode:

require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/Graphic",
"esri/geometry/Point",
"esri/tasks/Locator",
"esri/geometry/SpatialReference",
"esri/PopupTemplate",
"dojo/domReady!"
],
function(Map, MapView, Search,
Point,
SpatialReference, Locator
) {

var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

var x = parseFloat('-118.51732330322035');
var y = parseFloat('34.250812723611325');
var pt = new Point({
x: x,
y: y,
spatialReference: new SpatialReference({ wkid: 4326 })
});

locator.locationToAddress(pt, 100).then(function(evt){
if (evt.address) {
var address = {Address: evt.address};

}
});

---------------------------------------------------------------------------------

get error this.

Uncaught TypeError: a.clone(...).normalize is not a function
at Object.b.locationToAddress (Locator.js:8)
at Location.js?20161027:388
at K (dojo.js:18)
at dojo.js:19
at E (dojo.js:19)
at da (dojo.js:19)
at e (dojo.js:21)
at HTMLScriptElement.<anonymous> (dojo.js:23)

Please help again.

THANKS

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-16-2018 07:08 PM

Hsu,

   Your requires are out of order:

require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/Graphic",
"esri/geometry/Point", 
"esri/tasks/Locator", 
"esri/geometry/SpatialReference", 
"esri/PopupTemplate",
"dojo/domReady!"
],
function(
Map
MapView,
Search,
Point, 
SpatialReference,
Locator
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

it should be:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/Search",
  "esri/Graphic",
  "esri/geometry/Point", 
  "esri/tasks/Locator", 
  "esri/geometry/SpatialReference", 
  "esri/PopupTemplate",
  "dojo/domReady!"
],
function(
  Map
  MapView,
  Search,
  Graphic,
  Point,
  Locator,
  SpatialReference,
  PopupTemplate
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice, line 2  = line 13, 3 = 13, etc, etc

HsuKao-Ming
by
New Contributor II
‎08-19-2018 06:44 PM

Thank your help.

My other two questions.
1. There is something wrong with the address returned by location. If I want to provide information and ask you to modify it.
What should I do?
Because some locations return the store name, it is not the address of the return details.
2.google api "timezone", is there a way to convert?

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎08-20-2018 05:49 AM

Hsu,

  1. I have never run into that situation. You have looked through all the attributes in the returned event and are sure the infomation you need is not returned right?
  2. "google api" ???....
0 Kudos