Ancillary Types

URL Shortener

URLShortenerCreator

Type: (url: URL) -> URLShortener

This function will be called in order to shorten a URL, and must return a URLShortener.

Parameter Type Description
url URL The URL that needs shortening.

Note: This function might be called multiple times, or just once and its return value cached.

URLShortener

Type: object

Field Type Default Description
url URL Required The URL to send the HTTP request to.
method string 'GET' The request method (example 'GET', 'POST').
data object Optional The data to be sent with the request. If provided, data will be encoded and added to the URL for 'HEAD' and 'GET' requests, or sent as the request's form data body for all other request methods.
responseType ResponseType 'text' How the response should be interpreted.
callback ShortenerCallback Optional If provided, will be called with the received response as its only argument and should return the shortened URL or an Error object. Otherwise the response will be treated as the shortened URL.
errorback ShortenerErrorback Optional If provided, will be called with the error that occurred as its only argument and should return the shortened URL or an Error object. Otherwise the error will be handled as is.
Example
function createBitlyShortener(url) {
  // For more info see http://dev.bitly.com/authentication.html#apikey
  var login = '<your bitly login>';
  var apiKey = '<your bitly api-key>';

  return {
    method: 'GET',
    url: (
      window.location.protocol === 'http:'
      ? 'http://api.bit.ly/v3/shorten'
      : 'https://api-ssl.bit.ly/v3/shorten'
    ),
    data: {longUrl: url, apiKey: apiKey, login: login},
    responseType: 'json',
    callback: function(response) {
      if (response.status_code === 200) {
        return response.data.url;
      } else {
        return new Error(response.status_txt);
      }
    },
  };
}

ResponseType

Type: string
Possible values:

For more info see MDN's XMLHttpRequest.responseType.

ShortenerCallback

Type: (response) -> URL | Error

ShortenerErrorback

Type: (error: Error) -> URL | Error

Catalog (aka Products List)

SortGroupsFn

Type: (key: string) -> (group1: string|null, group2: string|null) -> number

This function receives the tag key used to group the products and must return a function that compares the passed tag values or null for the default group.

The comparator function should return:

Note: This function might be called multiple times, or just once and its return value cached.

Group (Deprecated: Use product's tags and groupProductsBy instead)

Type: object

Field Type Default Description
label string null The label of the group (used in the products side panel if given)
products string[] Required An ordered list of IDs of the products in that group

Note: All product IDs MUST be IDs of existing products in the config.

Note: All product IDs MUST be unique (a product can be in no group or in one group and only once in that group).

Deprecation note: When label is not null, will add a Group:${label} tag to each one of products, if that product doesn't have a Group tag already.

Messages

Message

Type: object

Field Type Default Description
id string Required The ID of the message used to mainly to remember if it was shown before.
type MessageType Required The type of the message, used to style it.
text string Required The body of the message, it supports HTML.
showOnce boolean false When set to true, once the user closes the message it will not be shown again.
Examples
{
  id: 'odyssea reprocessing from 01/07/2016 to 03/02/2017',
  type: 'warning',
  text: 'All Odyssea products are currently being reprocessed from July 2016 until the 3<sup>rd</sup> February 2017.',
  showOnce: true,
}
{
  id: 'test_info',
  type: 'info',
  text: 'This is an info message.',
}
{
  id: 'test_warning',
  type: 'warning',
  text: 'This is a warning message.',
}
{
  id: 'test_error',
  type: 'error',
  text: 'This is an error message.',
}
{
  id: 'test_long',
  type: 'info',
  text: 'This is a loooooooooooooooooooong loooooooooooooooong loooooooooong long long loooooooooong long long loooooooooong long message.',
}
{
  id: 'test_multi_lines',
  type: 'info',
  text: 'This is a message<br>on multiple<br>lines.',
}
{
  id: 'test_multi_spaces',
  type: 'info',
  text: 'This is a message       with    lots of     spaces.',
}

MessageType

Type: string
Possible values:

Hotspot

Type: string or object

string (hotspot permalink)

Can be found by Right-Clicking a hotspot item (from the "Hotspots" panel) and choosing "Copy link address" (or equivalent).

Note: Not to be confused with a share permalink (or a live URL).

Note: Not to be confused with a short link.

Example
'?name=Chlorophyll%20A%20and%20Globcurrent%20%40%20Agulhas%20region&date=1412426592000&timespan=1d%3B1w&products=900913_Chlorophyll_a_concentration_VIIRS,900913_GlobCurrent_L4_geostrophic_streamline&extent=768344.98869256,-5048359.949897,4280779.311964,-3243223.0901656&opacity=100,50&stackLevel=50,90'

object

Field Type Default Description
name string Required The name shown in the "Hotspots" panel
description URL Optional A URL of a description page
date Date or integer >= 0 Optional If provided, the date of the hotspot or the date in milliseconds since 1 January 1970 UTC
extent number[4] Optional The extent of the viewport defined as [left, bottom, right, top] all in the projection projection.
timespan Timespan Optional The timespan used
zoom integer >= 0 Optional The zoom level
products string[] Optional A list of product ids
opacity number[] Optional A list of product opacities
stackLevel number[] Optional A list of product stack levels
pattern string[] Optional A list of product filtering patterns
Example
{
  name: 'Chlorophyll A and Globcurrent @ Agulhas region',
  date: 1412426592000, // 2014-10-04T12:43:12.000Z
  extent: [768344.98869256, -5048359.949897, 4280779.311964, -3243223.0901656],
  timespan: '1d',
  zoom: 3,
  products: [
    '900913_Chlorophyll_a_concentration_VIIRS',
    '900913_GlobCurrent_L4_geostrophic_streamline',
  ],
  opacity: [100, 50],
  stackLevel: [50, 90],
}

Layer

Type: OpenLayers.Layer

For more info see OpenLayers 2's official documentation.

Examples
new OpenLayers.Layer.Google('Google Satellite', {
  type: google.maps.MapTypeId.SATELLITE,
  numZoomLevels: 20,
  maxExtent: new OpenLayers.Bounds(maxExtent),
}),
new OpenLayers.Layer.Google('Google Streets', {
  type: google.maps.MapTypeId.ROADMAP,
  numZoomLevels: 22,
  maxExtent: new OpenLayers.Bounds(maxExtent),
}),

Timeline

TimeRange

Type: [string, Timespan, boolean] or [string, Timespan]

The elements of the tuple are as follows:

  1. The label of the time range.
  2. The width of the time range.
  3. true if the time range should be selected by default, otherwise false.

For more info see Timeline.

Examples
['6-Hour', '6h']
['Daily', '1d', true]

Timespan

Type: string

Syntax

<Timespan> ::= ( <number> <unit> )+
<number> ::= <a positive decimal number>
<unit> ::= "s" # second
         | "M" # minute
         | "h" # hour
         | "d" # day
         | "w" # week
         | "m" # month
         | "y" # year
         | "D" # decade
         | "c" # century
Examples

Import Policy

ImportPolicyFn

Type: (url: URL) -> ImportPolicy

The function that will be called

for each URL that needs to be imported automatically to determine if that operation should be allowed, denied, or otherwise the user should be asked with a prompt (the default).

If a function is provided, it will be called in order to determine the import policy for the given URL, and must return a ImportPolicy.

Parameter Type Description
url URL The URL that is about to be imported automatically.

Note: This function might be called multiple times, or just once and its return value cached.

Example
function importFromSEAShotOnly(url) {
  if (url.origin === 'https://seashot.odl.bzh') {
    return 'allow';
  }
  return 'deny';
}

ImportPolicy

Type: string
Possible values:

Color

Type: string

See MDN's CSS Color, note that only a restricted subset of formats are supported:

Examples

Colormap

Type: object

Field Type Default Description
label string Optional The label, if any, to be shown with the colormap. Useful in case of multiple colormaps for the same product.
colorPalette URL Required The URL of the color palette to be used. For more info see the Color Palettes section.
ticks ColormapTick[] Required The list of tick positions and values or labels to be placed on the colormap.

Helper JS functions

The following helper functions are for creating a colormap tick list in certain patterns:

Example
{
  // use the "yellow" to "red" color palette
  colorPalette: 'images/palettes/yellow_red.cpt',

  // with ticks `0` at the left, `0.35` at the right,
  // and intermediate ticks for every `0.05` increments
  ticks: makeDeltaTicks(0, 0.35, 0.05),
}

ColormapTick

Type: [number ∈ [0, 1], number | string]

The elements of the tuple are as follows:

  1. The relative position of the tick on the colormap (0 being the minimum and 1 the maximum).
  2. The value at the position of the tick as number or the label as string.

Note: Values of type number may be used in the future to calculate the value-under-cursor.

Examples

Color Palettes

A color palette is a sequence of colors in a specific order over a range of values. With three special colors:

Supported formats: