Migration | CesiumJS | Esri Developer

If you have an existing CesiumJS application, it is easy to update your application to use ArcGIS Location ServicesArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services.Learn more.

Base layers

You can replace Cesium's default Bing Maps Imagery and Cesium World Terrain layers with an ArcGIS map tile serviceA map tile service, formerly known as image tile service, is a data service that provides access to static, pre-rendered mao tiles. The tiles are typical in PNG format. Map tiles are typically retrieved by specifying a specific level, row, and column value.Learn more and ArcGIS elevation layer, respectively.

Examples

Bing Maps Imagery to ArcGIS image service

This example shows how to replace Cesium's Bing Maps Imagery with the ArcGIS:Imagery map tile serviceA map tile service, formerly known as image tile service, is a data service that provides access to static, pre-rendered mao tiles. The tiles are typical in PNG format. Map tiles are typically retrieved by specifying a specific level, row, and column value.Learn more.

Get an access tokenAn access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication.Learn more using API key credentials or implement another type of authentication in your application.

Select a map tile serviceA map tile service, formerly known as image tile service, is a data service that provides access to static, pre-rendered mao tiles. The tiles are typical in PNG format. Map tiles are typically retrieved by specifying a specific level, row, and column value.Learn more from the basemap layers page and copy the service URL.

Use dark colors for code blocks
        const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";

Create an ArcGISMapServerImageryProvider that references the copied service URL. Set the token parameter to your API key or OAuth2 access token.

Use dark colors for code blocks
        const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";

        const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({
            url : imageTileURL,
            token: accessToken
        });

Set the imageryProvider of the Viewer to the new ArcGIS imagery provider.

Use dark colors for code blocks
        const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";

        const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({
            url : imageTileURL,
            token: accessToken
        });

        const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"

        const viewer = new Cesium.Viewer("cesiumContainer", {

            imageryProvider: arcGISImageTileProvider,

        });

Cesium World Terrain to ArcGIS Elevation service

This example shows how to replace Cesium World Terrain with an ArcGIS Elevation serviceThe elevation service, also known as ArcGIS Elevation service, is a location service hosted by Esri that returns TopoBathy elevation values for a single location or multiple locations.Learn more.

Remove the Cesium terrain provider from the Viewer.

Use dark colors for code blocks
        const viewer = new Cesium.Viewer("cesiumContainer", {

            terrainProvider: Cesium.createWorldTerrain(),

        });

Copy the URL of the ArcGIS World Elevation service.

Use dark colors for code blocks
        const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"

Create a new ArcGISTiledElevationTerrainProvider that references the copied service URL. Set the token parameter to your ArcGIS API key or OAuth2 access token.

Use dark colors for code blocks
        const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"

        const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
            url : elevationURL,
            token : accessToken
        });

Set the terrainProvider of the Viewer to the new ArcGIS terrain provider.

Use dark colors for code blocks
        const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"

        const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
            url : elevationURL,
            token : accessToken
        });

        const viewer = new Cesium.Viewer("cesiumContainer", {

            terrainProvider: arcGISTerrainProvider,

        });

Data services

You can securely publish your data in ArcGIS to create hosted layersA hosted layer is an item in a portal that contains the properties and settings for a hosted data service or a layer in a hosted data service.Learn more. Supported file formats include GeoJSON, CSV, scene layer package (.slpk), and tile package (.tpk).

You can display hosted layers in CesiumJS with the following classes:

Feature layersA feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields.Learn more: GeoJsonDataSource.
Scene layersA scene layer is a data layer is used to access and display 3D data from a scene service.Learn more: I3SDataProvider.
Map tile layersA hosted map tile layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a map tile service.Learn more: ArcGisMapServerImageryProvider

Example

GeoJSON to hosted feature layer

This example shows how to convert GeoJSON stored in Cesium ion to a hosted feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more stored in ArcGIS.

Remove the existing GeoJsonDataSource from your code.

Use dark colors for code blocks
        Cesium.IonResource.fromAssetId(1556114).then((asset) => {
          const layer = Cesium.GeoJsonDataSource.load(asset);
          viewer.dataSources.add(layer);
        })    ;

Go to the Cesium ion dashboard > Assets. Select the GeoJSON asset that you want to re-host as a feature layer. In the right panel, click Source Files > Download.
Upload your GeoJSON file to your portalArcGIS portal, also known as a portal, is a website with applications and tools that can be used to create, manage, access, and share geospatial content and data. It supports security and authentication, developer credentials, content and data service management, user and group management, and site administration. A portal can be hosted in Esri's infrastructure or your own infrastructure.Learn more and convert it to a hosted feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more. To learn how to do this, go to the Import data as a feature layer tutorial.

Use ArcGIS REST JS to query the new feature service in your CesiumJS application. Format the response as GeoJSON.

Use dark colors for code blocks
        const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

        const layerURL = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0";

        arcgisRest.queryFeatures({
            url: layerURL,
            authentication,
            f:"geojson"
        })

Add the response from the ArcGIS REST JS request to the viewer as a new GeoJsonDataSource.

Use dark colors for code blocks
        const authentication = arcgisRest.ApiKeyManager.fromKey(accessToken);

        const layerURL = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0";

        arcgisRest.queryFeatures({
            url: layerURL,
            authentication,
            f:"geojson"
        })

        .then(response => {
          const layer = Cesium.GeoJsonDataSource.load(response)
          viewer.dataSources.add(layer);
        });

Geocoding

The ArcGIS Geocoding serviceA geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise.Learn more provides the ability to find addresses, businesses, and places around the world.

Example

Cesium Geocoding to ArcGIS Geocoding

This example shows how to disable the Cesium Geocoder and add ArcGIS geocoding to your application.

Disable the Cesium geocoder in the viewer.
Create a function that uses the ArcGIS REST JS geocode function to make a request to the ArcGIS Geocoding serviceA geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise.Learn more.
Create an HTML input and add an event listener to call the REST JS function when the user clicks a button.
Display the results from the Geocoding service as a Cesium Entity.