Last active
February 23, 2025 16:50
-
-
Save banesullivan/e3cc15a3e2e865d5ab8bae6719733752 to your computer and use it in GitHub Desktop.
Create a Cesium Viewer without Cesium Ion Token and still have a decent selection base maps. For some reason, I could not find a clear explanation of how to do this in the Cesium docs or Discourse.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- Include the CesiumJS JavaScript and CSS files --> | |
| <script src="https://cesium.com/downloads/cesiumjs/releases/1.87.1/Build/Cesium/Cesium.js"></script> | |
| <link href="https://cesium.com/downloads/cesiumjs/releases/1.87.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> | |
| </head> | |
| <style> | |
| .app .data .map { | |
| position: relative; | |
| } | |
| html, body, #cesiumContainer, .leaflet-container { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <body> | |
| <div id="cesiumContainer"></div> | |
| <script> | |
| // Set the Cesium Ion token to `null` to avoid warnings | |
| Cesium.Ion.defaultAccessToken = null; | |
| /* Per Carto's website regarding basemap attribution: https://carto.com/help/working-with-data/attribution/#basemaps */ | |
| let CartoAttribution = 'Map tiles by <a href="https://carto.com">Carto</a>, under CC BY 3.0. Data by <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, under ODbL.' | |
| // Create ProviderViewModel based on different imagery sources | |
| // - these can be used without Cesium Ion | |
| var imageryViewModels = []; | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'OpenStreetMap', | |
| iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'), | |
| tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable \ | |
| map of the world.\nhttp://www.openstreetmap.org', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | |
| subdomains: 'abc', | |
| minimumLevel: 0, | |
| maximumLevel: 19 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Positron', | |
| tooltip: 'CartoDB Positron basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/light_all/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Positron without labels', | |
| tooltip: 'CartoDB Positron without labels basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/rastertiles/light_nolabels/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Dark Matter', | |
| tooltip: 'CartoDB Dark Matter basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/rastertiles/dark_all/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Dark Matter without labels', | |
| tooltip: 'CartoDB Dark Matter without labels basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/rastertiles/dark_nolabels/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Voyager', | |
| tooltip: 'CartoDB Voyager basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'Voyager without labels', | |
| tooltip: 'CartoDB Voyager without labels basemap', | |
| iconUrl: 'http://a.basemaps.cartocdn.com/rastertiles/voyager_nolabels/5/15/12.png', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', | |
| credit: CartoAttribution, | |
| minimumLevel: 0, | |
| maximumLevel: 18 | |
| }); | |
| } | |
| })); | |
| imageryViewModels.push(new Cesium.ProviderViewModel({ | |
| name: 'National Map Satellite', | |
| iconUrl: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/4/6/4', | |
| creationFunction: function() { | |
| return new Cesium.UrlTemplateImageryProvider({ | |
| url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}', | |
| credit: 'Tile data from <a href="https://basemap.nationalmap.gov/">USGS</a>', | |
| minimumLevel: 0, | |
| maximumLevel: 16 | |
| }); | |
| } | |
| })); | |
| // Initialize the viewer - this works without a token! | |
| viewer = new Cesium.Viewer('cesiumContainer', { | |
| imageryProviderViewModels: imageryViewModels, | |
| selectedImageryProviderViewModel: imageryViewModels[1], | |
| animation: false, | |
| timeline: false, | |
| infoBox: false, | |
| homeButton: false, | |
| fullscreenButton: false, | |
| selectionIndicator: false, | |
| }); | |
| // Remove the Terrain section of the baseLayerPicker | |
| viewer.baseLayerPicker.viewModel.terrainProviderViewModels.removeAll() | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a minimal example to create a CesiumJS Viewer without a Cesium Ion token. For some reason, I could not find a clear explanation of how to do this in the Cesium docs or Discourse.
Since you cannot access Cesium Ion's imagery without a token, I included 12 open-access tile sources to put in the
baseLayerPickerwhich make the "minimal" example kind of longHere is a preview of what this looks like with all the different base maps to choose from: