Language
Integration with JavaScript
DELETED
You can can download our new streaming process user guide here while the documentation update on this portal is in progress
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);
Argument | Type | Description |
---|---|---|
apiKey | String | Your personnal OneAtlas API key |
callback | function | A 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);
Argument | Type | Description |
---|---|---|
apiKey | String | Your personnal OneAtlas API key |
options | Object | A JavaScript object as documented below |
callback | function | A 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
Parameter | Type | Default value | Description |
---|---|---|---|
bbox | String | None (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. |
insertdtstart | String | None | Images inserted before this date are excluded from the results. |
insertdtend | String | None | Images inserted after this date are excluded from the results. |
page | integer | 1 | Page number |
size | integer | 10 | Number 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);
Property | Type | Description |
---|---|---|
apiKey | String | Your 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);
Property | Type | Default Value | Description |
---|---|---|---|
apiKey | String | None (Required) | Your own OneAtlas API key |
serviceMode | String | ‘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);
Property | Type | Description |
---|---|---|
apiKey | String | Your 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));
});
Mapbox GL JS
Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using WebGL.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a WMS source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
let apiKey = 'YOUR BASEMAP APIKEY';
mapboxgl.accessToken = 'MAPBOX TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 8,
center: [-74.5447, 40.6892],
transformRequest: (url, resourceType)=> {
if(resourceType == 'Tile' && url.startsWith('https://view.geoapi-airbusds.com')) {
return {
url: url,
headers: { 'Authorization': 'Bearer ' + apiKey }
}
}
}
});
map.on('load', function() {
map.addLayer({
'id': 'Basemap WMS',
'type': 'raster',
'source': {
'type': 'raster',
'tiles': [
'https://view.geoapi-airbusds.com/api/v1/map/imagery.wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256'
],
'tileSize': 256
},
'paint': {}
}, 'aeroway-line');
});
</script>
</body>
</html>
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);
Property | Type | Description |
---|---|---|
apiKey | String | Your 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);
Property | Type | Description |
---|---|---|
apiKey | String | Your 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;
}
© Airbus Defence and Space 2022. All rights reserved. Privacy Policy | Legal Information