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 image tile layer or ArcGIS elevation layer.

Examples

Bing Maps Imagery to ArcGIS image service

This example shows how to replace Cesium's Bing Maps Imagery with the ArcGIS:Imagery image tile basemap.

  1. Get an ArcGIS API key or implement OAuth2 in your application.

  2. Select an image tile basemap enumeration from the basemap layers page and copy the service URL.

    Use dark colors for code blocks
                                                                                            
    Add line.
    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
            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.

    Use dark colors for code blocks
                                                                                            
    Add line.Add line.Add line.Add line.
    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
            const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";
    
            const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({
                url : imageTileURL,
                token: apiKey
            });
    
  4. Set the imageryProvider of the Viewer to the new ArcGIS imagery provider.

    Use dark colors for code blocks
                                                                                            
    Add line.
    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
            const imageTileURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery:Standard?type=style";
    
            const arcGISImageTileProvider = new Cesium.ArcGisMapServerImageryProvider({
                url : imageTileURL,
                token: apiKey
            });
    
            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.

  1. Remove the Cesium terrain provider from the Viewer.

    Use dark colors for code blocks
                                                                                            
    Remove line
    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
            const viewer = new Cesium.Viewer("cesiumContainer", {
    
                terrainProvider: Cesium.createWorldTerrain(),
    
            });
    
  2. Copy the URL of the ArcGIS World Elevation service.

    Use dark colors for code blocks
                                                                                            
    Add line.
    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
            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.

    Use dark colors for code blocks
                                                                                            
    Add line.Add line.Add line.Add line.
    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
            const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    
            const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
                url : elevationURL,
                token : apiKey
            });
    
  4. Set the terrainProvider of the Viewer to the new ArcGIS terrain provider.

    Use dark colors for code blocks
                                                                                            
    Add line.
    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
            const elevationURL = "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    
            const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
                url : elevationURL,
                token : apiKey
            });
    
            const viewer = new Cesium.Viewer("cesiumContainer", {
    
                terrainProvider: arcGISTerrainProvider,
    
            });
    

Data hosting

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:

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.

  1. Remove the existing GeoJsonDataSource from your code.

    Use dark colors for code blocks
                                                                                            
    Remove lineRemove lineRemove lineRemove line
    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
            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 ArcGIS Online or the Developer Dashboard and convert it to a hosted feature layer. 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.

    Use dark colors for code blocks
                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
            const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
    
            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.

    Use dark colors for code blocks
                                                                                            
    Add line.Add line.Add line.Add line.
    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
            const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
    
            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.

  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 geocoding service.

  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.