A portal must be configured using is a JavaScript file having the form of a commonjs module that exports an object with the fields described in the configuration fields chapter.
The file will have the form:
// any code here...
module.exports = {
// fields here...
};
The different fields of the configuration file are explained in the following section. The example given below may be a good starting point for the creation of a new configuration file.
Example
// Use global extent for web mercator
var maxExtent = [
-20037508.342789, // left (smallest longitude)
-20037508.342789, // bottom (smallest latitude)
20037508.342789, // right (biggest longitude)
20037508.342789, // top (biggest latitude)
];
function makeValuesTicks(min, max, values) {
if (Array.isArray(min)) {
values = min;
min = NaN;
max = NaN;
} else if (Array.isArray(max)) {
values = max;
max = NaN;
}
min = isNaN(min) ? values[0] : min;
max = isNaN(max) ? values[values.length - 1] : max;
return values.map(function(value) {
return [(value - min) / (max - min), Math.round(value * 1e2) / 1e2];
});
}
function makeDeltaTicks(min, max, delta, multiple) {
var start = min + delta;
if (multiple && start % delta !== 0) {
start = ODL.nextMultiple(start, delta);
}
var values = [];
values.push(min);
for (var value = start; (value - min) / (max - min) < 0.92; value += delta) {
values.push(value);
}
values.push(max);
return makeValuesTicks(min, max, values);
}
function argoMarker(color) {
return {
graphicName: 'left_arrow_tip',
pointRadius: 4,
strokeWidth: 1,
strokeColor: color,
fillColor: color,
};
}
module.exports = {
version: '1.3.0',
/* Services */
servers: [
{
id: 'example',
serviceURL: 'https://syntoolws.example.com',
dataURLs: [
'https://syntooldata1.example.com',
'https://syntooldata2.example.com',
'https://syntooldata3.example.com',
'https://syntooldata4.example.com',
'https://syntooldata5.example.com',
'https://syntooldata6.example.com',
'https://syntooldata7.example.com',
'https://syntooldata8.example.com',
'https://syntooldata9.example.com',
'https://syntooldata10.example.com',
],
productIdMap: {
'3857_ARGO_Deep_NATL1000': '3857_ARGO_Deep_NATL1000',
},
},
],
/* Map */
projection: 'EPSG:3857', // web mercator projection
maxExtent: maxExtent,
baseLayers: [
new OpenLayers.Layer.Google('Google Satellite', {
type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 20,
maxExtent: new OpenLayers.Bounds(maxExtent),
}),
new OpenLayers.Layer.Google('Google Hybrid', {
type: google.maps.MapTypeId.HYBRID,
numZoomLevels: 20,
maxExtent: new OpenLayers.Bounds(maxExtent),
}),
new OpenLayers.Layer.Google('Google Physical', {
type: google.maps.MapTypeId.TERRAIN,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(maxExtent),
}),
new OpenLayers.Layer.Google('Google Streets', {
type: google.maps.MapTypeId.ROADMAP,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(maxExtent),
}),
],
/* Timeline */
yearsRange: [2010, 2022],
timeRanges: [
['6-Hour', '6h'], // 6 hours timespan
['Daily', '1d', true], // 1 day timespan and selected by default
['3-Day', '3d'], // 3 day timespan
['Weekly', '1w'], // 1 week timespan
['Bi-weekly', '2w'], // 2 weeks timespan
],
/* Misc */
storageId: 'example',
markerSymbols: {
left_arrow_tip: [-8,4, -8,-4, 0,0, -8,4],
},
/* Predefined Data */
hotspots: [
],
drawableShapes: [
],
products: [
// The required USER_SHAPES product
{
label: '<i>User Shapes</i>',
id: 'User_Shapes',
type: 'USER_SHAPES',
mustBeCurrent: false,
excludedFromColoc: true,
stackLevel: 150,
},
// Other products
{
/* General */
label: 'Drifters 1000m North Atlantic speed (ANDRO)', // the label shown in the left products panel
id: '3857_ARGO_Deep_NATL1000', // the id of this product in the index
tags: [ // the search and categorization tags
'Group:In Situ', //
'Data type:In-Situ', //
'Level of processing:In-Situ', //
'Sensor:In-Situ', //
'Platform / Mission:In-Situ', //
'Depth:1000m', //
'Display type:Arrows', //
],
type: 'TRAJECTORIES', // render the datasets of this product as trajectories
colormaps: [{
palette: 'images/palettes/yellow_red.cpt', // use the "yellow" to "red" color palette
ticks: makeDeltaTicks(0, 0.35, 0.05), // with ticks `0` at the left, `0.35` at the right,
// and intermediate ticks for every `0.05` increments
}],
unit: 'm/s', // the unit of the values in "colormaps"
/* Timeline */
mustBeCurrent: false, // the datasets of this product don't need to intersect the current date/time,
// only intersect the current timespan
/* Pagination */
datasetWeight: 0.1, // the datasets of this products take a 10th of time to render compared to normal datasets
/* Map */
mapMinZoom: 2, // this product is only rendered starting from zoom level 2
stackLevel: 90,
/* Trajectories */
dataFields: {
// the "speed" field
speed: {
channel: 'speed', // represents the channel "speed" of the dataset
min: 0, // with a minimum value of 0
max: 0.35, // with a maximum value of 0.35
},
},
renderFields: {
color: 'speed', // render the "speed" field of the datasets using the colormap defined in "colormaps"
},
marker: argoMarker, // use the `argoMarker` function defined above to render the trajectory marker
markerPosition: 1, // the trajectory marker should always be at the end of the trajectory
},
],
};
A portal configuration can also be loaded asynchronously by exporting a Promise.