Using Ion assets from other mapping libraries

CesiumJS
1

Hi Cesium Ion team,

Imagery uploaded to Cesium Ion is exposed as standard services like TMS and WMTS. Cool! But how do I actually use these services from clients other than Ion? Specifically, how do I handle the token? I see from looking at the network requests in a working Cesium Ion app that the token is sent in the “Accept” request header. But most mapping libraries don’t know how to do that, especially the ones that run in a web browser where the browser’s image loading API doesn’t let you specify custom request headers.

Is there a way to specify the token as a query parameter in the URL instead? I tried “token=” and “access_token=” and a few other variations but didn’t find one that worked, nor could I find any documentation on this. All the docs I could find just show how to use the Cesium API.

Thanks,

Kevin

2

Hey Kevin!

Documenting this is definitely on our to-do list (and making sure we flesh things out for all use cases and probably smooth out some rough edges) but it’s definitely possible today. The order of precedence is:

  1. Query parameter (?access_token=access_token)

  2. Authorization header (in the form of “Bearer access_token”)

  3. Accept header (Cesium does this to avoid pre-flight OPTIONS requests because the web is terrible)

There flow for actually requesting an asset on the client is as follows:

  1. Use one of your tokens from https://cesium.com/ion/tokens to perform the initial handshake, for example https://api.cesium.com/v1/assets/1/endpoint to request Cesium World Terrain (use any of the above methods to provide the token)

  2. This returns you the entry point data which contains the type of asset, url entry point, access token to actual request data, and required attributions (currently in text and html)

{

“type”: “TERRAIN”,

“url”: “https://assets.cesium.com/1/”,

“accessToken”: “the_token_to_use”,

“attributions”: [{ “html”: “<a href=“https://cesium.com” target=”_blank"><img src="[https://assets.cesium.com/ion-credit.png](https://assets.cesium.com/ion-credit.png)" alt=“Cesium ion” />", “text”: “Cesium ion”, “url”: “https://cesium.com”, “image”: “https://assets.cesium.com/ion-credit.png”, “collapsible”: false }, { “html”: “Data available from the U.S. Geological Survey, © CGIAR-CSI, Produced using Copernicus data and information funded by the European Union - EU-DEM layers, Data available from Land Information New Zealand, Data available from data.gov.uk, Data courtesy Geoscience Australia”, “text”: “Data available from the U.S. Geological Survey, © CGIAR-CSI, Produced using Copernicus data and information funded by the European Union - EU-DEM layers, Data available from Land Information New Zealand, Data available from data.gov.uk, Data courtesy Geoscience Australia”, “collapsible”: true }]

}

  1. Now you can start making requests to the new url using the returned access token using any of the 3 methods I listed at the top.

Here’s a JSFiddle of loading the Washington DC 3in imagery from ion in OpenLayers via WMTS: https://jsfiddle.net/tomfili/nkd24wrp/5/ (from Fili’s blog post https://cesium.com/blog/2018/07/23/ion-wmts-support/).

I also wrote up a new ion issue so that others looking to do this in the short term have the information: https://github.com/AnalyticalGraphicsInc/cesium-ion-community/issues/29

Hope that helps.

Thanks,

Matt