<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Geocoder Widget</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 75px;
}
</style>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map;
var geocoder;
var locatorUrl = "http:myserver:6080/arcgis/rest/services/Locators/AirportsGeocode/GeocodeServer";
require([
"esri/map", "esri/dijit/Geocoder", "dojo/domReady!"
], function(
Map, Geocoder
) {
map = new Map("map",{
basemap: "dark-gray",
center: [-97,38], // lon, lat
zoom: 5
});
var myGeocoders = [{
url: locatorUrl,
name: "AirportsGeocode",
singleLineFieldName: "SingleKey"
}];
geocoder = new Geocoder({
map: map,
autoComplete: true,
autoNavigate: true,
showResults: true,
highlightLocation: true,
maxLocations: 5,
minCharacters: 2,
arcgisGeocoder: false,
geocoders: myGeocoders,
value: "LAX"
},"search");
geocoder.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
