Aan de slag met ArcGIS JavaScript - Lagen groeperen
432
0
12-06-2019 07:15 AM
GroupLayer Widget
Met de GroupLayer widget kun je meerdere sublagen groeperen in een gemeenschappelijke laag.
In dit voorbeeld maken we gebruik van een mooie set historische luchtfoto's en kaarten die we tegenkwamen op de ArcGIS Server van de Gemeente Tilburg. Deze foto's en kaarten zijn in de web app verdeeld in twee groepen, zodat je niet een hele lange lijst met lagen krijgt, maar een overzichtelijk lijstje met twee groepslagen.
Door het gebruik van de optie visibilityMode: "exclusive" verschijnen er radiobuttons voor de sublagen. Hierdoor kun je eenvoudig heen en weer klikken tussen de luchtfoto's - van 1934 tot en met 2018 - en de kaarten - van 1760 tot en met 1976.
Hier kun je de applicatie in actie zien:
Geschiedenis van Tilburg | Historische Kaarten en Luchtfoto's
De broncode staat hieronder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example">
<title>Geschiedenis van Tilburg | Historische Kaarten en Luchtfoto's</title>
<!-- Calcite Maps Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">
<!-- ArcGIS JS 4 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<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">
<!-- Menu -->
<div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
<a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="calcite-dropdown-toggle">
<span class="sr-only">Toggle dropdown menu</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
<ul class="dropdown-menu" role="menu">
<li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Over deze kaart</a></li>
<li><a role="menuitem" tabindex="1" data-target="#panelGuide" aria-haspopup="true"><span class="glyphicon glyphicon-book"></span> Gebruiksaanwijzing</a></li>
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main">Geschiedenis van Tilburg</span>
<span class="calcite-title-divider hidden-xs"></span>
<span class="calcite-title-sub hidden-xs">Kijk terug in de tijd op oude luchtfoto's en kaarten</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>
</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"><b>Over deze kaart</b></span></a>
<a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
<div class="panel-body" style="width: 500px;">
<a href="https://www.tilburg.nl/" target="_blank" title="Tilburg"><img src="https://www.tilburg.nl/typo3conf/ext/tilburg_sitepackage/Resources/Public/Images/logo.svg" alt="Tilburg" width="278px" height="54px"></a><br><br>
<p>Op deze site worden de volgende gegevens van de <a href="https://www.tilburg.nl/" target="_blank">Gemeente Tilburg</a> getoond:</p>
<ul>
<li>Historische kaarten, van 1760 tot nu</li>
<li>Historische luchtfoto's, van 1934 tot nu</li>
</ul>
<p>Gebruik de knoppen aan de rechterkant van het scherm om de kaart te verkennen. Hier kunt u ook een andere luchtfoto of een andere kaart kiezen.</p>
<p>Deze interactieve kaart is samengesteld door <a href="https://www.tensing.com/">Tensing GIS Consultancy B.V.</a></p>
</div>
</div>
</div>
<div id="panelGuide" 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-book" aria-hidden="true"></span><span class="panel-label"><b>Gebruiksaanwijzing</b></span></a>
<a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelGuide"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
<div class="panel-body" style="width: 500px;">
<table>
<thead><tr><th colspan="2">Knoppen aan de rechterkant van het scherm</th></tr></thead>
<tbody>
<tr>
<td><div class="esri-widget--button"><span title="Zoeken" class="esri-icon-search"></span></div>Adres zoeken</td>
<td><div class="esri-widget--button"><span title="Lijst met lagen" class="esri-icon-layer-list"></span></div>Kaartlagen aan of uitzetten</td>
</tr>
<tr>
<td><div class="esri-widget--button"><span title="Basiskaartgalerij" class="esri-icon-basemap"></span></div>Basiskaart kiezen</td>
<td><div class="esri-widget--button"><span title="Standaard kaartweergave" class="esri-icon-home"></span></div>Terug naar beginpositie</td>
</tr>
<tr>
<td><div class="esri-widget--button"><span title="Inzoomen" class="esri-icon-plus"></span></div><div class="esri-widget--button"><span title="Uitzoomen" class="esri-icon-minus"></span></div>In- en uitzoomen op de kaart</td>
<td><div class="esri-widget--button"><span title="Uitklappen" class="esri-icon-right-triangle-arrow"></span></div><div class="esri-widget--button"><span title="Inklappen" class="esri-icon-down-arrow"></span></div>Groepslaag in- of uitklappen</td>
</tr>
<tr>
<td><div class="esri-widget--button"><span title="Zichtbaar" class="esri-icon-visible"></span></div><div class="esri-widget--button"><span title="Onzichtbaar" class="esri-icon-non-visible"></span></div>Laag zichtbaar of onzichtbaar maken</td>
<td><div class="esri-widget--button"><span title="Beschrijving" class="esri-icon-description"></span></div>Informatie opvragen over de laag</td>
</tr>
<tr>
<td colspan="2"><div class="esri-widget--button"><span title="Kompasoriëntatie resetten" class="esri-icon-dial"></span></div>Kaart terugzetten naar het noorden (als deze geroteerd is)<br><br><b>Kaart roteren:</b> hou de rechter muisknop ingedrukt om de kaart te draaien</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.calcite-panels -->
<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, LayerList, GroupLayer, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport) {
/******************************************************************
*
* Create the map, view and widgets
*
******************************************************************/
// Basemaps Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD
var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
var stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD
var luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD
var localBasemaps = new LocalBasemapsSource({
basemaps : [topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
});
var municipalitiesRenderer = {
"type": "simple",
"symbol": {
"type": "simple-fill",
"style": "none",
"outline": {
"width": 3,
"color": [255,0,0,255]
},
}
}
var tilburgLayer = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
definitionExpression: "Gemeentenaam = 'Tilburg'",
renderer: municipalitiesRenderer,
title: "Gemeente Tilburg (grens)"
});
var baseUrlTilburg = "https://geo.tilburg.nl/server2/rest/services/"; //ArcGIS REST Services Directory van de Gemeente Tilburg
var urlHistKaartTilburg = baseUrlTilburg.concat("HistorischeKaart/MapServer")
// Historische kaarten Tilburg
var hist_kaart_Tilburg_1976 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 11, title: "1976"}], title: "Kaart Tilburg 1976", visible: false});
var hist_kaart_Tilburg_1969 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 10, title: "1969"}], title: "Kaart Tilburg 1969", visible: false});
var hist_kaart_Tilburg_1953 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 9, title: "1953"}], title: "Kaart Tilburg 1953", visible: false});
var hist_kaart_Tilburg_1950 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 8, title: "1950"}], title: "Kaart Tilburg 1950", visible: false});
var hist_kaart_Tilburg_1945 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 7, title: "1945"}], title: "Kaart Tilburg 1945", visible: false});
var hist_kaart_Tilburg_1934 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 6, title: "1934"}], title: "Kaart Tilburg 1934", visible: false});
var hist_kaart_Tilburg_1924 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 5, title: "1924"}], title: "Kaart Tilburg 1924", visible: false});
var hist_kaart_Tilburg_1921 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 4, title: "1921"}], title: "Kaart Tilburg 1921", visible: false});
var hist_kaart_Tilburg_1914 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 3, title: "1914"}], title: "Kaart Tilburg 1914", visible: false});
var hist_kaart_Tilburg_1880 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 2, title: "1880"}], title: "Kaart Tilburg 1880", visible: false});
var hist_kaart_Tilburg_1792 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 1, title: "1792"}], title: "Kaart Tilburg 1792", visible: true});
var hist_kaart_Tilburg_1760 = new MapImageLayer({url: urlHistKaartTilburg, sublayers: [{id: 0, title: "1760"}], title: "Kaart Tilburg 1760", visible: false});
var histkaartenGroupLayerTitle = "Historische Kaarten Tilburg";
var histkaartenGroupLayer = new GroupLayer({
title: histkaartenGroupLayerTitle,
visible: true,
visibilityMode: "exclusive",
layers: [hist_kaart_Tilburg_1976,hist_kaart_Tilburg_1969,hist_kaart_Tilburg_1953,hist_kaart_Tilburg_1950,hist_kaart_Tilburg_1945,hist_kaart_Tilburg_1934,hist_kaart_Tilburg_1924,hist_kaart_Tilburg_1921,hist_kaart_Tilburg_1914,hist_kaart_Tilburg_1880,hist_kaart_Tilburg_1792,hist_kaart_Tilburg_1760]
});
// Historische Luchtfoto's Tilburg
var lufo_Tilburg_2018 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2018/MapServer"), title: "Luchtfoto Tilburg 2018", visible: false});
var lufo_Tilburg_2017 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2017/MapServer"), title: "Luchtfoto Tilburg 2017", visible: false});
var lufo_Tilburg_2016 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2016/MapServer"), title: "Luchtfoto Tilburg 2016", visible: false});
var lufo_Tilburg_2015 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2015/MapServer"), title: "Luchtfoto Tilburg 2015", visible: false});
var lufo_Tilburg_2014 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2014/MapServer"), title: "Luchtfoto Tilburg 2014", visible: false});
var lufo_Tilburg_2013 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2013/MapServer"), title: "Luchtfoto Tilburg 2013", visible: false});
var lufo_Tilburg_2012 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2012/MapServer"), title: "Luchtfoto Tilburg 2012", visible: false});
var lufo_Tilburg_2011 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2011/MapServer"), title: "Luchtfoto Tilburg 2011", visible: false});
var lufo_Tilburg_2010 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2010/MapServer"), title: "Luchtfoto Tilburg 2010", visible: false});
var lufo_Tilburg_2008 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2008/MapServer"), title: "Luchtfoto Tilburg 2008", visible: false});
var lufo_Tilburg_2006 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2006/MapServer"), title: "Luchtfoto Tilburg 2006", visible: false});
var lufo_Tilburg_2002 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto2002/MapServer"), title: "Luchtfoto Tilburg 2002", visible: false});
var lufo_Tilburg_1992 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1992/MapServer"), title: "Luchtfoto Tilburg 1992", visible: false});
var lufo_Tilburg_1976 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1976/MapServer"), title: "Luchtfoto Tilburg 1976", visible: false});
var lufo_Tilburg_1955 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1955/MapServer"), title: "Luchtfoto Tilburg 1955", visible: false});
var lufo_Tilburg_1944 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1944/MapServer"), title: "Luchtfoto Tilburg 1944", visible: false});
var lufo_Tilburg_1934 = new TileLayer({url: baseUrlTilburg.concat("HistorischeLuchtfoto1934/MapServer"), title: "Luchtfoto Tilburg 1934", visible: true});
var luchtfotoGroupLayerTitle = "Historische Luchtfoto's Tilburg";
var luchtfotoGroupLayer = new GroupLayer({
title: luchtfotoGroupLayerTitle,
visible: true,
visibilityMode: "exclusive",
layers: [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]
});
// Map
var map = new WebMap({
basemap: topo_RD_EsriNL
});
// View
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: []}
});
// Popup and panel sync
mapView.when(function(){
CalciteMapArcGISSupport.setPopupPanelSync(mapView);
});
// Search - add to navbar
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 van Esri Nederland
singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
}]
CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);
var basemapGallery = new BasemapGallery({
container: document.createElement("div"),
view: mapView,
source: localBasemaps
});
basemapGalleryExpand = new Expand({
expandIconClass: "esri-icon-basemap",
expandTooltip: basemapGallery.label,
view: mapView,
content: basemapGallery.domNode,
group: "top-right"
});
var layerList = new LayerList({
container: document.createElement("div"),
view: mapView,
listItemCreatedFunction: function(event){
const 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"
});
mapView.ui.add(scaleBar, "bottom-left");
var attribution = new Attribution({
view: mapView
});
mapView.ui.add(attribution, "manual");
map.layers.addMany([luchtfotoGroupLayer, histkaartenGroupLayer, tilburgLayer]);
});
</script>
</body>
</html>