topic Re: How to convert the coordinates and plot them on the map using API JavaScript? in ArcGIS JavaScript Maps SDK Questions

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

ManjariGoyal — Wed, 15 Jul 2015 21:08:23 GMT

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>

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

TomSellsted — Wed, 15 Jul 2015 22:04:51 GMT

Manjari,

Have you seen the sample from the JS API page?

Reverse geocode | ArcGIS API for JavaScript

Regards,

Tom

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

TomSellsted — Sat, 11 Dec 2021 10:05:46 GMT

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>

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

KenBuja — Thu, 16 Jul 2015 13:14:18 GMT

One problem you're going to run into later on is that your function arguements aren't matching your require modules. Take a look at the position of "dojo/on" versus "on".

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

ManjariGoyal — Thu, 16 Jul 2015 14:11:23 GMT

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

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:05:49 GMT

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>

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

TomSellsted — Sat, 11 Dec 2021 10:05:52 GMT

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

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

TomSellsted — Thu, 16 Jul 2015 15:53:28 GMT

Robert,

You beat me by a couple of minutes!

Regards,

Tom

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

ManjariGoyal — Thu, 16 Jul 2015 15:57:59 GMT

Thanks Tom and Robert it worked perfectly.

Manjari

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

RobertScheitlin__GISP — Thu, 16 Jul 2015 16:02:45 GMT

Tom,

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

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

TomSellsted — Thu, 16 Jul 2015 16:07:50 GMT

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

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

TerryGustafson — Fri, 07 Aug 2015 15:10:08 GMT

Hey Manjari,

do you have a live example of how this works?

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

RobertScheitlin__GISP — Fri, 07 Aug 2015 15:13:19 GMT

Terry,

Both mine and Toms posted code sample work.

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

TerryGustafson — Fri, 07 Aug 2015 15:19:10 GMT

Thanks Robert, I’m slow so trying to wrap my mind around what it actually does.. what I’m trying to accomplish is I was to let the user enter Lat/Long or State Plane Coords and then it takes them to a linear location on a route as well as give them the LR location.

Was hoping this would give me some starter code to work with.

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

RobertScheitlin__GISP — Fri, 07 Aug 2015 15:47:01 GMT

Terry,

This code is doing a lot more than what are looking for then. I is allowing the user to enter a lat and lon and then use that info to reverse geocode.

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

ManjariGoyal — Fri, 07 Aug 2015 15:55:10 GMT

Hey Terry,

As Robert said this is the working sample code.

Thanks

Manjari