https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with...
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) {
let OS_Open_Background_Esri_UK = new Basemap({portalItem: {id: "a4ee9f2805754f4b9004103f67688bf1"}});
let OS_Open_Gray_Esri_UK = new Basemap({portalItem: {id: "93320e50f3f3419795946b1243aadb1e"}});
let OS_Open_Gray_Labels_Esri_UK = new Basemap({portalItem: {id: "7be6d1f81ab047fda02107a97079ccd3"}});
let OS_Open_Carto_Esri_UK = new Basemap({portalItem: {id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b"}});
let OS_Open_Raster_Esri_UK = new Basemap({portalItem: {id: "5b5ff94ca7414a26b75e0d337a023d38"}});
let GB_Dark_Grey_Esri_UK = new Basemap({portalItem: {id: "a118075240bc4e4f8062265ecdad0e7e"}});
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>