AnsweredAssumed Answered

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

Question asked by manjarigoyal on Jul 15, 2015
Latest reply on Aug 7, 2015 by manjarigoyal

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>

        <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 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/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>

<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-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>

Outcomes