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>
