https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis-javascript-inleiding
LayerList widget met actie
In een eerdere oefening in deze cursus hebben we een LayerList widget toegevoegd, zodat een FeatureLayer in de kaart aan en uitgezet kan worden.
Nu gaan we de deze LayerList uitbreiden met een button waarop men kan klikken om de labels van kaartlagen aan en uit te zetten.
Zoals in de code hieronder te zien is, wordt er aan elke laag in de LayerList een knop toegevoegd met als icoon een labeltje. En vervolgens is er een functie die wacht tot er op deze knop geklikt wordt, om de labels bij de betreffende laag aan (of juist uit) te zetten.
Voor meer achtergrondinformatie over hoe dit werkt is er ook een voorbeeld van Esri beschikbaar: LayerList widget with actions | ArcGIS API for JavaScript 4.14
Volg de link hieronder om het eindresultaat te zien:
Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten
<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 - Labels aan- of uitzetten<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></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.14/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.14/<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-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="selector token">.esri-basemap-gallery__item-thumbnail</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> auto<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="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/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/widgets/LayerList"</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="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> FeatureLayer<SPAN class="punctuation token">,</SPAN> LayerList<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> <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> lightGrayCanvas_RD_EsriNL
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> popupTemplateMun <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Gemeente {Gemeentenaam}"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"CBS Code: {GM_Code}"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> rendererMun <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.5</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#F5B041"</SPAN><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> labelClassMun <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#F5B041"</SPAN><SPAN class="punctuation token">,</SPAN> haloColor<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">,</SPAN> haloSize<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"4px"</SPAN><SPAN class="punctuation token">,</SPAN> font<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> labelExpressionInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>expression<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"$feature.Gemeentenaam"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> dutchMunicipalitiesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Gemeenten (2019)"</SPAN><SPAN class="punctuation token">,</SPAN>
popupTemplate<SPAN class="punctuation token">:</SPAN> popupTemplateMun<SPAN class="punctuation token">,</SPAN>
renderer<SPAN class="punctuation token">:</SPAN> rendererMun<SPAN class="punctuation token">,</SPAN>
labelingInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>labelClassMun<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
labelsVisible<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>
<SPAN class="keyword token">var</SPAN> popupTemplateProv <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Provincie {Provincienaam}"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> rendererProv <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2.5</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#8B4513"</SPAN><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> labelClassProv <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#8B4513"</SPAN><SPAN class="punctuation token">,</SPAN> haloColor<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">,</SPAN> haloSize<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"4px"</SPAN><SPAN class="punctuation token">,</SPAN> font<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN> weight<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bold"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> labelExpressionInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>expression<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"$feature.Provincienaam"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> dutchProvincesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/nSZVuSZjHpEZZbRo/ArcGIS/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Provincies (2019)"</SPAN><SPAN class="punctuation token">,</SPAN>
popupTemplate<SPAN class="punctuation token">:</SPAN> popupTemplateProv<SPAN class="punctuation token">,</SPAN>
renderer<SPAN class="punctuation token">:</SPAN> rendererProv<SPAN class="punctuation token">,</SPAN>
labelingInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>labelClassProv<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
labelsVisible<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>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>dutchMunicipalitiesLayer<SPAN class="punctuation token">,</SPAN> dutchProvincesLayer<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> layerList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
listItemCreatedFunction<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">const</SPAN> item <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">;</SPAN>
item<SPAN class="punctuation token">.</SPAN>actionsSections <SPAN class="operator 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">"Labels aanzetten"</SPAN><SPAN class="punctuation token">,</SPAN>
className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-labels"</SPAN><SPAN class="punctuation token">,</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"labels"</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="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
layerList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"trigger-action"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"labels"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">===</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Labels uitzetten"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Labels aanzetten"</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="punctuation token">;</SPAN>
layerListExpand <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-layer-list"</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> layerList<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> layerList<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>
<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>
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>
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>
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>
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> layerListExpand<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></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>
