Migration

If you have an exisiting CesiumJS application, it is easy to update your application to use ArcGIS location services.

Base layers

You can replace Cesium's default Bing Maps Imagery and Cesium World Terrain layers with an ArcGIS map tile service 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 service.

Get an access token using API key credentials or implement another type of authentication in your application.

Select a map tile service 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 service.

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 layers. 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 layers: GeoJsonDataSource.
Scene layers: I3SDataProvider.
Map tile layers: ArcGisMapServerImageryProvider

Example

GeoJSON to hosted feature layer

This example shows how to convert GeoJSON stored in Cesium ion to a hosted feature layer 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 portal and convert it to a hosted feature layer. 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 service 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 geocoding service.
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.