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 without default UI
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to use the Search widget without explicitly using the default user interface. Instead of providing a srcNode in the widget's constructor, leave it empty. The first button searches based on a given point geometry, whereas the second uses a given value. In this specific example, the value is "Miami".It also shows how you can set your own symbol and labels for the search results. The Search by geometry displays the selected result with a PictureMarkerSymbol and the Search by value displays with a standard SimpleMarkerSymbol.
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 results in labels</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/tundra/tundra.css">
<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;
}
.shadow {
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 125px;
right: 50px;
margin: 5px;
padding: 10px;
top: 10px;
width: 190px;
z-index: 40;
}
#note {
font-size: 80%;
font-weight: 700;
padding: 0 0 10px 0;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map",
"esri/dijit/Search",
"esri/symbols/Font",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/symbols/TextSymbol",
"dijit/registry",
"dijit/form/Button",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, Search, Font, Point, SpatialReference, SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol, Color, TextSymbol, registry, Button, parser)
{
parser.parse();
var map = new Map("map", {
basemap: "gray-vector",
center: [-100, 39], // lon, lat
zoom: 4
});
//Do not provide a srcNode dom for the Search widget as the UI is not displayed.
var search = new Search({
enableLabel: true,
enableInfoWindow: false,
map: map
}, "");
search.startup();
registry.byId("searchGeo").on("click", doSearchGeo);
registry.byId("searchValue").on("click", doSearchValue);
function doSearchGeo() {
//create point from x/y and perform the search on it
var geo = new Point(-117.195646, 34.056397, new SpatialReference({
wkid: 4326
}));
//highlight symbol
var symbol = new PictureMarkerSymbol("esri_icon.png", 20, 20);
//labeling text symbol
var ls = new TextSymbol().setColor(new Color([181, 56, 46, 0.9])).setFont(new Font("24px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Arial")).setOffset(11, -5).setAlign(TextSymbol.ALIGN_START);
//No sources are explicitely set so will default to ArcGIS Online World geocoding service
search.sources[0].highlightSymbol = symbol; //set the symbol for the highlighted symbol
search.sources[0].labelSymbol = ls; //set the text symbol for the label
//performs a reverse geocode
search.search(geo);
}
function doSearchValue() {
//highlight symbol
var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 0.8),
new Color([0, 0, 0, 0.35]));
//label text symbol
var ls = new TextSymbol().setColor(new Color([0, 0, 0, 0.9])).setFont(new Font("16px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Arial")).setOffset(15, -5).setAlign(TextSymbol.ALIGN_START);
search.sources[0].highlightSymbol = sms; //set the symbol for the highlighted symbol
search.sources[0].labelSymbol = ls; //set the text symbol for the label
//If multiple results are found, it will default and select the first.
search.search("Miami");
}
}
);
</script>
</head>
<body class="tundra">
<div style="width: 100%; height: 100%; margin: 0;">
<div id="map">
<div id="feedback" class="shadow">
<div id="info">
<div id="note">
This sample uses Search widget functionality without explicitly setting the widget UI.
</div>
<button id="searchGeo" data-dojo-type="dijit/form/Button">Search by geometry
</button>
</br>
<button id="searchValue" data-dojo-type="dijit/form/Button">Search by value
</button>
</div>
</div>
</div>
</div>
</body>
</html>