Migration

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

Base layers

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

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

  2. Select a from the basemap layers page and copy the service URL.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";
    
  3. Create an ArcGISMapServerImageryProvider that references the copied service URL. Set the token parameter to your API key or OAuth2 access token.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            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
            });
    
  4. Set the imageryProvider of the Viewer to the new ArcGIS imagery provider.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            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 .

  1. Remove the Cesium terrain provider from the Viewer.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            const viewer = new Cesium.Viewer("cesiumContainer", {
    
                terrainProvider: Cesium.createWorldTerrain(),
    
            });
    
  2. Copy the URL of the ArcGIS World Elevation service.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    
  3. Create a new ArcGISTiledElevationTerrainProvider that references the copied service URL. Set the token parameter to your ArcGIS API key or OAuth2 access token.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    
            const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
                url : elevationURL,
                token : accessToken
            });
    
  4. Set the terrainProvider of the Viewer to the new ArcGIS terrain provider.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            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 . 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:

Example

GeoJSON to hosted feature layer

This example shows how to convert GeoJSON stored in Cesium ion to a stored in ArcGIS.

  1. Remove the existing GeoJsonDataSource from your code.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            Cesium.IonResource.fromAssetId(1556114).then((asset) => {
              const layer = Cesium.GeoJsonDataSource.load(asset);
              viewer.dataSources.add(layer);
            })
    
  2. 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.

  3. Upload your GeoJSON file to your and convert it to a . To learn how to do this, go to the Import data as a feature layer tutorial.

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            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"
            })
    
  5. Add the response from the ArcGIS REST JS request to the viewer as a new GeoJsonDataSource.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
            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 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.

  1. Disable the Cesium geocoder in the viewer.

  2. Create a function that uses the ArcGIS REST JS geocode function to make a request to the .

  3. Create an HTML input and add an event listener to call the REST JS function when the user clicks a button.

  4. Display the results from the geocoding service as a Cesium Entity.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close