nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting started with ArcGIS JavaScript - Swipe

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/getting-started-with-arcgis-javascript-introduction<\/A><\/P>

<\/P>

Swipe Widget<\/H1><\/P>With the Swipe<\/A> widget, you can use a slider to slide two map images over each other to visually compare them.<\/P>

<\/P>

This widget is available in the ArcGIS API for Javascript 4, from version 4.13.<\/P>

<\/P>

In this example, we use two layers - 1925 and 1980 - from the

Topotijdreis<\/A> of Kadaster and Esri Nederland.<\/P>

<\/P>

The source code is below.

Click here to see the application in action.<\/A><\/P>

<\/P>

<!DOCTYPE html><\/SPAN>\n<<\/SPAN>html<\/SPAN>><\/SPAN><\/SPAN>\n<<\/SPAN>head<\/SPAN>><\/SPAN><\/SPAN>\n  <<\/SPAN>meta<\/SPAN> charset<\/SPAN>=<\/SPAN>"<\/SPAN>utf-8"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>\n  <<\/SPAN>meta<\/SPAN> name<\/SPAN>=<\/SPAN>"<\/Span>viewport"content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"
<title>Getting Started with 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>

    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" , </ SPAN >
		 "esri/widgets/BasemapGallery/support/LocalBasemapsSource " </ Span >  , </ Span >
		 "esri/widgets/Expand " </ Span >  , </ Span >
         "esri/widgets/LayerList " </ Span >  , </ Span >
         "esri/widgets/Swipe " </ Span >  , </ Span >
         "esri/layers/TileLayer " </ Span >
        , "dojo/domReady! " </ Span >
      ] , </ Span > function(Map, Zoom, Home, Compass, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, LayerList, Swipe, TileLayer) {

      document.getElementById("aboutDiv").style.display = "block";

      // BRT Background map from PDOK as background map
      let brtBackgroundMap = new Basemap({
        baseLayers: [
      	new WMTSLayer({
            url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
            copyright:
              "

BRT Background map from PDOK",
activeLayer: {
id: "brtBackgroundMap"
}
})
],
title: "BRT Background map (PDOK)",
id: "brtbackgroundmap_pdok",
thumbnailUrl: "images/map.jpg"
});

// Base maps Esr Netherlands
let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem:{id:"9ff6521e85d24df1aa9cd4aebfef748b"}}); // Light gray Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem:{id:"62a3befb579e4d9f9c5c51576c8a7c25"}}); // Dark gray 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 streetMap_RD_EsriNL = new Basemap({portalItem:{id:"9fe1a753955f418fa1cbaf1c47610a47"}}); // Street Map RD
let aerialPhoto_RD_EsriNL = new Basemap({portalItem:{id:" token">:<\/SPAN> "38e1a1c6ee2c421290622400d22ecf57"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Aerial photo RD<\/SPAN>\n \n let<\/SPAN> dutchBasemaps =<\/SPAN> new<\/SPAN> LocalBasemapsSource<\/SPAN>(<\/SPAN>{<\/SPAN>\n basemaps :<\/SPAN> [<\/SPAN>brtachtergrondkaart,<\/SPAN> topo_RD_EsriNL,<\/SPAN> open_Topo_RD_EsriNL,<\/SPAN> stratenkaart_RD_EsriNL,<\/SPAN> luchtfoto_RD_EsriNL,<\/SPAN> lightGrayCanvas_RD_EsriNL,<\/SPAN> darkGrayCanvas_RD_EsriNL]<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n let<\/SPAN> map =<\/SPAN> new<\/SPAN> Map<\/SPAN>(<\/SPAN>{<\/SPAN>\n basemap:<\/SPAN> open_Topo_RD_EsriNL\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n const<\/SPAN> nl_1925 =<\/SPAN> new<\/SPAN> TileLayer<\/span>({\n url:\"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1925\/MapServer\"\n });\n\n const nl_1980 = new TileLayer({\n url:\"https:\/\/tiles.arcgis.com\/tiles\/nSZVuSZjHpEZZbRo\/arcgis\/rest\/services\/Historische_tijdreis_1980\/MapServer\"\n });\n\n map.addMany([nl_1980,nl_1925])\n\t let view = new MapView({
spatialReference=<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>
expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ see https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-icon-font\/<\/SPAN>
expandTooltip:<\/SPAN> basemapGallery.<\/SPAN>label,<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
content:<\/SPAN> basemapGallery,<\/SPAN>
group:<\/SPAN> "top-left"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

let<\/SPAN> layerList =<\/SPAN> new<\/SPAN> LayerList<\/SPAN>(<\/SPAN>{<\/SPAN>
view:<\/SPAN> view,<\/SPAN>
listItemCreatedFunction:<\/SPAN> function<\/SPAN>(<\/SPAN>event)<\/SPAN>{<\/SPAN>
const<\/SPAN> item =<\/SPAN> event.<\/span>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");

});

class="stretch">Slide through time: 1925, 1980, now...</div>
</div>
<div id="viewDiv"></div>

<div class="dialogDiv" id="aboutDiv" style="display:none">
<div class="dialogHeader">Swipe widget</div>
<table>
<tr>
<td>
&Lt; / H3 &Gt; Map layers slide over each other &Lt; / H3 &Gt;
&Lt; P Example with the &Lt; A Href = " https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html" Target = " blank" &Gt; Swipe widget &Lt; / A &Gt; in the ArcGIS API for JavaScript 4.13. &Lt; / P &Gt; 
&Lt; P 
&Lt; Div Class = " esri-widget--button" &Gt; 
&Lt; span Title = " Slide the bar back and forth over the map layers." Class = " esri-icon-drag-vertical" &Gt; &Lt; / span < spanclass=\" punctuationtoken\">< spanclass=\" punctuationtoken\"></ div>
Slide the bar back and forth over the map layers to make a comparison between 1925 and 1980.< spanclass=\"tokentag\">
< spanclass=\"tokentag\">
< spanclass=\"tokentag\"><divclass=\"esri-widget--button\">
< spanspan title=\"See list of layers for additional information.\"class=\"esri-icon-layers\">
</div>
In this demo, two layers from theTopotijdreis of Kadaster and Esri Nederland are used.< spanclass=\"tokentag\">
< spanclass=\"tokentag\">
Open theList of layers for more information. If you turn off one of the layers, you can also make a comparison with the current time.< spanclass=\"tokentag\">
< spanclass=\"tokentag\">
This application is compiled by: 
"https://www.tensing.com/" target="blank">Tensing GIS Consultancy B.V.</a>
</td>
</tr>
</table>
</div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍< > </ s p a n > < s p a n > < < E M O J I _ 3 9 > > </ s p a n > < s p a n > < < E M O J I _ 4 0 > > </ s p a n > < s p a n > < < E M O J I _ 4 1 > > </ s p a n > < s p a n > < < E M O J I _ 4 2 > > </ s p a n > < s p a n > < < E M O J I _ 4 3 > > </ s p a n > < s p a n > < < E M O J I _ 4 4 > > </ s p a n > < s p a n > < < E M O J I _ 4 5 > > </ s p a n > < s p a n > < < E M O J I _ 4 6 > > </ s p a n > < s p a n > < < E M O J I _ 4 7 > > </ s p a n > < s p a n > < < E M O J I _ 4 8 > > </ s p a n > < s p a n > <> < > < > < > < > < > < > < > < > < > < <> < <> < <> < <> < <> < <> < <> < <> < <> < <> < <> </ sp an ></ sp an ></ CODE ></ PRE ></ BODY ></ HTML>

Find more posts tagged with

Comments

There are no comments yet

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.