Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Search using custom locator
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to work with a composite ArcGIS locator service in the Search widget. This customlocator 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>