Aan de slag met ArcGIS JavaScript - Swipe
286
0
12-06-2019 05:59 AM
Swipe Widget
Met de Swipe widget kun je, met behulp van een schuifbalk, twee kaartbeelden over elkaar heen schuiven om ze visueel met elkaar te vergelijken.
Deze widget is beschikbaar in de ArcGIS API for Javascript 4, vanaf versie 4.13.
In dit voorbeeld maken we gebruik van twee lagen - 1925 en 1980 - uit de Topotijdreis van het Kadaster en van Esri Nederland.
De broncode staat hieronder. Klik hier om de applicatie in actie te zien.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Aan de slag met ArcGIS JavaScript - Swipe</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#header {
width: 100%;
height: 70px;
background-color: #113395;
color:#FFFFFF;
margin: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 15px;
}
#viewDiv {
position: absolute;
top: 70px;
bottom: 0;
right: 0;
left: 0;
padding: 0;
margin: 0;
}
td {
padding: 15px;
}
.dialogDiv {
background-color: white;
width: 480px;
}
.dialogHeader {
color: white;
font-weight: bolder;
width: auto;
background-color: #113395;
padding: 5px;
}
.esri-basemap-gallery__item-thumbnail {
width: auto;
}
</style>
<script>
require([
"esri/Map",
"esri/widgets/Zoom",
"esri/widgets/Home",
"esri/widgets/Compass",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esri/widgets/Expand",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/layers/TileLayer",
"dojo/domReady!"
], function(Map, Zoom, Home, Compass, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, LayerList, Swipe, TileLayer) {
document.getElementById("aboutDiv").style.display = "block";
// BRT Achtergrondkaart van PDOK als achtergrondkaart
let brtachtergrondkaart = new Basemap({
baseLayers: [
new WMTSLayer({
url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
copyright:
"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Achtergrondkaart (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "images/map.jpg"
});
// Basiskaarten Esr Nederland
let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD
let topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
let open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
let stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD
let luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD
let dutchBasemaps = new LocalBasemapsSource({
basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
});
let map = new Map({
basemap: open_Topo_RD_EsriNL
});
const nl_1925 = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1925/MapServer"
});
const nl_1980 = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1980/MapServer"
});
map.addMany([nl_1980,nl_1925])
let view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 92556, y: 437534, spatialReference: 28992}),
zoom: 8
});
view.ui.components = [ "attribution" ];
let aboutDlg = document.getElementById("aboutDiv");
let aboutExpand = new Expand({
expandIconClass: "esri-icon-lightbulb",
expandTooltip: "Over deze applicatie",
view: view,
expanded: true,
content: aboutDlg,
group: "top-left"
});
let searchWidget = new Search({
view: view,
includeDefaultSources: false
});
searchWidget.sources = [{
locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // BAG GeocodeServer van Esri Nederland
singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
name: "Adres in Nederland",
placeholder: "Zoek adres"
}]
searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search",
expandTooltip: searchWidget.label,
view: view,
content: searchWidget,
group: "top-left"
});
let basemapGallery = new BasemapGallery({view: view, source: dutchBasemaps});
basemapGalleryExpand = new Expand({
expandIconClass: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: basemapGallery.label,
view: view,
content: basemapGallery,
group: "top-left"
});
let layerList = new LayerList({
view: view,
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") {
// If the information action is triggered, then open the item details page of the service layer.
window.open(event.item.layer.url);
}
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-layers",
expandTooltip: layerList.label,
view: view,
content: layerList,
group: "top-left"
});
let zoom = new Zoom({view: view});
let homeWidget = new Home({view: view});
let compass = new Compass({view: view});
// create a new Swipe widget
const swipe = new Swipe({
leadingLayers: [nl_1925],
trailingLayers: [nl_1980],
position: 35, // set position of widget to 35%
view: view
});
// add the widget to the view
view.ui.add(swipe);
view.ui.add([aboutExpand, searchWidgetExpand, zoom, homeWidget, compass, basemapGalleryExpand, layerListExpand], "top-left");
});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">Schuif door de tijd: 1925, 1980, nu...</div>
</div>
<div id="viewDiv"></div>
<div class="dialogDiv" id="aboutDiv" style="display:none">
<div class="dialogHeader">Swipe widget</div>
<table>
<tr>
<td>
<h3>Kaartlagen over elkaar heen schuiven</h3>
<p>Voorbeeld met de <a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html" target="blank">Swipe widget</a> in de ArcGIS API for JavaScript 4.13.</p>
<p><div class="esri-widget--button"><span title="Schuif de balk heen en weer over de kaartlagen." class="esri-icon-drag-vertical"></span></div>Schuif de balk heen en weer over de kaartlagen om een vergelijking te maken tussen 1925 en 1980.</p>
<p><div class="esri-widget--button"><span title="Zie lijst met lagen voor aanvullende informatie." class="esri-icon-layers"></span></div>In deze demo wordt gebruik gemaakt van twee lagen uit de <a href="https://www.topotijdreis.nl/" target="blank">Topotijdreis</a> van het Kadaster en Esri Nederland.</p>
<p>Open de <b>Lijst met lagen</b> voor meer informatie. Als je één van de lagen uitzet, dan kun je ook een vergelijking maken met de huidige tijd.</p>
<p>Deze applicatie is samengesteld door:<br><a href="https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>