topic Re: Reverse GeoCode in ArcGIS JavaScript Maps SDK Questions

Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 13:36:42 GMT

Any examples out there of allowing the user to type in a lat long and creating a point at that location and/or zooming to it,,,,

Much like the below but with XY not address

Geocode an address | ArcGIS API for JavaScript‌

Re: Reverse GeoCode

TimWitt2 — Mon, 04 Aug 2014 13:40:32 GMT

Jay,

you could use this Reverse geocode | ArcGIS API for JavaScript , but instead of a "map on click event" you could create a box, where a user can put in the lat/long, then create a point from that information and use the point as your "evt.mapPoint".

Tim

Re: Reverse GeoCode

TimWitt2 — Mon, 04 Aug 2014 15:41:14 GMT

I built on the example I gave you, check it out:

<!DOCTYPE html>
<html>
  <head>
    <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.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.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="http://js.arcgis.com/3.10/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/geometry/webMercatorUtils",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/InfoTemplate", "esri/Color", "esri/geometry/Point", "dojo/on",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dijit/form/TextBox", "dijit/form/Button",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        webMercatorUtils,
        SimpleMarkerSymbol, SimpleLineSymbol,
        InfoTemplate, Color, Point, on,
        number, parser, dom, registry, TextBox
      ) {
        parser.parse();

        map = new Map("map", { 
          basemap: "streets", 
          center: [-95.273, 38.95],
          zoom: 14
        });
        
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          15, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID, 
            new Color([0, 0, 255, 0.5]), 
            8
          ), 
          new Color([0, 0, 255])
        );
        

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

        var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");
  

        locator.on("location-to-address-complete", function(evt) {
          if (evt.address.address) {
            var address = evt.address.address;
            var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
            //this service returns geocoding results in geographic - convert to web mercator to display on map
            // var location = webMercatorUtils.geographicToWebMercator(evt.location);
            var graphic = new Graphic(location, symbol, address, infoTemplate);
            map.graphics.add(graphic);
            
            map.infoWindow.setTitle(graphic.getTitle());
            map.infoWindow.setContent(graphic.getContent());
            
            //display the info window with the address information
            var screenPnt = map.toScreen(location);
            map.infoWindow.resize(200,100);
            map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt));
          }
        });

        map.on("click", function(evt) {
          map.graphics.clear();
          locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 100);

        });
        var LongTextBox = new TextBox({
            placeHolder: "Longitude",
            value:"-95.273",
            intermediateChanges:true
        },"LongTextBoxDiv");
        
                var LatTextBox = new TextBox({
            placeHolder: "Latitude",
            value:"38.95",
            intermediateChanges:true
        },"LatTextBoxDiv");

        
        on(registry.byId("latlong"), "click", getaddress);
        
        function getaddress(){
          var Lat = LatTextBox.get("value");
          var Long = LongTextBox.get("value");
          var LatLongLocation = new Point([Long,Lat]);
          locator.locationToAddress(LatLongLocation , 100);
          map.graphics.clear();
        }
        
      });
    </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'">

        Long: <input id="LongTextBoxDiv" />
        Lat: <input id="LatTextBoxDiv" />
        
        <button id="latlong" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Get Address</button>
        

      </div>

      <div id="map" class="roundedCorners" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'">
      </div>

    </div>
  </body>
</html>

Hope this answers your question!

Tim

Re: Reverse GeoCode

JeffJacobson — Mon, 04 Aug 2014 18:32:12 GMT

You may need this too, depending on if your users want to enter degrees-minutes-seconds:
Parse Degrees Minutes Seconds (DMS) into Decimal Degrees‌

Re: Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 19:08:22 GMT

Worked great Tim....thanks...

And thats Jeff....will be revisiting this once I figure out what their preference is.....so if the do degrees minutes seconds...I test for this? Then grab the values from the textboxes and convert them pass to the locator?

Re: Reverse GeoCode

TimWitt2 — Mon, 04 Aug 2014 19:16:03 GMT

You convert it from deg/min/sec and once you have your Lat/Long feed them into line 122, here:

var LatLongLocation = new Point([Long,Lat]);

Re: Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 19:43:33 GMT

How would I zoom to it?

Would like to zoom to the Graphic being created below

locator.on("location-to-address-complete", function(evt) {

if (evt.address.address) {

var address = evt.address.address;

var location = webMercatorUtils.geographicToWebMercator(evt.address.location);

//this service returns geocoding results in geographic - convert to web mercator to display on map

// var location = webMercatorUtils.geographicToWebMercator(evt.location);

var graphic = new Graphic(location, ReverseGeocodesymbol, address, infoTemplateRG);

app.map.graphics.add(graphic);

app.map.infoWindow.setTitle(graphic.getTitle());

app.map.infoWindow.setContent(graphic.getContent());

//display the info window with the address information

var screenPnt = app.map.toScreen(location);

app.map.infoWindow.resize(200,100);

app.map.infoWindow.show(screenPnt, app.map.getInfoWindowAnchor(screenPnt));

var stateExtent = location [0].geometry.getExtent().expand(5.0);
map.setExtent(stateExtent);

}

});

Re: Reverse GeoCode

TimWitt2 — Mon, 04 Aug 2014 19:50:28 GMT

Instead of what you have, add the following:

var graphicExtent = graphic._extent.getExtent();
map.setExtent(graphicExtent);

Hope this helps!

Tim

Re: Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 20:14:47 GMT

I do this and nothing happens..

Also tried getting rid of the _ in your example and still no zooming

var graphicExtent = graphic._extent.getExtent();

Trying this way

var graphicExtent = graphic.extent.getExtent();

Error

TypeError {stack: (...), message: "Cannot read property 'getExtent' of undefined"

}

locator.on("location-to-address-complete", function(evt) {

if (evt.address.address) {

var address = evt.address.address;

var location = webMercatorUtils.geographicToWebMercator(evt.address.location);

//this service returns geocoding results in geographic - convert to web mercator to display on map

// var location = webMercatorUtils.geographicToWebMercator(evt.location);

var graphic = new Graphic(location, ReverseGeocodesymbol, address, infoTemplateRG);

app.map.graphics.add(graphic);

app.map.infoWindow.setTitle(graphic.getTitle());

app.map.infoWindow.setContent(graphic.getContent());

//display the info window with the address information

var screenPnt = app.map.toScreen(location);

app.map.infoWindow.resize(200,100);

app.map.infoWindow.show(screenPnt, app.map.getInfoWindowAnchor(screenPnt));

var graphicExtent = graphic._extent.getExtent();

app.map.setExtent(graphicExtent);

}

});

Re: Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 20:20:13 GMT

THink I got it....I was not moving my map...I moved my map and ran it and it centered on the graphic being created.....my next and last question ....how do I zoom to it...can I do this

var graphicExtent = graphic1._extent.getExtent().zoomin;

Something similar to the map : zoom: 7,

Tried this and no go

var graphicExtent = graphic._extent.getExtent();

app.map.centerAndZoom(graphicExtent,7);

Re: Reverse GeoCode

jaykapalczynski — Mon, 04 Aug 2014 20:43:11 GMT

Think I got it with the below.....thanks for all your help.....

var graphicExtent = graphic1._extent.getExtent();

app.map.centerAndZoom(evt.address.location,15);