ArcGIS JavaScript with UK data - OS Basemapgallery
508
0
03-24-2020 03:21 PM
Basemapgallery
In the first exercise in this series we just had a single basemap in our map. Here we are going to add a BasemapGallery allowing users to switch basemaps.
Please note: all basemaps added to the gallery need to have the same spatial reference. And because our first basemap is projected in British National Grid, all the other ones should have this same spatial reference.
We have found these basemaps which meet this requirement:
In the code below we use the Basemap class to create six basemap objects. Next we combine these objects in a single LocalBasemapsSource, which in turn we add to the BasemapGallery widget.
Follow this link to see the end result of this exercise:
ArcGIS JavaScript with UK data - OS Basemapgallery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript with UK data - OS Basemapgallery</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-basemap-gallery__item-thumbnail {
width: auto;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource"
], function(Map, Point, MapView, Basemap, BasemapGallery, LocalBasemapsSource) {
// Basemaps Esri UK
let OS_Open_Background_Esri_UK = new Basemap({portalItem: {id: "a4ee9f2805754f4b9004103f67688bf1"}}); //OS Open Background
let OS_Open_Gray_Esri_UK = new Basemap({portalItem: {id: "93320e50f3f3419795946b1243aadb1e"}}); //OS Open Grey
let OS_Open_Gray_Labels_Esri_UK = new Basemap({portalItem: {id: "7be6d1f81ab047fda02107a97079ccd3"}}); //OS Open Grey Labels
let OS_Open_Carto_Esri_UK = new Basemap({portalItem: {id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b"}}); //OS Open Carto
let OS_Open_Raster_Esri_UK = new Basemap({portalItem: {id: "5b5ff94ca7414a26b75e0d337a023d38"}}); //OS Open Rasters
let GB_Dark_Grey_Esri_UK = new Basemap({portalItem: {id: "a118075240bc4e4f8062265ecdad0e7e"}}); //GB Dark Grey
let UKBasemaps = new LocalBasemapsSource({
basemaps : [OS_Open_Background_Esri_UK, OS_Open_Carto_Esri_UK, OS_Open_Gray_Esri_UK, OS_Open_Gray_Labels_Esri_UK, OS_Open_Raster_Esri_UK, GB_Dark_Grey_Esri_UK]
});
let map = new Map({
basemap: OS_Open_Carto_Esri_UK
});
let view = new MapView({
spatialReference: 27700,
container: "viewDiv",
map: map,
center: new Point({x: 500000, y: 500000, spatialReference: 27700}),
zoom: 7
});
let basemapGallery = new BasemapGallery({
view: view,
source: UKBasemaps
});
view.ui.add([basemapGallery], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>