Learn how to customize the CesiumJS base layer picker to display ArcGIS data provider options.
ArcGIS provides base layers for both imagery and terrain that you can use in your CesiumJS applications. You can use map tiles from the basemap styles service to create an Imagery, and you can use elevation data from the elevation service to create a Terrain.
In this tutorial, you customize the Base widget to display the different ArcGIS base layers available for imagery and terrain.
Prerequisites
You need an ArcGIS Location Platform or ArcGIS Online account.
Get an access token
You need an access token with the correct privileges to access the resources used in this tutorial.
-
Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
- Location services > Basemaps
- Privileges
-
Copy the API key access token to your clipboard when prompted.
-
In CodePen, update the
accessvariable to use your access token.Token Use dark colors for code blocks const accessToken = "YOUR_ACCESS_TOKEN"; Cesium.ArcGisMapService.defaultAccessToken = accessToken; const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN"; Cesium.Ion.defaultAccessToken = cesiumAccessToken; const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE); const viewer = new Cesium.Viewer("cesiumContainer", { baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery), }); -
Run the code to ensure the base layer is displayed in the scene.
To learn about the other types of authentication available, go to Types of authentication.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CesiumJS: Change the basemap layer</title>
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html, body, #cesiumContainer {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
const accessToken = "YOUR_ACCESS_TOKEN";
Cesium.ArcGisMapService.defaultAccessToken = accessToken;
const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
Cesium.Ion.defaultAccessToken = cesiumAccessToken;
const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE, {
enablePickFeatures:false
});
const viewer = new Cesium.Viewer("cesiumContainer", {
baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
terrain: Cesium.Terrain.fromWorldTerrain(),
baseLayerPicker:true,
timeline: false,
animation: false,
geocoder:false
});
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-122.4106, 37.7908, 200000),
});
// Add Esri attribution
// Learn more in https://esriurl.com/attribution
const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true)
viewer.creditDisplay.addStaticCredit(poweredByEsri);
const viewModel = viewer.baseLayerPicker.viewModel;
const imageryProviders = [];
const imageryProviderNames = ["ArcGIS World Imagery", "ArcGIS World Hillshade", "Esri World Ocean"];
for (imageryProvider of viewModel.imageryProviderViewModels) {
if (imageryProviderNames.includes(imageryProvider.name)) {
imageryProviders.push(imageryProvider);
}
}
viewModel.imageryProviderViewModels = imageryProviders;
const arcGisTerrain = new Cesium.ProviderViewModel({
name: "ArcGIS World Terrain",
iconUrl:"https://www.arcgis.com/sharing/rest/content/items/58a541efc59545e6b7137f961d7de883/info/thumbnail/thumbnail1585609861151.png",
creationFunction: () => {
return Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")
}
})
// Attribution text retrieved from https://www.arcgis.com/home/item.html?id=7029fb60158543ad845c7e1527af11e4
viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Sources: Maxar, Airbus DS, USGS, NGA, NASA, CGIAR, GEBCO, N Robinson, NCEAS, NLS, OS, NMA, Geodatastyrelsen and the GIS User Community", false));
viewModel.terrainProviderViewModels = [arcGisTerrain];
</script>
</body>
</html>What's next?
Learn how to use additional ArcGIS location services in these tutorials:
