Haz clic aquí para ver la barra de búsqueda combinada en acción.<\/A><\/P><\/P>
<!DOCTYPE html><\SPAN>
<<\SPAN>html<\SPAN>><\SPAN>
<<\SPAN>head<\SPAN>><\SPAN>
<<\SPAN>meta<\SPAN> charset<\SPAN>=<\SPAN>"<\SPAN>utf-8"<\SPAN>><\SPAN>
<<\SPAN>meta<\SPAN> name<\SPAN>=<\SPAN>"<\SPAN>viewport"<\SPAN> content<\SPAN>=<\SPAN>"<\SPAN>initial-scale=<\SPAN>1, maximum-scale=<\SPAN>1, user-scalable=<\SPAN>no"<\SPAN>><\SPAN>
<<\SPAN>title<\SPAN>><
>Aan de slag met ArcGIS JavaScript - Meerdere zoekbronnen</title>
<style>
html, body, #viewDiv{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/tasks/Locator"
], function(Map, Point, MapView, FeatureLayer, Search, Locator) {
var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Topo RD
}
}
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});
var featureLayerGemeenten = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "Gemeente {Gemeentenaam} </br>CBS Code: {GM_Code}",
overwriteActions: true
}
});
var searchWidget = new Search({
view: view,
allPlaceholder: "Gemeente of Adres",
sources: [
{
layer: featureLayerGemeenten,
searchFields:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">[ "Gemeentenaam" , "GM_Code" ] </ SPAN > ,
suggestionTemplate:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">"{Gemeentenaam} ({GM_Code})" </ SPAN > ,
exactMatch: f a l s e </ SPAN > ,
outFields:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">[ "Gemeentenaam" , "GM_Code" ] </ SPAN > ,
name:"Gemeente in Nederland (2019)" </ SPAN > ,
placeholder:"bijvoorbeeld: Vijfheerenlanden" </ SPAN >
} </ SPAN > ,
{ </ SPAN >
locator:< / SPAN > < SPAN cl ass ="k e y w o r d to k e n ">new </ SPAN > < SPAN cl ass ="t o k e n c l a s s - n a m e ">Locator </ SPAN > ( < SPAN cl ass ="p un c t u a t i o n to k e n ">{ </ SPAN > url:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">"https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" </ SPAN > } ) , </ SPAN > // GeocodeServer van Esri Nederland </ SPAN >
singleLineFieldName:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">"SingleLine" </ SPAN > , // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38 </ SPAN >
placeholder:< / SPAN > < SPAN cl ass ="s t r i n g to k e n ">"Adres zoeken" </ SPAN > , // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale </ SPAN >
name:"Adres in Nederland" </ SPAN >
} </ SPAN >
] , </ SPAN >
includeDefaultSources: f a l s e </ SPAN >
} ) ;
view.ui.add([searchWidget], "top-right");
}) ;
< span >< < EM O J I _ 3 3 >> </ span >< span >< < EM O J I _ 3 4 >> </ span >< span >< < EM O J I _ 3 5 >> </ span >< span >< < EM O J I _ 3 6 >> </ span >< span >< < EM O J I _ 3 7 >> </ span >< span >< < EM O J I _ 3 8 >> </ span >< span >< < EM O J I _ 3 9 >> </ span >< span >< < EM O J I _ 4 0 >> </ span >< span >< < EM O J I _ 4 1 >> </ span >< span >< < EM O J I _ 4 2 >> </ span >< span >< < EM O J I _ 4 3 >> </ span >< span >< < EM O J I _ 4 4 >> </ span >< span >< < EM O J I _ 4 5 >> </ span >< span >< < EM O J I _ 4 6 >> </ span >< span >< < EM O J I _ 4 7 >> </ span >< span >< < EM O J I _ 4 8 >> </ span >< span >< < EM O J I _ 4 9 >> </ span >< span >< < EM O J I _ 5 0 >> </ span >< span >< < EM O J I _ 5 1 >> </ span >< span >< < EM O J I _ 5 2 >> </ span >< span >< < EM O J I _ 5 3 >> </ span >< span >< < EM O J I _ 5 4 >> </ span >< span >< < EM O J I _ 5 5 >> </ span >< span >< < EM O J I _ 5 6 >> </ span >< span >< < EM O J I _ 5 7 >> </ span >< span >< < EM O J I _ 5 8 >> </ span >< span >< < EM O J I _ 5 9 >> </ span >< span >< < EM O J I _ 6 0 >> </ span >< span >< < EM O J I _ 6 1 >> </ span >< span >< < EM O J I _62>> </spa...
