<\/A><\/P><\/P>
Viel Spaß beim Programmieren!<\/P>
<\/P>
Egge-Jan<\/P>
<\/P>
buurmalsen = { "extent": { "spatialReference": { "wkid": 28992 }, "xmax": 149563.92921902513, "xmin": 147692.26297569263, "ymax": 434331.74646668794, "ymin": 433315.7444346839 }, "name": "Buurmalsen" }<SPAN class="doctype token"><!DOCTYPE html><\/SPAN>\n<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>html<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>\n<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>head<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>\n <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>\n <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>"viewport" <Span class=attr-name token>content<Span>=<Span>"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><Span>\n <Span class=token tag><meta name=description content= "ArcGIS JS v4, Calcite Maps and Bootstrap Example"><Span>\n <Span class=token tag><title>Gemeente West Betuwe</title><Span>\n <Span class=comment token><!-- Calcite Maps Bootstrap --><Span>\n <Span class=token tag><link rel=stylesheet href= "https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css"><Span>\n <Span class=comment token><!-- Calcite Maps --><Span>\n <Span class=token tag><link rel=stylesheet href= "https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css"><Span>\n <Span class=comment token><!-- ArcGIS JS 4 --><Span>\n <Span class=token tag><link rel=stylesheet href= "https://js.arcgis.com/4.11/esri/css/main.css"><Span>\n <Span class=language-css style token><style>\n html, body {\n margin: 0;\n padding: 0;\n height: 100%;\n width: 100%;\n }\n </style><Span>\n</head><Span>\n<body class= "calcite-maps calcite-nav-top"><Span>\n <!-- Navbar --><Span>\n <nav class= "navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bgcolor-dark-blue"><Span>\n <!-- Menu --><Span>\n <div class= "dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role= "presentation"><Span>\n <a class= "dropdown-toggle" role= "menubutton" aria-haspopup= "true" aria-expanded= "false" tabindex= "0"><Span>\n <div class= "calcite-dropdown-toggle" class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>span<\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>sr-only<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Dropdown-Menü umschalten<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/SPAN>span<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>span<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/SPAN>span<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>span<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/PAN>span<\/PAN><PAN class="punctuation token">><\/PAN><PAN>
<PAN class="token tag"><PAN class="token tag"><PAN class="punctuation token"><\/<PAN>span<\/PAN><PAN>
<PAN class="token tag"><PAN class="token tag"><PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
<PAN>
Over deze kaart<SPANTAG></SPANTAG> Über diese Karte<SPANTAG></SPANTAG> <!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main">Gemeente West Betuwe</span>
<span class="calcite-title-divider hidden-xs"></span>
<span class="calcite-title-sub hidden-xs">Die Gemeinde West Betuwe besteht aus 26 Kernen</span>
</div><!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li>
<div class="calcite-navbar-search calcite-search-expander">
<div id="searchWidgetDiv"></div>
</div>
</li>
</ul><!--/ .calcite-navbar --><!-- Map --><div class="calcite-map calcite-map-absolute"> 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>mapViewDiv<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>div<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="comment token"><!-- \/.calcite-map --><\/SPAN>
<SPAN class="comment token"><!-- Panels --><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>div<\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="comment token"><!-- Panel - About --><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/PAN>div<\/PAN> <SPAN class="attr-name token">id<\/PAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/PAN><SPAN class="punctuation token">"<\/PAN>panelInfo<SPAnclass=\"punctuationtoken\">"<SPAnclass=\"punctuationtoken\"><SPAnclass=\"punctuationtoken\"></SPAnclass></SPAnclass></SPAnclass></span> <spanclass=\"attr-nametoken\">class</span><spanclass=\"attr-valuetoken\"><spanclass=\"punctuationtoken\">=</span><spanclass=\"punctuationtoken\">"</span>panel collapse in<spanclass=\"punctuationtoken\">"</span></span><spanclass=\"punctuationtoken\">></span></span>
<spanclass=\"tokentag\"><spanclass=\"tokentag\"><spanclass=\"punctuationtoken\"></</span>div</span><spanclass=\"punctuationtoken\">></span></span>
<spanclass=\"tokentag\"><spanclass=\"tokentag\"><spanclass=\"punctuationtoken\"><div</span> <spanclass=\"attr-nametoken\">id</span><spanclass=\"attr-valuetoken\"><spanclass=\"punctuationtoken\">=</span><spanclass=\"punctuationtoken\">"</span>collapseInfo<spanclass=\"punctuationtoken\">"</span></span> <spanclass=\"attr-nametoken\">class</span><spanclass=\"attr-valuetoken\"><spanclass=\"punctuationtoken\">=</span><spanclass=\"punctuationtoken\">"</span>panel-collapse collapse in<spanclass=\"punctuationtoken\">"</span></span> <spanclass=\"attr-nametoken\">role</span><spanclass=\"attr-valuetoken\"><spanclass=\"punctuationtoken\">=</span><spanclass=\"punctuationtoken\">"</span>tabpanel<spanclass=\"punctuationtoken\">"</span></span> <spanclass=\"attr-nametoken\">aria-labelledby</span><spanclass=\"attr-valuetoken\"><spanclass=\"punctuationtoken\">=</span><spanclass=\"punctuationtoken\">"</span>headingInfo<spanclass=\"punctuationtoken\">"</span></span><spanc lass=punctuation-token"></div>
<spanc lass=panel-body">
<spanc lass=a href= class="punctuation token">"<\/SPAN>https:\/\/www.westbetuwe.nl\/<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">target<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>_blank<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">title<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>West Betuwe<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>img<\/SPAN> <SPAN class="attr-name token">src<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>https:\/\/www.westbetuwe.nl\/sites\/all\/themes\/westbetuwe\/logo.svg<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">alt<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/Span>West Betuwe<Span class="punctuation token">"<\/Span><Span><Span> <Span>width<Span>=<Span> class="punctuation token">,</SPAN>
<SPAN class="comment token">// Bootstrap</SPAN>
<SPAN class="string token">"bootstrap/Collapse"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"bootstrap/Dropdown"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="comment token">// Calcite Maps</SPAN>
<SPAN class="string token">"calcite-maps/calcitemaps-v0.10"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="comment token">// Calcite Maps ArcGIS Support</SPAN>
<SPAN class="string token">"calcite-maps/calcitemaps-arcgis-support-v0.10"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>WebMap<SPAN class="punctuation token">,</SPAN> MapView<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> Point<SPAN class="punctuation token">,</SPAN> Locator<SPAN class="punctuation token">,</SPAN> Home<SPAN class="punctuation token">,</SPAN> Zoom<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> ScaleBar<SPAN class="punctuation token">,</SPAN> Attribution<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> LayerList<SPAN class="punctuation token">,</SPAN> Bookmarks<SPAN class="punctuation token">,</SPAN> Collapse<SPAN class="punctuation token">,</SPAN> Dropdown<SPAN class="punctuation token">,</SPAN> CalciteMaps<SPAN class="punctuation token">,</SPAN> CalciteMapArcGISSupport<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">/******************************************************************
*
* Erstellen Sie die Karte, Ansicht und Widgets
*
******************************************************************/</SPAN>
<SPAN class="comment token">// Basemaps 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">({portalItem:{id:"9ff6521e85d24df1aa9cd4aebfef748b"}}); </span><span class="comment token">//Lichtgrauer 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">({portalItem:{id:"62a3befb579e4d9f9c5c51576c8a7c25"}}); </span><span class="comment token">//Dunkelgrauer 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">({portalItem:{id:"7aea6fa913a94176a1074edb40690318"}}); </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">({portalItem:{id:"0698b71eb7cf47898086d072e574ac32"}}); </span><span class="comment token">//Offener 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">({portalItem:{id:"9fe1a753955f418fa1cbaf1c47610a47"}}); </span><span class="comment token">//Straßenkarte 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">({portalItem:{id:"38e1a1c6ee2c421290622400d22ecf57"}}); </span><span class="comment token">//Luftfoto RD
<span class='keyword'>var </span>localBasemaps <spanclass='operator'>= </sp anclass='keyword'>new </sp anclass='tokenclass-name'>LocalBasemapsSource(sp anclass='p un ctuationtoken'>{
basemaps : [topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL,darkGrayCanvas_RD_EsriNL]
});
<spanclass='keyword'>var </sp anmunicipalitiesRenderer <sp anclass='operator'>= {
"type": "simple",
"symbol": {
"color": [
193,
157,
188,
0
],
"outline": {
"width": 3,
"color": [255, 0, 0, 255]
},
"type": "simple-fill",
"style": "solid"
}
};
var westBetuweLayer = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
definitionExpression: "Gemeentenaam = 'West Betuwe'",
renderer<SPAN class="punctuation token">:<\/SPAN> municipalitiesRenderer<SPAN class="punctuation token">, <\/SPAN>\n\t\t title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"Gemeente West Betuwe"<\/SPAN>\n\t <SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>\n\n <SPAN class="comment token">\/\/ Karte<\/SPAN>\n\t\t<SPAN class="keyword token">var<\/SPAN> map <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">WebMap<\/SPAN><SPAN class="punctuation token">({<\/SPAN>\n \t basemap<SPAN class="punctuation token">:<\/SPAN> topo_RD_EsriNL<SPAN class="punctuation token">, <\/SPAN>\n\t\t bookmarks<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN><SPAN class="punctuation token">]<\/SPAN>\n \t<SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>\n \n <SPAN class="comment token">\/\/ Ansicht<\/SPAN>\n\t\t<SPAN class="keyword token">var<\/SPAN> centerPoint <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">Point<\/SPAN><SPAN class="punctuation token">({<\/SPAN>\n\t\t x<SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">141000<\/SPAN><SPAN class="punctuation token">, <\/span>\n\t\t y<span class="punctuation token">:<\/span> <span class="number token">431000<\/span><span class="punctuation token">, <\/span>\n\t\t spatialReference<span class="punctuation token">:<\/span> <span class="number token">28992<\/span>\n\t\t<span class="punctuation token">}<\/span><span class="punctuation token">)<\/span><span class="punctuation token">;<\/span>\n\n <span class="keyword token">var<\/span> mapView <span class="operator token">=<\/span> <span class="keyword token">new<\/span> <span class="token class-name">MapView<\/span><span class="punctuation token">({<\/span>\n \tspatialReference<span class="punctuation token">:<\/span> <span class="number token">28992<\/span><span class="punctuation token">, <\/span>\n container<span class="punctuation token">:<\/span> <span class="string token">"mapViewDiv"<\/span><span class="punctuation token">, <\/span>\n map<span class="punctuation token">:<\/span> map<span class="punctuation token">, <\/span>\n \tcenter<span class="punctuation token">:<\/span> centerPoint<span class="punctuation token">, <\/span>\n \tzoom<span class="punctuation token">:<\/span> <span class="number token">7<\/span><span class="punctuation token">, <\/span>\n padding<span class="punctuation token">:{<\/span>\n top<span class="punctuation token">:<\/span> <span class="number token">50<\/span><span class="punctuation token">, <\/span>\n bottom<span class="punctuation token">:<\/span> <span class="number token">0<\/span>\n <span class="punctuation token">}<\/span><span class="punctuation token">, <\/span>\n ui<span class="punctuation token">:{components<span class="punctuation token">:[<\/span><span class="punctuation token"]}< span>
</p>
</div>
<!-- Rest of the code remains unchanged -->
</body>
</html> token">"name"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"Acquoy"<\/SPAN><SPAN class="punctuation token">} <\/SPAN>\n\t\t<SPAN class="keyword token">var<\/SPAN> asperen <SPAN class="operator token">=<\/SPAN> <SPAN class="punctuation token">{<\/SPAN><SPAN class="string token">"extent"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">{<\/SPAN><SPAN class="string token">"spatialReference"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">{<\/SPAN><SPAN class="string token">"wkid"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">28992<\/SPAN><SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"xmax"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">136622.16178165673<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"xmin"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">134750.49553832423<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"ymax"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">432993.0739315419<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"ymin"<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">431977.0718995378<\/SPAN><SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"name"<\/Span><span class='punctuation'>:<\/span> <span class='string'>"Asperen"</span><span class='punctuation'>}</span>
<span class='keyword'>var</span> beesd <span class='operator'>=</span> <span class='punctuation'>{</span><span class='string'>"extent"</span><span class='punctuation'>:</span> <span class='punctuation'>{</span><span class='string'>"spatialReference"</span><span class='punctuation'>:</span> <span class='punctuation'>{</span><span class='string'>"wkid"</span><span class='punctuation'>:</span> <span class='number'>28992</span><span class='punctuation'>}</span>, <span class='string'>"xmax"</span><span class='punctuation'>:</span> <span class='number'>143550.49825170927</span>, <span class='string'>"xmin"</span><span class='punctuation'>:</span> <span class='number'>139807.16576504428</span>, <span class='string'>"ymax"</span><span class='punctuation'>:</span> <span class='number'>434558.7619750061</span>, <span class='string'>"ymin"</span><span class='punctuation'>:</span> <span class='number'>432526.75791099796</span>}</span>, <span class='string'>"name"</span><span class='punctuation'>:</span> <span class='string'>"Beesd"</span>}</p>
<p><code><var>