History of Tilburg | Historical Maps and Aerial Photos<\/A> <\/P><\/P>
The source code is below.<\/P>
<\/P>
<SPAN class="doctype token"><!DOCTYPE html><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>html<SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>head<SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>meta<SPAN class="attr-name token"> charset<SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN></SPAN> ><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/> calcite-navbar navbar-fixed-top calcite-text-light calcite-bgcolor-dark-blue<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- Menu --></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>dropdown calcite-dropdown calcite-text-dark calcite-bg-light<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">role</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>presentation<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>a</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dropdown-toggle<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">role</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>menubutton<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">aria-haspopup</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>true<SPAN class="punctuation token">"</Span></Span> <span class= 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>calcite-title-main<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>History of Tilburg<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="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>calcite-title-divider hidden-xs<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/PAN>span<\/PAN><SPAN class="punctuation token">><\/PAN><\/PAN>
<PAN class="token tag"><PAN class="token tag"><PAN class="punctuation token"><\/<PAN>span<\/PAN> <PAN class="attr-name token">class<\/PAN><PAN class="attr-value token"><PAN class="punctuation token">=<\/<PAN><PAN class="punctuation token">"<\/<PAN>calcite-title-sub hidden-xs<\/<PAN>"<\/<PAN><\/<PAN>>
Kijk terug in de tijd op oude luchtfoto's en kaarten
<pan class= "token tag">
<span>
</span>
</pan>
<pan>
</pan>
<!-- Nav -->
<ul class= "nav navbar-nav calcite-nav">
<li>
<div class= "calcite-navbar-search calcite-search-expander">
<div id= "searchWidgetDiv">
</div>
</div>
</li>
</ul>
</nav>
<!--/.calcite-navbar -->
<!-- Map -->
<div class= "calcite-map calcite-map-absolute">
<div id= "mapViewDiv">
</div>
</div>
<!-- /.calcite-map -->
<!-- Panels -->
<div class= "calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group">
<!-- Panel - About -->
<div id= "panelInfo" class= "panel collapse in">
<div id= "headingInfo" class= "panel-heading" role= "tab">
<div class= "panel-title">
<a class= "panel-toggle" role= "button" data-toggle= "collapse" href= "#collapseInfo" aria-expanded= "true" aria-controls= "collapseInfo">
<span class= "glyphicon glyphicon-info-sign" aria-hidden= "true">
</span>
<span class= "panel-label"> token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>About this map<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/SPAN>b<\/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>a<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/SPAN>a<\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>panel-close<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">role<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/Span>button<Span class="punctuation token">"<\/Span><\/Span> <Span class="attr-name token">data-toggle<Span/><Span class="attr-value token"><Span class="punctuation token">=<Span/><Span class="punctuation token">"<Span/>collapse<Span class="punctuation token">"<Span/><Span/> <Span class="attr-name token">tabindex<Span/><Span class="attr-value token"><Span class="punctuation token">=<Span/><Span class="punctuation token">"<Span/>0<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/>#panelInfo<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/>span<Span/><Span class="punctuation token">><Span/><Span/><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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://www.tensing.com/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Tensing GIS Consultancy B.V.<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>p</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="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="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>panelGuide<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>panel collapse in<SPAN class="punctuation token">"</Span></span><span class= token">:<\/SPAN> 500px<SPAN class="punctuation token">;<\/SPAN><\/SPAN><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>table<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>thead<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>tr<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>th<\/SPAN> <SPAN class="attr-name token">colspan<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>2<SPAN class="punctuation token">"<\/SPAN><\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Buttons on the right side of the screen<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/span>th<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>tr<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>thead<\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>tbody<\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>tr<\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>td<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><div<\/span> <span class="attr-name token">class<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>esri-widget--button<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>span<\/span> <span class="attr-name token">title<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>Search<span class="punctuation token">"<\/span><\/span> <span class="attr-name token">class<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>esri-icon-search<span class="punctuation token">"<\/span><\/span><span class="punctuation token">><\/span><\/spam></spam></div> Search address<span></td>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<spam></spam>
<div clas... 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>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="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>esri-widget--button<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>span<\/SPAN> <SPAN class="attr-name token">title<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>Zoom out<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>esri-icon-minus<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><\/span>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>Zooming in and out on the map<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<span>td<\/<span>><\/<span>/td<\/<span>><\/<span>/td<\/<span>>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<span>td<\/<span>><\/<span>/td<\/<span>><\/<span>/td<\/<span>><\/<span>/td<\/<span>>
<span class="token tag"><span class="token tag"><span class="punctuation token"><div</span> <span class="attr-name token">class</span>=<span class="attr-value token">"esri-widget--button"</span>></span></span>
<span class="token tag"><span class="token tag"><span title attribute and value translation></span></span>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<span title attribute value translated to "Expand" and the rest of the span remains unchanged>
<div class="esri-widget--button">
<span title="Collapse" class="esri-icon-down-arrow"></span>
</div> Group layer expand or collapse <td></td>
<tr></tr>
<tr></tr>
<td></td>
<div class='esri-widget--button'>
<span title='Visible' class='esri-icon-visible'></span>
</div>
<div class='esri-widget--button'>
<span title='Invisible' class='esri-icon-non-visible'></span>
</div> Make layer visible or invisible <td></td>
<td></td>
<div class='esri-widget--button'>
<span title='Description' class='esri-icon-description'></span>
</div> Request information about the layer <td></td>
<tr></tr>
<tr></tr>
<td colspan class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>2<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="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>esri-widget--button<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>span<\/SPAN> <SPAN class="attr-name token">title<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>Reset compass orientation<SPAN class="punctuation token">"<\/SPAN><\/SPAN> <SPAN class="attr-name token">class<\/SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=<\/SPAN><SPAN class="punctuation token">"<\/SPAN>esri-icon-dial<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>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>Reset map to north (if it is rotated)<span class="token tag"><span class="token tag"><span class="punctuation token"><br<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><br<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><b<\/span><span class="punctuation token">><\/span><\/span>Rotate map:<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/b><\/span><span class="punctuation token">><\/span><\/span> hold the right mouse button to rotate the map<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/td><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/tr><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<tbody><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<table><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div><\/span><span class="punctuation token">><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div><\/ span >< span cl ass = "comment t oken " > & lt ; ! -- \/.calcite-panels -- & gt ; < / span >
< span cl ass = "language-javascript script t oken " > < span cl ass = "t oken t ag " > & lt ; script type = "text/javascript" & gt ; < / span >
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
},
{
name: "calcite-maps",
location: "https://esri.github.io/calcite-maps/dist/js/dojo"
}]
};
< span cl ass = "t oken t ag " > & lt ; /script & gt ; < / span >
< span cl ass = "comment t oken " > & lt ; ! -- ArcGIS JS 4 -- & gt ; < / span >
< span cl ass = "language-javascript script t oken " > < span cl ass = "t oken t ag " > & lt ; script src = "https://js.arcgis.com/4.11/" & gt ; < / span >
< span cl ass = "t oken t ag " > & lt ; /script & gt ; < / span >
< span cl ass = "language-javascript script t oken " > < span cl ass = "t oken function" > require </ span >( [
// ArcGIS
"esri/WebMap",
"esri/views/MapView",
// Widgets
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esri/widgets/Expand",
"esri/geometry/Point",
"esri/tasks/Locator",
"esri/widgets/Home",
"esri/widgets/Zoom",
"esri/widgets/Compass",
"esri/widgets/Search",
"esri/widgets/ScaleBar",
"esri/widgets/Attribution",
"esri/layers/FeatureLayer",
"esri/layers/TileLayer",
"esri/layers/MapImageLayer"
class="punctuation token">,</SPAN> LayerList<SPAN class="punctuation token">,</SPAN> GroupLayer<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">/******************************************************************
*
* Create the map, view and 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">({</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="comment token">//Light gray 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>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="comment token">//Dark gray 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>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="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>portalItem<span class="punctuation token">:</span> <span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="string token"> class="punctuation token">]<\/SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Map Tilburg 1976"</SPAN><SPAN class="punctuation token">,</SPAN> visible<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> hist_kaart_Tilburg_1969 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapImageLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>url<SPAN class="punctuation token">:</SPAN> urlHistKaartTilburg<SPAN class="punctuation token">,</SPAN> sublayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1969"</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">"Map Tilburg 1969"</SPAN><SPAN class="punctuation token">,</SPAN> visible<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> hist_kaart_Tilburg_1953 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="token class-name">MapImageLayer</span><span class="punctuation token">(</span><span class="punctuation token">{</span>url<span class="punctuation token">:</span> urlHistKaartTilburg<span class="punctuation token">,</span> sublayers<span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="number token">9</span><span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="string token">"1953"</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">"Map Tilburg 1953"</span><span class="punctuation token">,</span> visible<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> hist_kaart_Tilburg_1950 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="token class-name">MapImageLayer</span><span class="punctuation token">(</span><span class="punctuation token">{</span>url<span class="punctuation token">:</span> urlHistKaartTilburg<span class="punctuation token">,</span> sublayers<span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>id<span class="punctuation token">:</span> <span class="number token">8</span><span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="string token"> <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">MapImageLayer<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">{<\/SPAN>url<SPAN class="punctuation token">:<\/SPAN> urlHistKaartTilburg<SPAN class="punctuation token">,<\/SPAN> sublayers<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN><SPAN class="punctuation token">{<\/SPAN>id<SPAN class="punctuation token">:<\/SPAN> <SPAN class="number token">2<\/SPAN><SPAN class="punctuation token">,<\/SPAN> title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"1880"<\/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">"Map Tilburg 1880"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> visible<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> hist_map_Tilburg_1792 <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">MapImageLayer<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">{<\/SPAN>url<SPAN class="punctuation token">:<\/SPAN> urlHistKaartTilburg<SPAN class="punctuation token">,<\/SPAN> sublayers<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN><SPAnclass=\"punctuationtoken\"\>{id\":1, title\":\"1792\"}<SPAnclass=\"punctuationtoken\"]\, title\":\"Map Tilburg 1792\", visible\":true} ) ;
var hist_map_Tilburg_1760 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 0, title: "1760"}], title: "Map Tilburg 1760", visible: false});
var histmapsGroupLayerTitle = "Historical Maps Tilburg";
var histmapsGroupLayer = new GroupLayer({
title: histmapsGroupLayerTitle,
visible: true,
visibilityMode: "exclusive",
layers: [hist_map_Tilburg_1976,hist_map_Tilburg_1969,hist_map_Tilburg_1953,hist_map_Tilburg_1950,hist_map_Tilburg_1945,hist_map_Tilburg_1934,hist_map_Tilburg_1924,hist_map_Tilburg_1921,hist_map_Tilburg_1914,hist_map_Tilburg_1880,hist_map_Tilburg_1792,hist_map_Tilburg_1760]
});
// Historical Aerial Photos Tilburg
var lufo_Tilburg_2018 = new TileLayer({url: baseUrlTilburg.concat("HistoricalAerialPhoto2018/MapServer"), title: "Aerial Photo Tilburg 2018", visible: false});
var lufo_Tilburg_2017 = new TileLayer({url: baseUrlTilburg.concat("HistoricalAerialPhoto2017/MapServer"), title: "Aerial Photo Tilburg 2017", visible: false});
var lufo_Tilburg_2016 = new TileLayer({url: baseUrlTilburg.concat("HistoricalAerialPhoto2016/MapServer"), title: "Aerial Photo Tilburg 2016", visible: false});
var lufo_Tilburg_2015 = new TileLayer({url: baseUrlTilburg.concat("HistoricalAerialPhoto2015/MapServer"), title: "Aerial Photo Tilburg 2015", visible: false});
var lufo_Tilburg_2014 = new TileLayer({url: baseUrlTilburg.concat("HistoricalAerialPhoto2014/MapServer"), title: "Aerial Photo Tilburg 2014", visible token">,</SPAN> visible<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> lufo_Tilburg_2013 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TileLayer</SPAN><SPAN class="punctuation token">({</SPAN>url<SPAN class="punctuation token">:</SPAN> baseUrlTilburg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">concat</SPAN><SPAN class="punctuation token">("HistorischeLuchtfoto2013/MapServer"</SPAN><SPAN class="punctuation token">),</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Aerial photo Tilburg 2013"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">})</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> lufo_Tilburg_2012 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TileLayer</SPAN><SPAN class="punctuation token">({</SPAN>url<SPAN class="punctuation token">:</SPAN> baseUrlTilburg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">concat</SPAN><SPAN class="punctuation token">("HistorischeLuchtfoto2012/MapServer"</SPAN><SPAN class="punctuation token">),</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Aerial photo Tilburg 2012"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAnclass="keyword token">false</SPAn><SPAnclass="punctuation token">}</SPAn>)<SPAnclass="punctuation token">;</SPAn>
<SPAnclass="keyword token">var</SPAn> lufo_Tilburg_2011 <SPAnclass="operator token">=</SPAn> <SPAnclass="keyword token">new</SPAn> <SPAntokenclass-name=“TileLayer”></SPAntokenclass-name=“TileLayer”><SPAnclass=“punctuationtoken”>{</SPAnclass=“punctuationtoken”}>url<SPAnclass=“punctuationtoken”>: </SPAnclass=“punctuationtoken”>baseUrlTilburg<SPAnclass=“punctuationtoken”>.</SPAnclass=“punctuationtoken”><SPAntokenfunction=“concat”>(“HistorischeLuchtfoto2011/MapServer”)</SPAntokenfunction=“concat”>, title<SPAnclass=“punctuationtoken”>: </SPAnclass=“punctuationtoken”> token">{</SPAN>url<SPAN class="punctuation token">:</SPAN> baseUrlTilburg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">concat</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"HistorischeLuchtfoto1944/MapServer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Aerial Photo Tilburg 1944"</SPAN><SPAN class="punctuation token">,</SPAN> visible<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> lufo_Tilburg_1934 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>url<SPAN class="punctuation token">:</SPAN> baseUrlTilburg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">concat</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"HistorischeLuchtfoto1934/MapServer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Aerial Photo Tilburg 1934"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</Span> luchtfotoGroupLayerTitle <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Historical Aerial Photos Tilburg"</SPAN><SPAN class="punctuation token">;</SPA
<SPAnclass= "keywordtoken ">var </SPAnluchtfotoGroupLayerTitle <SPAnoperatortoken>= </SPAnnew <SPAntokenclass-name >GroupLayer </SPAn<SPAnpunctuationtoken>( </SPAn<SPAnpunctuationtoken>{ </SPAntitle<SPAnpunctuationtoken>: </SPAnluchtfotoGroupLayerTitle<SPAnpunctuationtoken>, </SPAnvisible<SPAnpunctuationtoken>: </SPAn<keywordtoken>true </SPAn<SPAnpunctuationtoken>, </SPAnvisibilityMode<SPAnpunctuationtoken>: </SPAn<stringtoken>"exclusive" </SPAn<SPAnpunctuationtoken>, </SPAnlayers<SPAnpunctuationtoken>: </SPAn[lufo_Tilburg_2018,lufo_Tilburg_2017,lufo_Tilburg_2016,lufo_Tilburg_2015,lufo_Tilburg_2014,lufo_Tilburg_2013,lufo_Tilburg_2012,lufo_Tilburg_2011,lufo_Tilburg_2010,lufo_Tilburg_2008,lufo_Tilburg_2006,lufo_Tilburg_2002,lufo_Tilburg_1992,lufo_Tilburg_1976,lufo_Tilburg_1955,lufo_Tilburg_1944,lufo_Tilburg_1934]
} ) ;
<spanclass= "commenttoken ">// Map </span>
var map = new WebMap({
basemap: topo_RD_EsriNL
});
<spanclass= "commenttoken ">// View </span>
var mapView = new MapView({
spatialReference: 28992,
container: "mapViewDiv",
map: map,
center: new Point({x: 134000, y: 400000, spatialReference: 28992}),
zoom: 7,
padding: {
top: 50,
bottom: 0
},
ui: {components: []}
});
<spanclass= "commenttoken ">// Popup and panel sync </span>
mapView.when(function(){
CalciteMapArcGISSupport.setPopupPanelSync(mapView);
});
<spanclass= "commenttoken ">// Search - add to navbar </span>
var searchWidget = new Search({
container: "searchWidgetDiv",
view: mapView,
includeDefaultSources: false
});
searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" }), // GeocodeServer from Esri Netherlands
singleLineFieldName: "SingleLine", // This option allows searching by postal code/house number combination, for example: 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" for the English locale, "Adres of plaats zoeken" for the Dutch locale
}]
CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);
var basemapGallery = new BasemapGallery 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> mapView<SPAN class="punctuation token">,<\/SPAN>
source<SPAN class="punctuation token">:<\/SPAN> localBasemaps
<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>
expandTooltip<SPAN class="punctuation token">:<\/SPAN> basemapGallery<SPAN class="punctuation token">.<\/SPAN>label<SPAN class="punctuation token">,<\/SPAN>
view<SPAN class="punctuation token">:<\/SPAN> mapView<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> layerList <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">LayerList<\/Span><span class="punctuation token">(<spanclass=\"punctuationtoken\">{</span>
container<spanclass=\"punctuationtoken\">:<span>/span> document<spanclass=\"punctuationtoken\"><span>.</span></span><spanclass=\"tokenfunction\"><span>createElement</span></span><spanclass=\"punctuationtoken\"><span>(</span></span><spanclass=\"stringtoken\"><span>\"div\"</span></span><spanclass=\"punctuationtoken\"><span>)</span></span><spanclass=\"punctuationtoken\"><span>,</span></span>
view<spanclass=\"punctuationtoken\"><span>:</span></span> mapView<spanclass=\"punctuationtoken\"><span>,</span></span>
listItemCreatedFunction<spanclass=\"punctuationtoken\"><span>:</span></span> <spanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken\"><spanspanclass=\"keywordtoken \"></spanspanfunction</spanspan>(event<spanclass=\"punctuationtoken \">)</spanspan>{
<spankeywordconst >item = event.item;
item.actionsSections = [
[
{
title: item.layer.title,
className: "esri-icon-description",
id: "information"
}
]
];
}
})
layerList.on("trigger-action", function(event) {
if (event.action.id === "information" && event.item.layer.title !== luchtfotoGroupLayerTitle) {
// If the information action is triggered, then open the item details page of the service layer.
window.open(event.item.layer.url);
} else {
window.open(baseUrlTilburg);
}
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList.label, // optional, defaults to "Expand" for English locale
view: mapView,
content: layerList.domNode,
expanded: true,
group: "top-right"
});
var home = new Home({
view: mapView,
group: "top-right"
});
var zoom = new Zoom({
view: mapView,
group: "top-right"
});
var compass = new Compass({
view: mapView,
group: "top-right"
});
mapView.ui.add([layerListExpand, basemapGalleryExpand, home, zoom, compass], "top-right");
var scaleBar = new ScaleBar({
view: mapView,
unit: "metric"
< token">} <\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>
mapView<SPAN class="punctuation token">.<\/SPAN>ui<SPAN class="punctuation token">.<\/SPAN><SPAN class="token function">add<\/SPAN><SPAN class="punctuation token">(<\/SPAN>scaleBar<SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"bottom-left"<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>
<SPAN class="keyword token">var<\/SPAN> attribution <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">Attribution<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">{<\/SPAN>
view<SPAN class="punctuation token">:<\/SPAN> mapView
<SPAN class="punctuation token">}<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>
mapView<SPAN class="punctuation token">.<\/SPAN>ui<SPAN class="punctuation token">.<\/SPAN><SPAN class="token function">add<\/SPAN><SPAN class="punctuation token">(<\/SPAN>attribution<SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"manual"<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN>
map<SPAN class="punctuation token">.<\/SPAN>layers<SPAN class="punctuation token">.<\/SPAN><SPAN class="token function">addMany<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">[<\/SPAN>luchtfotoGroupLayer<SPAN class="punctuation token">,<\/SPAN> histkaartenGroupLayer<SPAN class="punctuation token">,<\/SPAN> tilburgLayer<SPAN class="punctuation token">]<\/SPAN><SPAN class="punctuation token">)<\/PAN><span>;\n <span>}\)</span>;<span>\n </span><span></script></span></span></span>
