Configuration

Configuration file

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
    },
  ],
};

Asynchronous configuration file

A portal configuration can also be loaded asynchronously by exporting a Promise.

Example

config.js

module.exports = ODL.importScript('url/of/config.js', '__config');

url/of/config.js

window.__config = (function() {
  'use strict';

  // any code here...
  return {
    // fields here...
  };
})();