Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Geocoder - append default suffix
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
Version 3.3 of the ArcGIS API for JavaScript introduced the Geocoder widget. This widget streamlines the process of finding locations. The widget provides several customization options including the enabling autocomplete and appending a value to a search string. Appending values can be useful if you want to allow users to enter an address without typing the city name each time. In this sample, the map is centered on Redlands so we append Redlands, CA to each input string.var geocoder = new Geocoder({
map:map,
autocomplete:true,
esriGeocoder: {
postfix: "Redlands, CA",
sourceCountry: "USA"
}
},"search");
geocoder.startup();
To test the sample, enter the address for the Esri campus in Redlands: 380 New York St.
Code
<!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="https://js.arcgis.com/3.29/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="https://js.arcgis.com/3.29/"></script>
<script>
var map, geocoder;
require(["esri/map",
"esri/dijit/Geocoder",
"dojo/ready"],
function(Map, Geocoder, ready){
function init() {
map = new Map("map",{
basemap: "topo",
center: [-117.19,34.05], //long, lat
zoom: 13
});
geocoder = new Geocoder({
map: map,
autoComplete: true,
arcgisGeocoder: {
name: "Esri World Geocoder",
suffix: " Redlands, CA"
}
},"search");
geocoder.startup();
}
ready(init);
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>