Description
This sample demonstrates how to work with a composite ArcGIS locator service in the Search widget. This custom
locator serviceaccepts an asset id and once entered, it zooms to that location. Similarly, this functionality can be accomplished by setting the search's source to a featurelayer and its field(s) to search. The locator used in this sample does not have the associated reference data published as a service, therefore searching a featurelayer would not be applicable.
To test its functionality, pass in one of the following Asset ID values:
- H-L-N-EW-090-GLO-001-403-OWT
- H-L-N-BT-249-GLO-003-404-BWT
- H-L-N-EW-209-GLO-001-401-KRN
The widget should zoom to the search result and display an associated popup with its asset id.
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>Search widget using custom locator</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 75px;
}
.arcgisSearch .searchGroup .searchInput {
width: 15.625rem;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map",
"esri/tasks/locator",
"esri/dijit/Search",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"dojo/domReady!"
], function (Map, Locator, Search, PictureMarkerSymbol, InfoTemplate){
var map;
var locatorUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Locators/Composite_HBR_Asset/GeocodeServer/";
map = new Map("map", {
basemap: "topo-vector",
center: [4.8, 52], // lon, lat
zoom: 9
});
var search = new Search(
{
sources: [
{
//Pass in the custom locator to the sources
locator: new Locator(locatorUrl),
singleLineFieldName: "AssetID",
outFields: ["Match_addr"],
name: "HBR_Asset",
placeholder: "H-L-N-EW-090-GLO-001-403-OWT",
highlightSymbol: new PictureMarkerSymbol("https://js.arcgis.com/3.46/esri/dijit/Search/images/search-pointer.png", 36, 36).setOffset(9, 18),
//Create an InfoTemplate
infoTemplate: new InfoTemplate("Asset ID", "ID: ${Match_addr}")
}
],
map: map,
enableSearchingAll: false,
autoComplete: true,
value: "H-L-N-EW-090-GLO-001-403-OWT"
}, "search");
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>