Hi everybody,
I've built a custom address locator and I want to create a web page using it. My goal is to have a page with the "search" space as with the search widget but i want the result of the request to be an array with all results (if needed) where it's possible to select which results to show on the map.
I've tried starting with:
Locator | API Reference | ArcGIS API for JavaScript 4.0
and this:
Search Widget 3D | ArcGIS API for JavaScript 4.0
So it works but I don't have an array and only the first result of "Match_addr" is shown...
If someone has already done this it would be very usefull or if somebody has an idea?
Thanks a lot
Guillaume Golay
One example of working code (this one is using 3.17 API update but same thing with 4.0):
<!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.17/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.17/"></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 = "http://s011656v.adacv.ad.etat-de-vaud.ch:6080/arcgis/rest/services/TEST/LOC_VD_GEOPORTAIL/GeocodeSer...";
map = new Map("map", {
basemap: "topo",
center: [6.6, 46.5], // lon, lat
zoom: 10
});
var search = new Search(
{
sources: [
{
//Pass in the custom locator to the sources
locator: new Locator(locatorUrl),
singleLineFieldName: "SingleKey",
outFields: ["*"],
name: "VD_GEOPORTAIL",
placeholder: "exemple: Place de la Riponne Lausanne 1005",
highlightSymbol: new PictureMarkerSymbol("https://js.arcgis.com/3.17/esri/dijit/Search/images/search-pointer.png", 36, 36).setOffset(9, 18),
//Create an InfoTemplate
infoTemplate: new InfoTemplate("Match_addr", "${Match_addr}")
}
],
map: map,
enableSearchingAll: false,
autoComplete: true,
value: "exemple: Place de la Riponne Lausanne 1005"
}, "search");
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
