Geschiedenis van Tilburg | Historische Kaarten en Luchtfoto's<\/A> <\/P><\/P>
Le code source est ci-dessous.<\/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="punctuation token">=<\"</SPAN>utf-8<SPAN class="punctuation token">\"></SPAN></SPAN> <SPAN class="punctuation token">><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>meta name=description content=ArcGIS JS v4, Calcite Maps and Bootstrap Example><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>title>Histoire de Tilburg | Cartes Historiques et Photos Aériennes</title><\/><\/><\/></SPAN>
<SPAN class="comment token"><!-- Calcite Maps Bootstrap --><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>link rel=stylesheet href=https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css><\/><\/><\/></SPAN>
<SPAN class="comment token"><!-- Calcite Maps --><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>link rel=stylesheet href=https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css><\/><\/><\/></SPAN>
<SPAN class="comment token"><!-- ArcGIS JS 4 --><\/><\/><\/></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/>link rel=stylesheet href=https://js.arcgis.com/4.11/esri/css/main.css><\/><\/><\/></SPAN>
<STYLE>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
panel {
width: 500px;
}
table, th, tr, td {
border: 1px solid #D3D3D3;
padding: 5px;
}
td {
width: 250px;
vertical-align: bottom;
}
</STYLE>
<\/>head>
<body class=calcite-maps calcite-nav-top>
<!-- Navbar -->
<nav class=navbar 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><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><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><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><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><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">aria-expanded</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPA N>false</SPA N><SPA Nclass= 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>Histoire de 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<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/PAN>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-sub hidden-xs<Span class="punctuation token">"<Span><Span>Kijk terug in de tijd op oude luchtfoto's en kaarten<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><\/<Span>span<Span><Span>><Span><Span>
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><\/<Span>div<Span><Span>><Span>
<Span class="comment token"><!-- Nav --><Span>
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><ul<Span> <Span class="attr-name token">class<Span><Span>=<Span><Span>"nav navbar-nav calcite-nav"<Span><Span>><Span>
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><li<Span>><Span>
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><div<Span> <Span class="attr-name token">class<Span>=<Span>"calcite-navbar-search calcite-search-expander"<Span><Span>><Span>
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"><div<Span> <Span id= "searchWidgetDiv" >< Span > < / div >
< Span > < / div >
< Span > < / li >
< Span > < / ul >
< Span > < / nav >
< Span > <!-- /.calcite-navbar -->
< Span > <!-- Map -->
< Span > <div< Span > < Span class = "calcite-map calcite-map-absolute" >< Span > </ div >
< Span id = "mapViewDiv" >< Span > </ div >
< Span > </ div >
< Span > <!-- /.calcite-map -->
< Span > <!-- Panels -->
< Span > <div class = "calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group" >< Span >
< Span > <!-- Panel - About -->
< Span id = "panelInfo" class = "panel collapse in" >< Span >
< Span id = "headingInfo" class = "panel-heading" role = "tab" >< Span >
< Span class = "panel-title" >< Span >
< Span class = "panel-toggle" role = "button" data-toggle = "collapse" href = "#collapseInfo" aria-expanded = "true" aria-controls = "collapseInfo" >< Span >< Span class = "glyphicon glyphicon-info-sign" aria-hidden = "true" >< Span >< Span >< Span class = "panel-label" >< Span> token">><\/SPAN><\/SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>À propos de cette carte<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 attr-name token>data-toggle<Span attr-value token>=<Span punctuation token> <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= 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>Boutons sur le côté droit de l'écran<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">"esri-widget--button"<\/span><span class="punctuation token">><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><\/<\/span>div<\/span><spanspanclass=esri-widget--button></spanspan></div>Rechercher une adresse<spanclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td>
<spantagclass=esri-widget--button></spanspan></td> 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>Diminuer le zoom<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<SPAnclass=esri-icon-minus></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>In- en uitzoomen op de kaart<SPAnclass=esri-icon-minus>In- en uitzoomen op de kaart</SPAnclass=esri-icon-minus><SPAnclass=esri-icon-minus>In- en uitzoomen op de kaart</SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAnclass=esri-icon-minus>
<SPAntag><SPAntag><PunctuationToken><\/<PunctuationToken>td<PunctuationToken>></PunctuationToken><PunctuationToken><td></PunctuationToken><PunctuationToken><div</PunctuationToken> <AttrNameToken>class</AttrNameToken>=<AttrValueToken>"</AttrValueToken>esri-widget--button<AttrValueToken>"</AttrValueToken>>
<SpanTag title="Déplier" class="esri-icon-right-triangle-arrow"></SpanTag>
</div>></div>>
Déplier ou replier un groupe de couches
</td>>
</tr>>
</tr>>
<td>
<div class="esri-widget--button">
<SpanTag title="Visible" class="esri-icon-visible"></SpanTag>
</div>>
<div class="esri-widget--button">
<SpanTag title="Invisible" class="esri-icon-non-visible"></SpanTag>
</div>>
Rendre une couche visible ou invisible
</td>>
</tr>>
</tr>>
<td>
<div class="esri-widget--button">
<SpanTag title="Description" class="esri-icon-description"></SpanTag>
</div>>
Obtenir des informations sur la couche
</td>>
</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>Réinitialiser l'orientation de la boussole<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>Remettre la carte vers le nord (si elle est tournée)<span class="token tag"><span class="token tag"><span class="punctuation token"><br><\/span><\/span><span class="token tag"><span class="token tag"><span class="punctuation token"><br><\/span><\/span><b>Faire pivoter la carte :<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<b>><\/span><\/span> maintenez le bouton droit de la souris enfoncé pour faire tourner la carte<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<td>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<tr>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<tbody>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<table>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div>><\/span><\/span>
<span class="token tag"><span class="token tag"><span class="punctuation token"><\/<div>><\/span><\/span>
<span class="comment token"><!-- \/.calcite-panels --><\/span>
<script type=\"text/javascript\">
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"
}]
};
<\/<script>
<!-- ArcGIS JS 4 -->
<script src=\"https://js.arcgis.com/4.11/\"></script>
<script>
require([
// 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",
"esri/widgets/LayerList",
"esri/layers/GroupLayer",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
// Calcite Maps
"calcite-maps/calcitemaps-v0.10",
// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.10",
"dojo/domReady!"
], function(WebMap, MapView, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Point, Locator, Home, Zoom, Compass, Search, ScaleBar, Attribution, FeatureLayer, TileLayer, 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">/******************************************************************
*
* Créer la carte, la vue et les 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">// 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>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">// 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>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">"0698b71eb7cf47898086d072e574ac32"</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 > New Basemap ( { portalItem : { id : class="punctuation token">]<\/SPAN><SPAN class="punctuation token">, <\/SPAN> title<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token">"Carte 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">"Carte 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">"Carte 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 > MapImageLayer(<SPAn clasS= "puncTuation toKen ">{</SPAn >url: urlHistKaartTilburg, sublayers: [{id: 8, title: "1950"}], title: "Carte Tilburg 1950", visible: false}) ;
var hist_kaart_Tilburg_1945 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 7, title: "1945"}], title: "Carte Tilburg 1945", visible: false});
var hist_kaart_Tilburg_1934 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 6, title: "1934"}], title: "Carte Tilburg 1934", visible: false});
var hist_kaart_Tilburg_1924 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 5, title: "1924"}], title: "Carte Tilburg 1924", visible: false});
var hist_kaart_Tilburg_1921 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 4, title: "1921"}], title: "Carte Tilburg 1921", visible: false});
var hist_kaart_Tilburg_1914 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 3, title: "1914"}], title: "Carte Tilburg 1914", visible: false});
var hist_kaart_Tilburg_1880 <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">"Carte 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_kaart_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><SPAN class="punctuation token">{<\/Span>id<Span class="punctuation token">:<Span> <Span class="number token">1</Span><Span class= 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><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Photo aérienne 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><SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Photo aérienne Tilburg 2012"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAnclass= 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">"Luchtfoto 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">"Luchtfoto 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">"Historische Luchtfoto's Tilburg"</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> luchtfotoGroupLayer <span class="operator token">=</span> <span class="keyword token">new</span> <span class="token class-name">GroupLayer</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
title<span class="punctuation token">:</span> luchtfotoGroupLayerTitle<span class="punctuation token">,</span>
visible<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
visibilityMode<span class="punctuation token">:</span> <span class="string token">"exclusive"</span><span class="punctuation token">,</SPAN>
layers<span class="punctuation token">:</SPAN> [lufo_Tilburg_2018<span class="punctuation token">,</SPAN>lufo_Tilburg_2017<span class="punctuation token">,</SPAN>lufo_Tilburg_2016<span class="punctuation token">,</SPAN>lufo_Tilburg_2015<span class="punctuation token">,</SPAN>lufo_Tilburg_2014<span class="punctuation token">,</SPAN>lufo_Tilburg_2013<span class="punctuation token">,</SPAN>lufo_Tilburg_2012<span class="punctuation token">,</SPAN>lufo_Tilburg_2011<span class="punctuation token">,</SPAN>lufo_Tilburg_2010<span class="punctuation token">,</SPAN>lufo_Tilburg_2008<span class="punctuation token">,</SPAN>lufo_Tilburg_2006<span class="punctuation token">,</SPAN>lufo_Tilburg_2002<span class="punctuation token">,</SPAN>lufo_Tilburg_1992<span class="punctuation token">,</SPAN>lufo_Tilburg_1976<span class="punctuation token">,</SPAN>lufo_Tilburg_1955<span class="punctuation token">,</SPAN>lufo_Tilburg_1944<span class="punctuation token">,</SPAN>lufo_Tilburg_1934]</SPAN>
<SPAN class= 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\">(<\/<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>
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> item<span class=\"punctuation token\">.</span>layer<span class=\"punctuation token\">.</span>title<span class=\"punctuation token\">,</span>
className<span class=\"punctuation token\">:</span> <span class=\"string token\">"esri-icon-description"</span><span class=\"punctuation token\">,</span>
id<span class=\"punctuation token\">:</span> <span class=\"string token\">"information"</span>
<span class=\"punctuation token\">}</span>
<span class=\"punctuation token\"]</span>
<span class=\"punctuation token"];</span>
<span class=\"punctuation token}\"></script> token">} <\/SPAN>)<\/SPAN>;<\/SPAN>
mapView.<\/SPAN>ui.<\/SPAN>add<\/SPAN>(<\/SPAN>scaleBar,<\/SPAN> "bottom-left"<\/SPAN>)<\/SPAN>;<\/SPAN>
var<\/SPAN> attribution =<\/SPAN> new<\/SPAN> Attribution<\/SPAN>(<\/SPAN>{<\/SPAN>
view:<\/SPAN> mapView
}<\/SPAN>)<\/SPAN>;<\/SPAN>
mapView.<\/SPAN>ui.<\/SPAN>add<\/SPAN>(<\/SPAN>attribution,<\/SPAN> "manual"<\/SPAN>)<\/SPAN>;<\/SPAN>
map.<\/SPAN>layers.<\/SPAN>addMany<\/SPAN>(<\/SPAN>[<\/SPAN>luchtfotoGroupLayer,<\/SPAN> histkaartenGroupLayer,<\/SPAN> tilburgLayer]<\/SPAN>)<\/SPAN>;<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/PAN>
<\/<\/span>script<\/span>><\/<\/span><\/<span>}
