Language
OneAtlas Basemap Guide
  1. Integration with JavaScript
    1. JavaScript wrapper
      1. initOneAtlas
      2. searchOneAtlas
      3. Parameters for options
      4. Code
    2. OpenLayers
    3. Leaflet
    4. Cesium
    5. ArcGIS3
    6. ArcGIS4
    7. Search images with OL3

Integration with JavaScript

The OneAtlas View API can work with many JavaScript libraries. To help you to implement the OneAtlas Basemap API, we developed a small JavaScript wrapper for the /me and /images endpoints. This file adds two functions initOneAtlas and searchOneAtlas.

JavaScript wrapper

initOneAtlas

function initOneAtlas(apiKey, callback);
ArgumentTypeDescription
apiKeyStringYour personnal OneAtlas API key
callbackfunctionA function called when the API returns a response

The first and only argument for the callback is a JavaScript Object containing all the data provided by the /me endpoint as documented here.

searchOneAtlas

function searchOneAtlas(apiKey, options, callback);
ArgumentTypeDescription
apiKeyStringYour personnal OneAtlas API key
optionsObjectA JavaScript object as documented below
callbackfunctionA function called when the API returns a response

The first and only argument for the callback is a JavaScript object containing all the data provided by the /me endpoint as documented here

Parameters for options

ParameterTypeDefault valueDescription
bboxStringNone (Required)A bounding box array string in geographic coordinate reference system (WGS84). Example: -10.0, -10.0, 10.0, 10.0 or -180, -90, 180, 90 for whole world in Geographic.
insertdtstartStringNoneImages inserted before this date are excluded from the results.
insertdtendStringNoneImages inserted after this date are excluded from the results.
pageinteger1Page number
sizeinteger10Number of items per page

Code

function initOneAtlas(apiKey, callback) {
    if(apiKey.indexOf("Bearer ") === -1) {
        apiKey = "Bearer " + apiKey;
    }
    let meUrl = 'https://view.geoapi-airbusds.com/api/v1/me';
    let client = new XMLHttpRequest();
    client.responseType = 'json';
    client.addEventListener('load', event => {
        let client = event.target;
        if (!client.status || client.status >= 200 && client.status < 300) {
            callback(client.response);
        } else {
            throw new Error("Failed to initialize OneAtlas");
        }
    });
    client.addEventListener('error', event => {
        let client = event.target;
        throw new Error("Failed to initialize OneAtlas");
    });
    client.open('GET', meUrl);
    client.setRequestHeader('Authorization', apiKey);
    client.send();
}

function searchOneAtlas(apiKey, options, callback) {
    if(apiKey.indexOf("Bearer ") === -1) {
        apiKey = "Bearer " + apiKey;
    }
    let url = "https://view.geoapi-airbusds.com/api/v1/images?";
    let arrayParams = [];
    if(!options.hasOwnProperty("bbox")) {
        throw new Error("The bbox option is mandatory");
    }
    let optionalOptions = ["bbox", "insertdtstart", "insertdtend", "page", "size"];
    for(let option in options) {
        if(!options.hasOwnProperty(option) || optionalOptions.indexOf(option) === -1) continue;
        arrayParams.push(encodeURIComponent(option) + "=" + encodeURIComponent(options[option]));
    }
    url += arrayParams.join('&');
    let client = new XMLHttpRequest();
    client.responseType = 'json';
    client.addEventListener('load', event => {
        let client = event.target;
        if (!client.status || client.status >= 200 && client.status < 300) {
            callback(client.response);
        } else {
            throw new Error("OneAtlas search failed");
        }
    });
    client.addEventListener('error', event => {
        let client = event.target;
        throw new Error("OneAtlas search failed");
    });
    client.open('GET', url, true);
    client.setRequestHeader('Authorization', apiKey);
    client.send();
}

OpenLayers

OpenLayers is an open-source JavaScript library that can render 2D maps that can also display vector data and markers. You can use the View API with OpenLayers using the OneAtlas data source module found here. This module extends ol.source.WMTS to add the required Authorization HTTP header needed to authenticate on the API.

function ol.source.OneAtlas(options);
PropertyTypeDescription
apiKeyStringYour own OneAtlas API key

Note: For more properties please see the official documentation

In the following example, we are also using a JavaScript wrapper for the /me endpoint available here to fetch the layers available with your subscription, along with a layerswitcher to switch between OneLive and OneView.

Code

let apiKey = "PASTE YOUR OWN API KEY HERE";
let projection = ol.proj.get('EPSG:3857');
let projectionExtent = projection.getExtent();
let size = (ol.extent.getWidth(projectionExtent)) / 256;
let resolutions = Array.from(Array(18), (item, index) => size/Math.pow(2, index));
let matrixIds = Array.from(Array(18), (item, index) => index);

initOneAtlas(apiKey, data => {
    let layers = data.maps.imagery.layers;
    let WMTSUrl = data.maps.imagery.links.wmts;
    let olLayers = layers.map(layer => {
        return new ol.layer.Tile({
            title: layer.offerName,
            source: new ol.source.OneAtlas({
                layer: layer.id,
                url: WMTSUrl,
                format: 'image/png',
                matrixSet: "3857",
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                apiKey: apiKey
            })
        });
    });
    let map = new ol.Map({
        target: 'map',
        layers: olLayers,
        view: new ol.View({
            center: [160711.24, 5404449.37],
            zoom: 17
        })
    });
    let layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: 'Legend'
    });
    map.addControl(layerSwitcher);
});

Leaflet

Leaflet is a lightweight open-source JavaScript library that can render 2D maps with vector data and markers. You can use the View API with Leaflet using the OneAtlas data source module found here. This module adds the required Authorization HTTP header needed to authenticate on the API.
The only thing you need to do then to create a OneAtlas layer is to instantiate a L.TileLayer. OneAtlas like you would instantiate a Leaflet TileLayer following the official documentation with the following options:

L.TileLayer.OneAtlas(url, options);
PropertyTypeDefault ValueDescription
apiKeyStringNone (Required)Your own OneAtlas API key
serviceModeString‘KVP’Accepted values : ‘KVP’ and ‘RESTful’. Depends on the URL used.

You can also specify here any WMTS parameter that you want, as well as any regular TileLayer option.

In the following example, we are also using a JavaScript wrapper for the /me endpoint available here to fetch the layers available with your subscription, along with a layer switcher to switch between OneLive and OneView. To make your own map, you just need to use your own API key instead of the test one.

Code

let apiKey = "PASTE YOUR OWN API KEY HERE";
initOneAtlas(apiKey, (data) => {
    let layers = data.maps.imagery.layers;
    let url = data.maps.imagery.links.wmts;
    let map = L.map('map', {crs: L.CRS.EPSG3857}).setView([43.60455930233002,1.4436936378479004], 17);
    L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
    let baseLayers = {};
    layers.map((layer) => {
        let tileLayer = new L.TileLayer.OneAtlas(url, {
            layer: layer.id,
            tilematrixSet: "3857",
            attribution: "Airbus DS",
            apiKey: apiKey
        });
        map.addLayer(tileLayer);
        baseLayers[layer.offerName] = tileLayer;
    });
    L.control.layers(baseLayers, {}).addTo(map);
});

Cesium

Cesium is an open-source JavaScript library that can render 3D globes and maps. You can use the View API with Cesium JS using the OneAtlasImageryProvider module found here. This module extends Cesium.WebMapTileServiceImageryProvider to add the required Authorization HTTP header needed to authenticate on the API.

function Cesium.OneAtlasImageryProvider(options);
PropertyTypeDescription
apiKeyStringYour own OneAtlas API key

Note: For more properties please see the official documentation

In the following example, we are using a javascript wrapper for the /me endpoint available here to fetch the layers available with your subscription.

Code

let apiKey = "PASTE YOUR OWN API KEY HERE";
initOneAtlas(apiKey, function(data) {
    let layers = data.maps.imagery.layers;
    let WMTSUrl = data.maps.imagery.links.wmts;
    let imageryViewModels = layers.map((layer) => {
        return new Cesium.ProviderViewModel({
            name: layer.offerName,
            iconUrl: '/images/guides/view/cesium/' + layer.offerName + '.png',
            creationFunction: (layerId => {
                return () => {
                    return new Cesium.OneAtlasImageryProvider({
                        url : WMTSUrl,
                        apiKey: apiKey,
                        style : 'default',
                        layer : layerId,
                        format : 'image/jpeg',
                        tileMatrixSetID : '3857',
                        maximumLevel: 18,
                        credit : new Cesium.Credit('Airbus DS')
                    });
                }
            })(layer.id)
        });
    });
    let cesiumWidget = new Cesium.CesiumWidget('map', {
        imageryProvider: false
    });
    new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
        globe: cesiumWidget.scene.globe,
        imageryProviderViewModels: imageryViewModels
    });
    let heading = Cesium.Math.toRadians(0.0);
    let pitch = Cesium.Math.toRadians(-90.0);
    cesiumWidget.camera.lookAt(Cesium.Cartesian3.fromDegrees(1.4431089, 43.6045002),
        new Cesium.HeadingPitchRange(heading, pitch, 1000));
});

ArcGIS3

ArcGIS API for JavaScript 3 is the oldest version of the ArcGIS API still regularly updated.

Note: If you hesitate between version 3 and 4, check this comparison table. It integrates 2D web maps that can include multiple rich information layers. You can use the View API with ArcGIS JS using the OneAtlas data source module found here. This module extends esri/layers/WMTSLayer to add the required Authorization HTTP header needed to authenticate on the API.

function OneAtlasLayer(url, options);
PropertyTypeDescription
apiKeyStringYour own OneAtlas API key

Note: For more properties please see the official documentation

ArcGIS automatically calls the GetCapabilities endpoint to get all available layers. We added a layer switcher to demonstrate this feature.

Code

require([
    "esri/map", "dojo/parser", "/js/view/arcgis3/arcgis-oneatlas.js"], function (
    Map, parser, OneAtlasLayer) {
    let apiKey = "PASTE YOUR OWN API KEY HERE";
    let WMTSUrl = "https://view.geoapi-airbusds.com/api/v1/map/imagery.wmts";
    parser.parse();
    let map = new Map("map", {
        center: [1.4431089, 43.6045002],
        zoom: 17
    });
    let layer = new OneAtlasLayer(WMTSUrl, {
        copyright: "© Airbus DS, Inc",
        serviceMode: "KVP",
        minScale: 0,
        maxScale: 18,
        apiKey: apiKey
    });
    map.addLayer(layer);
    layer.on("load", () => {
        layer.layers.map((currLayer, index) =>
            document.getElementById("selectLayer").add(new Option(currLayer.title, index)));
    });
    document.getElementById("selectLayer").onchange = (event) => {
        let index = event.target.value;
        layer.setVisibleLayer(layer.layers[index]);
    };
});

ArcGIS4

ArcGIS API for JavaScript 4 is the latest version of the ArcGIS API. It integrates 2D and 3D web maps that can include multiple rich information layers.

Note: WMTS layers aren’t yet supported for 3D SceneViews. Consider using Cesium for that purpose.

You can use the View API with ArcGIS JS using the OneAtlas data source module found here. This module extends esri/layers/WMTSLayer to add the required Authorization HTTP header needed to authenticate on the API.

function OneAtlasLayer(options);
PropertyTypeDescription
apiKeyStringYour own OneAtlas API key

Note: For more properties please see the official documentation

ArcGIS automatically calls the GetCapabilities endpoint to get all available layers. We added a layer switcher to demonstrate this feature.

Code

let apiKey = "PASTE YOUR OWN API KEY HERE";
require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "/js/view/arcgis4/arcgis4-oneatlas.js"
], (
    esriConfig,
    Map,
    MapView,
    OneAtlasLayer
) => {
    esriConfig.request.corsEnabledServers.push(
        "https://view.geoapi-airbusds.com");

    let layer = new OneAtlasLayer({
        url: "https://view.geoapi-airbusds.com/api/v1/map/imagery.wmts",
        copyright: "<a target='\_top href='http://www.intelligence-airbusds.com'> Airbus DS, Inc</a>",
        serviceMode: "KVP",
        apiKey: apiKey
    });

    let map = new Map({
        layers: [layer]
    });
    let view = new MapView({
        container: "map",
        map: map,
        center: [1.4431089, 43.6045002],
        scale: 2000
    });
    view.when(function() {
        layer.when(function() {
            view.extent = layer.fullExtent;
            layer.sublayers.map(sublayer =>
                selectSublayer.add(new Option(sublayer.title, sublayer.id)));
            let selectDiv = document.getElementById('selectDiv');
          selectDiv.style.visibility = "visible";
        });
    });
    document.getElementById("selectSublayer").onchange = (event) => {
        layer.activeLayer = layer.findSublayerById(event.target.value).clone();
    };
});

Search images with OL3

In the following example, we implemented an interaction on an OpenLayers map that allows to draw rectangles to send search requests to the API using our javascript wrapper. You can see the API response below the map (limited to 3 features max.) Each feature comes with metadata and URLs. You can then add these images on the map.

Code

let apiKey = "PASTE YOUR OWN API KEY HERE";
let customLayersAvailable;
let map;

let projection = ol.proj.get('EPSG:4326');
let projectionExtent = projection.getExtent();
let size = (ol.extent.getWidth(projectionExtent)/2) / 256;
let resolutions = Array.from(Array(18), (item, index) => size/Math.pow(2, index));
let matrixIds = Array.from(Array(18), (item, index) => index);
console.log(matrixIds);
console.log(resolutions);
initOneAtlas(apiKey, (data) => {
    let layers = data.maps.imagery.layers;
    let WMTSUrl = data.maps.imagery.links.wmts;
    let olLayers = layers.map((layer) => {
        return new ol.layer.Tile({
            title: layer.offerName,
            source: new ol.source.OneAtlas({
                layer: layer.id,
                url: WMTSUrl,
                wrapX: true,
                format: 'image/png',
                matrixSet: "4326",
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                apiKey: apiKey
            })
        });
    });
    let source = new ol.source.Vector();
    let vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            })
        })
    });
    olLayers.push(vector);
    map = new ol.Map({
        target: 'map',
        layers: olLayers,
        view: new ol.View({
            projection: "EPSG:4326",
            center: [1.4436936378479004,43.60455930233002],
            zoom: 18
        })
    });

    let draw;

    function addInteractions() {
        let geometryFunction;
        let value = 'Circle';
        geometryFunction = ol.interaction.Draw.createBox();
        draw = new ol.interaction.Draw({
            source: source,
            type: value,
            geometryFunction: geometryFunction
        });
        map.addInteraction(draw);

        draw.on("drawend", function(evt) {
            let bboxStr;
            let coords = evt.feature.getGeometry().getCoordinates()[0];
            bboxStr = coords[0] + ',' + coords[2];
            searchOneAtlas(apiKey, {
                bbox: bboxStr,
                size: 3
            }, (result) => {
                customLayersAvailable = result.features.map((feature) => {
                    let title = feature.properties.acquisitionDate.split(".")[0].replace("T", " ");
                    return new ol.layer.Tile({
                        title: title,
                        source: new ol.source.OneAtlas({
                            url: feature.properties.wmts,
                            wrapX: true,
                            format: 'image/png',
                            matrixSet: "4326",
                            projection: "EPSG:4326",
                            tileGrid: new ol.tilegrid.WMTS({
                                origin: ol.extent.getTopLeft(projectionExtent),
                                resolutions: resolutions,
                                matrixIds: matrixIds
                            }),
                            apiKey: apiKey
                        })
                    });
                });
                drawLayersAvailable();
                document.getElementById("json-response").innerHTML = JSON.stringify(result, null, 2);
            });
        });
    }

    addInteractions();
    let layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: 'Legend'
    });
    map.addControl(layerSwitcher);
});

function addLayer(customLayerId) {
    map.getLayers().insertAt(map.getLayers().getLength()-1, customLayersAvailable[customLayerId]);
    customLayersAvailable.splice(customLayerId, 1);
    drawLayersAvailable();
}

function drawLayersAvailable() {
    if(!customLayersAvailable.length) {
        document.getElementById("layers-available").innerHTML = "";
        return;
    }
    let customLayersAvailableHtml = "Layers available : <br>";
    customLayersAvailableHtml += customLayersAvailable.map((customLayerAvailable, index) => {
        return '<span class="custom-layer">' + customLayerAvailable.get("title") + "</span> " +
          "<button onclick='addLayer(" + index + ")'>Add</button><br>";
    }).join("");
    document.getElementById("layers-available").innerHTML = customLayersAvailableHtml;
}