How to convert the coordinates and plot them on the map using API JavaScript?

ManjariGoyal · ‎07-15-2015

Hi,

I am trying to write a JavaScript in which I would Like to convert the Coordinates and plot those coordinates on my map. Basically, trying to do reverse geocoding.

Below is the Script I wrote so far in which I can geocode the address but I am not able to convert X and Y to an address and can't plot the point. Please let me know how to fix this.

<!DOCTYPE html>

<html>

<head>

<title>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

#leftPanel {

width:20%;

border-top: solid 1px #343642;

border-left: solid 1px #343642;

border-bottom: solid 1px #343642;

border-right: solid 1px #343642;

margin:0px 0px 5px 5px;

color: #343642;

font:100% Georgia, "Times New Roman", Times, serif;

}

#convertButton {

font-size:12pt;

}

</style>

var map, candidateLocation;

require(["esri/map",

"esri/SnappingManager",

"esri/dijit/Measurement",

"esri/dijit/BasemapGallery",

"esri/layers/FeatureLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/dijit/Legend",

"esri/tasks/locator",

"esri/dijit/Geocoder",

"esri/tasks/query",

"esri/geometry/Circle",

"esri/graphic",

"esri/InfoTemplate",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/renderers/SimpleRenderer",

"esri/symbols/Font",

"esri/symbols/TextSymbol",

"esri/config",

"esri/Color",

"esri/tasks/geometry",

"esri/geometry/Extent",

"dojo/_base/array",

"dijit/registry",

"dojo/dom",

"dojo/parser",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/layout/AccordionContainer",

"dijit/form/Button",

"dijit/form/Textarea",

"dijit/form/TextBox",

"dijit/form/Select",

"dojo/on",

"dojo/domReady!",

],

function(

Map, SnappingManager, Measurement, BasemapGallery, FeatureLayer,

ArcGISDynamicMapServiceLayer, Legend, Locator, Geocoder, Query, Circle,

Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol,

SimpleFillSymbol, SimpleRenderer, Font, TextSymbol, esriConfig, Color, geometry, Extent,

arrayUtils, registry, dom, parser, on) {

parser.parse();

map = new Map("mapDiv", {

basemap: "gray",

center: [-95.249, 38.954],

zoom: 3,

sliderStyle: "large"

});

var geocoder = new Geocoder({

arcgisGeocoder: {

placeholder: "Enter an Address",

sourceCountry: "USA"

},

autoComplete: true,

map: map

}, dom.byId("search"));

geocoder.on("select", showLocation);

//script for locating the address with Longitude and Latitude.

function init() {

var inLat = new dijit.form.TextBox({

name: "inLat",

//value: 34.0571709

}, "inLat");

var inLon = new dijit.form.TextBox({

name: "inLon",

//value: -117.1942978

}, "inLon");

//dojo.byId("inLat").value = defaultcoord.y;

//dojo.byId("inLon").value = defaultcoord.x;

var button = new dijit.form.Button({

label: "Convert",

},"convertButton");

}

dojo.ready(init);

function showLocation(evt) {

map.graphics.clear();

console.log(evt);

var point = evt.result.feature.geometry;

var symbol = new SimpleMarkerSymbol().setStyle(

SimpleMarkerSymbol.STYLE_SQUARE).setColor(

new Color([255,0,0,0.5])

);

var graphic = new Graphic(point, symbol);

map.graphics.add(graphic);

map.centerAndZoom(graphic, 4);

map.infoWindow.setTitle("Search Result");

map.infoWindow.setContent(evt.result.name);

map.infoWindow.show(evt.result.feature.geometry);

}

});

</script>

</head>

<br>

Enter an address then click the magnifying glass to return the location for street addresses in the United States.

<br>

Input Longtitude and Latitude

</div>

<br>

<div>

</div>

<div>

</div>

<br>

<div>

<button id="convertButton" data-dojo-type="dijit/form/Button">Convert</button>

</div>

</div>

</html>

TomSellsted · ‎07-16-2015

Manjari,

I added some additional logic to your app to use the keyed coordinates too. You can still click on the map and it will fill in the coordinates that were found or you can enter the coordinates and an address will be found if in the tolerance set.

As Ken states, your references in the require were not properly aligned. I removed the extra references.

<!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>Reverse Geocode</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">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
       
        #leftPanel {
            width: 20%;
            border-top: solid 1px #343642;
            border-left: solid 1px #343642;
            border-bottom: solid 1px #343642;
            border-right: solid 1px #343642;
            margin: 0px 0px 5px 5px;
            color: #343642;
            font: 100% Georgia, "Times New Roman", Times, serif;
        }
       
        #convertButton {
            font-size: 12pt;
        }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
        var map;
        require(["esri/map",
  "esri/geometry/Point",
  "esri/SpatialReference",
                "esri/tasks/locator",
                "esri/geometry/webMercatorUtils",
                "esri/dijit/Geocoder",
                "esri/graphic",
                "esri/InfoTemplate",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "dojo/dom",
                "dojo/parser",
                "dojo/on",
                "dojo/domReady!",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dijit/form/Button",
                "dijit/form/TextBox"
            ],
            function(
                Map,
  Point,
  SpatialReference,
  Locator,
  webMercatorUtils,
  Geocoder,
                Graphic,
  InfoTemplate,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  Color,
  dom,
  parser,
  on
  ) {


                parser.parse();


                map = new Map("mapDiv", {
                    basemap: "gray",
                    center: [-95.249, 38.954],
                    zoom: 3,
                    sliderStyle: "large"
                });


                var geocoder = new Geocoder({
                    arcgisGeocoder: {
                        placeholder: "Enter an Address",
                        sourceCountry: "USA"
                    },
                    autoComplete: true,
                    map: map
                }, dom.byId("search"));


                geocoder.on("select", showLocation);


                //script for locating the address with Longitude and Latitude.


                function init() {
                    convertButton.on("click", function(i) {
  var x = parseFloat(inLon.value);
  var y = parseFloat(inLat.value);
  var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));
  locator.locationToAddress(pt, 100);
                    });
                }




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


                var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");
                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])
                );


                locator.on("location-to-address-complete", function(evt) {
                    if (evt.address.address) {
                        var address = evt.address.address;
                        var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
                        dojo.byId("inLat").value = evt.address.location.y.toFixed(6);
                        dojo.byId("inLon").value = evt.address.location.x.toFixed(6);
                        //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);
                });


                dojo.ready(init);


                function showLocation(evt) {
                    map.graphics.clear();
                    console.log(evt);
                    var point = evt.result.feature.geometry;
                    var symbol = new SimpleMarkerSymbol().setStyle(
                        SimpleMarkerSymbol.STYLE_SQUARE).setColor(
                        new Color([255, 0, 0, 0.5])
                    );
                    var graphic = new Graphic(point, symbol);
                    map.graphics.add(graphic);
                    map.centerAndZoom(graphic, 4);
                    map.infoWindow.setTitle("Search Result");
                    map.infoWindow.setContent(evt.result.name);
                    map.infoWindow.show(evt.result.feature.geometry);
                }
            });
    </script>
</head>


<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%; height:100%;">
        <div id="leftPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">


            <br> Enter an address then click the magnifying glass to return the location for street addresses in the United States.
            <div id="search"></div>
            <br>
            <br>
            <div style="font-size: 12pt; font-weight:bold;">
                Input Longtitude and Latitude
            </div>
            <br>
            <div>
                <span>X: </span>
                <input tabindex="1" type="text" id="inLon" data-dojo-id="inLon" data-dojo-type="dijit/form/TextBox" value="-95.249" />
            </div>
            <div>
                <span>Y: </span>
                <input tabindex="2" type="text" id="inLat" data-dojo-id="inLat" data-dojo-type="dijit/form/TextBox" value="38.954" />
            </div>
            <br>
            <div>
                <button id="convertButton" data-dojo-id="convertButton" data-dojo-type="dijit/form/Button">Convert</button>
            </div>


        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div style="position:absolute; right:20px; top:10px; z-Index:999;"></div>
        </div>




</html>

Regards,

Tom

View solution in original post

TomSellsted · ‎07-15-2015

Manjari,

Have you seen the sample from the JS API page?

Reverse geocode | ArcGIS API for JavaScript

Regards,

Tom

TomSellsted · ‎07-15-2015

Manjari,

I added some logic to your code to allow you to click on the map from the reverse geocoding example. It populates the lat/lon fields too.

Here is the updated code:

<!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>ArcGIS dynamic and tile layers using Popup and InfoTemplates</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">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        
        #leftPanel {
            width: 20%;
            border-top: solid 1px #343642;
            border-left: solid 1px #343642;
            border-bottom: solid 1px #343642;
            border-right: solid 1px #343642;
            margin: 0px 0px 5px 5px;
            color: #343642;
            font: 100% Georgia, "Times New Roman", Times, serif;
        }
        
        #convertButton {
            font-size: 12pt;
        }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
        var map, candidateLocation;
        require(["esri/map",
                "esri/SnappingManager",
                "esri/dijit/Measurement",
                "esri/dijit/BasemapGallery",
                "esri/layers/FeatureLayer",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/dijit/Legend",
                "esri/tasks/locator",
                "esri/geometry/webMercatorUtils",
                "esri/dijit/Geocoder",
                "esri/tasks/query",
                "esri/geometry/Circle",
                "esri/graphic",
                "esri/InfoTemplate",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/renderers/SimpleRenderer",
                "esri/symbols/Font",
                "esri/symbols/TextSymbol",
                "esri/config",
                "esri/Color",
                "esri/tasks/geometry",
                "esri/geometry/Extent",
                "dojo/_base/array",
                "dijit/registry",
                "dojo/dom",
                "dojo/parser",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dijit/layout/AccordionContainer",
                "dijit/form/Button",
                "dijit/form/Textarea",
                "dijit/form/TextBox",
                "dijit/form/Select",
                "dojo/on",
                "dojo/domReady!",
            ],
            function(
                Map, SnappingManager, Measurement, BasemapGallery, FeatureLayer,
                ArcGISDynamicMapServiceLayer, Legend, Locator, webMercatorUtils, Geocoder, Query, Circle,
                Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol,
                SimpleFillSymbol, SimpleRenderer, Font, TextSymbol, esriConfig, Color, geometry, Extent,
                arrayUtils, registry, dom, parser, on) {


                parser.parse();


                map = new Map("mapDiv", {
                    basemap: "gray",
                    center: [-95.249, 38.954],
                    zoom: 3,
                    sliderStyle: "large"
                });


                var geocoder = new Geocoder({
                    arcgisGeocoder: {
                        placeholder: "Enter an Address",
                        sourceCountry: "USA"
                    },
                    autoComplete: true,
                    map: map
                }, dom.byId("search"));


                geocoder.on("select", showLocation);


                //script for locating the address with Longitude and Latitude.


                function init() {
                    var inLat = new dijit.form.TextBox({
                        name: "inLat",
                        //value: 34.0571709
                    }, "inLat");
                    var inLon = new dijit.form.TextBox({
                        name: "inLon",
                        //value: -117.1942978
                    }, "inLon");
                    //dojo.byId("inLat").value = defaultcoord.y;
                    //dojo.byId("inLon").value = defaultcoord.x;
                    //  var button = new dijit.form.Button({
                    //label: "Convert",
                    // },"convertButton");
                    convertButton.on("click", function(i) {
                        var a = 0;
                    });
                }




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


                var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");
                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])
                );


                locator.on("location-to-address-complete", function(evt) {
                    if (evt.address.address) {
                        var address = evt.address.address;
                        var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
                        dojo.byId("inLat").value = evt.address.location.y.toFixed(6);
                        dojo.byId("inLon").value = evt.address.location.x.toFixed(6);
                        //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);
                });


                dojo.ready(init);


                function showLocation(evt) {
                    map.graphics.clear();
                    console.log(evt);
                    var point = evt.result.feature.geometry;
                    var symbol = new SimpleMarkerSymbol().setStyle(
                        SimpleMarkerSymbol.STYLE_SQUARE).setColor(
                        new Color([255, 0, 0, 0.5])
                    );
                    var graphic = new Graphic(point, symbol);
                    map.graphics.add(graphic);
                    map.centerAndZoom(graphic, 4);
                    map.infoWindow.setTitle("Search Result");
                    map.infoWindow.setContent(evt.result.name);
                    map.infoWindow.show(evt.result.feature.geometry);
                }
            });
    </script>
</head>


<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%; height:100%;">
        <div id="leftPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">


            <br> Enter an address then click the magnifying glass to return the location for street addresses in the United States.
            <div id="search"></div>
            <br>
            <br>
            <div style="font-size: 12pt; font-weight:bold;">
                Input Longtitude and Latitude
            </div>
            <br>
            <div>
                <span>X: </span>
                <input tabindex="1" type="text" id="inLon" />
            </div>
            <div>
                <span>Y: </span>
                <input tabindex="2" type="text" id="inLat" />
            </div>
            <br>
            <div>
                <button id="convertButton" data-dojo-id="convertButton" data-dojo-type="dijit/form/Button">Convert</button>
            </div>


        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div style="position:absolute; right:20px; top:10px; z-Index:999;"></div>
        </div>




</html>

ManjariGoyal · ‎07-16-2015

Hi Tom,

Thanks for the quick response. I did look at the sample and was able to create which you have already created, but what I am trying to do is that user will enter X and Y coordinates in the box and click convert then it will plot the point and also shows the address on the map. Please let me know how we can do that. Really appreciate your help.

Thanks

Manjari

RobertScheitlin__GISP · ‎07-16-2015

Manjari,

Here is a mod of Tom's sample that does what you want:

<!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>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #leftPanel {
      width: 20%;
      border-top: solid 1px #343642;
      border-left: solid 1px #343642;
      border-bottom: solid 1px #343642;
      border-right: solid 1px #343642;
      margin: 0px 0px 5px 5px;
      color: #343642;
      font: 100% Georgia, "Times New Roman", Times, serif;
    }

    #convertButton {
      font-size: 12pt;
    }
  </style>
  <script src="http://js.arcgis.com/3.14/"></script>
  <script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyA7d88yhU8O8p7tujVHvSGNlB8KTk_V8dE" type="text/javascript"></script>
  <script>
    var map, candidateLocation;
    require([
        "esri/map",
        "esri/tasks/locator",
        "esri/geometry/webMercatorUtils",
        "esri/dijit/Geocoder",
        "esri/geometry/Point",
        "esri/graphic",
        "esri/InfoTemplate",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "dojo/parser",
        "dojo/on",
        "esri/SpatialReference",
        "dojo/_base/lang",
        "dojo/dom",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dojo/domReady!"
    ],
      function (
        Map, Locator, webMercatorUtils, Geocoder,
        Point, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol,
        Color, parser, on, SpatialReference, lang, dom) {

        parser.parse();

        map = new Map("mapDiv", {
          basemap: "gray",
          center: [-95.249, 38.954],
          zoom: 3,
          sliderStyle: "large"
        });

        var geocoder = new Geocoder({
          arcgisGeocoder: {
            placeholder: "Enter an Address",
            sourceCountry: "USA"
          },
          autoComplete: true,
          map: map
        }, dom.byId("search"));

        geocoder.on("select", showLocation);

        function showLocation(evt) {
          map.graphics.clear();
          console.log(evt);
          var point = evt.result.feature.geometry;
          var symbol = new SimpleMarkerSymbol().setStyle(
            SimpleMarkerSymbol.STYLE_SQUARE).setColor(
            new Color([255, 0, 0, 0.5])
          );
          var graphic = new Graphic(point, symbol);
          map.graphics.add(graphic);
          map.centerAndZoom(graphic, 4);
          map.infoWindow.setTitle("Search Result");
          map.infoWindow.setContent(evt.result.name);
          map.infoWindow.show(evt.result.feature.geometry);
        }

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

        var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");
        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])
        );

        on(dojo.byId('convertButton'), 'click', function () {
          map.infoWindow.hide();
          map.graphics.clear();
          var pnt = new Point(dojo.byId('inLon').value, dojo.byId('inLat').value, new SpatialReference({
            wkid: 4326
          }));
          locator.locationToAddress(pnt, 100, lang.hitch(this, function (evt) {
            if (evt.address.Address) {
              var address = evt.address.Match_addr || evt.address.Address;
              var attribs = {
                Address: address
              }
              var location = webMercatorUtils.geographicToWebMercator(evt.location);
              dojo.byId("inLat").value = evt.location.y.toFixed(6);
              dojo.byId("inLon").value = evt.location.x.toFixed(6);
              //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, attribs, 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));
            }
          }), function (error) {
            console.info(error);
          });
        });
      });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%; height:100%;">
    <div id="leftPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
      <br>Enter an address then click the magnifying glass to return the location for street addresses in the United States.
      <div id="search"></div>
      <br>
      <br>
      <div style="font-size: 12pt; font-weight:bold;">Input Longtitude and Latitude</div>
      <br>
      <div>
        <span>X: </span>
        <input tabindex="1" type="text" id="inLon" value="-117.151770" />
      </div>
      <div>
        <span>Y: </span>
        <input tabindex="2" type="text" id="inLat" value="33.719138" />
      </div>
      <br>
      <div>
        <button id="convertButton" data-dojo-type="dijit/form/Button">Convert</button>
      </div>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div style="position:absolute; right:20px; top:10px; z-Index:999;"></div>
    </div>
  </div>
</body>

</html>

TomSellsted · ‎07-16-2015

Robert,

You beat me by a couple of minutes!

Regards,

Tom

RobertScheitlin__GISP · ‎07-16-2015

Tom,

Sorry, I waited for a while before jumping in. I thought you got busy and were not working on this today.

TomSellsted · ‎07-16-2015

Robert,

No worries at all Robert! I always like looking at other peoples code (especially yours). To see different ways of solving a problem.

Best Regards,

Tom

TomSellsted · ‎07-16-2015

Manjari,

I added some additional logic to your app to use the keyed coordinates too. You can still click on the map and it will fill in the coordinates that were found or you can enter the coordinates and an address will be found if in the tolerance set.

As Ken states, your references in the require were not properly aligned. I removed the extra references.

<!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>Reverse Geocode</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">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
       
        #leftPanel {
            width: 20%;
            border-top: solid 1px #343642;
            border-left: solid 1px #343642;
            border-bottom: solid 1px #343642;
            border-right: solid 1px #343642;
            margin: 0px 0px 5px 5px;
            color: #343642;
            font: 100% Georgia, "Times New Roman", Times, serif;
        }
       
        #convertButton {
            font-size: 12pt;
        }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
        var map;
        require(["esri/map",
  "esri/geometry/Point",
  "esri/SpatialReference",
                "esri/tasks/locator",
                "esri/geometry/webMercatorUtils",
                "esri/dijit/Geocoder",
                "esri/graphic",
                "esri/InfoTemplate",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/Color",
                "dojo/dom",
                "dojo/parser",
                "dojo/on",
                "dojo/domReady!",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dijit/form/Button",
                "dijit/form/TextBox"
            ],
            function(
                Map,
  Point,
  SpatialReference,
  Locator,
  webMercatorUtils,
  Geocoder,
                Graphic,
  InfoTemplate,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  Color,
  dom,
  parser,
  on
  ) {


                parser.parse();


                map = new Map("mapDiv", {
                    basemap: "gray",
                    center: [-95.249, 38.954],
                    zoom: 3,
                    sliderStyle: "large"
                });


                var geocoder = new Geocoder({
                    arcgisGeocoder: {
                        placeholder: "Enter an Address",
                        sourceCountry: "USA"
                    },
                    autoComplete: true,
                    map: map
                }, dom.byId("search"));


                geocoder.on("select", showLocation);


                //script for locating the address with Longitude and Latitude.


                function init() {
                    convertButton.on("click", function(i) {
  var x = parseFloat(inLon.value);
  var y = parseFloat(inLat.value);
  var pt = new Point(x, y, new SpatialReference({ wkid: 4326 }));
  locator.locationToAddress(pt, 100);
                    });
                }




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


                var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");
                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])
                );


                locator.on("location-to-address-complete", function(evt) {
                    if (evt.address.address) {
                        var address = evt.address.address;
                        var location = webMercatorUtils.geographicToWebMercator(evt.address.location);
                        dojo.byId("inLat").value = evt.address.location.y.toFixed(6);
                        dojo.byId("inLon").value = evt.address.location.x.toFixed(6);
                        //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);
                });


                dojo.ready(init);


                function showLocation(evt) {
                    map.graphics.clear();
                    console.log(evt);
                    var point = evt.result.feature.geometry;
                    var symbol = new SimpleMarkerSymbol().setStyle(
                        SimpleMarkerSymbol.STYLE_SQUARE).setColor(
                        new Color([255, 0, 0, 0.5])
                    );
                    var graphic = new Graphic(point, symbol);
                    map.graphics.add(graphic);
                    map.centerAndZoom(graphic, 4);
                    map.infoWindow.setTitle("Search Result");
                    map.infoWindow.setContent(evt.result.name);
                    map.infoWindow.show(evt.result.feature.geometry);
                }
            });
    </script>
</head>


<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%; height:100%;">
        <div id="leftPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">


            <br> Enter an address then click the magnifying glass to return the location for street addresses in the United States.
            <div id="search"></div>
            <br>
            <br>
            <div style="font-size: 12pt; font-weight:bold;">
                Input Longtitude and Latitude
            </div>
            <br>
            <div>
                <span>X: </span>
                <input tabindex="1" type="text" id="inLon" data-dojo-id="inLon" data-dojo-type="dijit/form/TextBox" value="-95.249" />
            </div>
            <div>
                <span>Y: </span>
                <input tabindex="2" type="text" id="inLat" data-dojo-id="inLat" data-dojo-type="dijit/form/TextBox" value="38.954" />
            </div>
            <br>
            <div>
                <button id="convertButton" data-dojo-id="convertButton" data-dojo-type="dijit/form/Button">Convert</button>
            </div>


        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div style="position:absolute; right:20px; top:10px; z-Index:999;"></div>
        </div>




</html>

Regards,

Tom

ManjariGoyal · ‎07-16-2015

Thanks Tom and Robert it worked perfectly.

Manjari