https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding
Compass Widget
Ja, een goede kaart hoort noordgericht te zijn... maar soms is het ook leuk of nuttig om de plattegrond te draaien, om deze vanuit een ander perspectief te bekijken.
Met de ArcGIS API for JavaScript 4.x maak je een web map die door de gebruiker gedraaid kan worden (dit is standaardfunctionaliteit).
De kaart draaien, hoe doe je dat? Met de cursor op de kaart, de rechter muisknop ingedrukt houden en dan slepen. (Ja, misschien moet je dat even aan de eindgebruikers uitleggen. Het is immers niet heel intuïtief; het heeft bij mij ook een tijdje geduurd voordat ik dit in de gaten had...)
In deze oefening voegen we een Compass widget toe, die de gebruiker in staat stelt om de kaart weer naar het noorden te draaien nadat men de kaart gedraaid heeft ("Kompasoriëntatie resetten"). Let op: met deze knop kan men de kaart dus niet roteren, dat moet met een rechter-muisknop-sleepactie gedaan worden. Alleen als men de kaart weer naar het noorden wil draaien, dan moet men op de kompasknop klikken.
Hieronder staat de broncode. Klik hier om te zien hoe het draaien van de kaart werkt.
<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1, maximum-scale<SPAN class="punctuation token">=</SPAN>1, user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Aan de slag met ArcGIS JavaScript - Kaart draaien<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="selector token">html, body, #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.11/esri/css/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.11/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/layers/WMTSLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/tasks/Locator"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/Basemap"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/BasemapGallery"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/BasemapGallery/support/LocalBasemapsSource"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/Expand"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/Compass"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> WMTSLayer<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Locator<SPAN class="punctuation token">,</SPAN> Basemap<SPAN class="punctuation token">,</SPAN> BasemapGallery<SPAN class="punctuation token">,</SPAN> LocalBasemapsSource<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">,</SPAN> Compass<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// BRT Achtergrondkaart van PDOK als achtergrondkaart</SPAN>
<SPAN class="keyword token">var</SPAN> brtachtergrondkaart <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
baseLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WMTSLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS"</SPAN><SPAN class="punctuation token">,</SPAN>
copyright<SPAN class="punctuation token">:</SPAN>
<SPAN class="string token">"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>"</SPAN><SPAN class="punctuation token">,</SPAN>
activeLayer<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"brtachtergrondkaart"</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BRT Achtergrondkaart (PDOK)"</SPAN><SPAN class="punctuation token">,</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"brtachtergrondkaart_pdok"</SPAN><SPAN class="punctuation token">,</SPAN>
thumbnailUrl<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"images/map.jpg"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// Basiskaarten Esr Nederland</SPAN>
<SPAN class="keyword token">var</SPAN> lightGrayCanvas_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"9ff6521e85d24df1aa9cd4aebfef748b"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Lichtgrijze Canvas RD</SPAN>
<SPAN class="keyword token">var</SPAN> darkGrayCanvas_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"62a3befb579e4d9f9c5c51576c8a7c25"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Donkergrijze Canvas RD</SPAN>
<SPAN class="keyword token">var</SPAN> topo_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"7aea6fa913a94176a1074edb40690318"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Topo RD</SPAN>
<SPAN class="keyword token">var</SPAN> open_Topo_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"0698b71eb7cf47898086d072e574ac32"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Open Topo RD</SPAN>
<SPAN class="keyword token">var</SPAN> stratenkaart_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"9fe1a753955f418fa1cbaf1c47610a47"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Stratenkaart RD</SPAN>
<SPAN class="keyword token">var</SPAN> luchtfoto_RD_EsriNL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Basemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"38e1a1c6ee2c421290622400d22ecf57"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Luchtfoto RD</SPAN>
<SPAN class="keyword token">var</SPAN> dutchBasemaps <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LocalBasemapsSource</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
basemaps <SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>brtachtergrondkaart<SPAN class="punctuation token">,</SPAN> topo_RD_EsriNL<SPAN class="punctuation token">,</SPAN> open_Topo_RD_EsriNL<SPAN class="punctuation token">,</SPAN> stratenkaart_RD_EsriNL<SPAN class="punctuation token">,</SPAN> luchtfoto_RD_EsriNL<SPAN class="punctuation token">,</SPAN> lightGrayCanvas_RD_EsriNL<SPAN class="punctuation token">,</SPAN> darkGrayCanvas_RD_EsriNL<SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
basemap<SPAN class="punctuation token">:</SPAN> topo_RD_EsriNL
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">28992</SPAN><SPAN class="punctuation token">,</SPAN>
container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
center<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>x<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">155000</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">463000</SPAN><SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">28992</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> compass <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Compass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
view<SPAN class="punctuation token">:</SPAN> view
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>compass<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
source<SPAN class="punctuation token">:</SPAN> dutchBasemaps
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
basemapGalleryExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-basemap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/</SPAN>
expandTooltip<SPAN class="punctuation token">:</SPAN> basemapGallery<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">,</SPAN>
view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
content<SPAN class="punctuation token">:</SPAN> basemapGallery<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN>
group<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-right"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
includeDefaultSources<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
searchWidget<SPAN class="punctuation token">.</SPAN>sources <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
locator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// GeocodeServer van Esri Nederland</SPAN>
singleLineFieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"SingleLine"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38</SPAN>
placeholder<SPAN class="punctuation token">:</SPAN> searchWidget<SPAN class="punctuation token">.</SPAN>allPlaceholder <SPAN class="comment token">// "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
searchWidgetExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-search"</SPAN><SPAN class="punctuation token">,</SPAN>
expandTooltip<SPAN class="punctuation token">:</SPAN> searchWidget<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">,</SPAN>
view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
content<SPAN class="punctuation token">:</SPAN> searchWidget<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN>
expanded<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
group<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-right"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>searchWidgetExpand<SPAN class="punctuation token">,</SPAN> basemapGalleryExpand<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
