Product Types

Single-Image Raster

Type: 'IMAGE'

Used for non-tiled raster datasets.

Allows unconstrained zoom.

Example
{
  /* General */
  label: 'SST L3C ABI GOES-16 (Météo-France)',
  id: '3857_GOES16_OSISAF_L3C_SST_raster',
  tags: [
    'Group:Temperature',
    'Data type:Remote-Sensing',
    'Geophysical Variable:Temperature',
    'Level of processing:L3',
    'Sensor:ABI',
    'Platform / Mission:GOES-16',
    'Depth:Surface',
    'Display type:Raster',
    'NRT',
  ],
  type: 'IMAGE',
  description: 'Sea Surface Temperature from GOES-16 ABI sensor, one snapshot every hour',
  selected: false,
  colormaps: [{
    colorPalette: 'images/palettes/medspiration.cpt',
    ticks: makeDeltaTicks(0, 32, 4),
  }],
  unit: '°C',

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  opacity: 0.70,
  stackLevel: 55,
  outlines: 'HIDDEN_IN_ZOOM_RANGE',
}

Tiled Raster

Type: 'ZXY'

Used for tiled raster datasets.

Field Type Default Description
... ... ... The fields described in Product.
tileOrigin number[2] Required The coordinates of the tile (0, 0) defined as [lon, lat] both in the projection projection.
tileSize number[2] Required The size of each tile defined as [width, height] both in pixels.
Example
{
  /* General */
  label: 'Sea ice concentration L3 SSMIS F16, F17, F18 (Eumetsat)',
  id: '3857_OSISAF_SSMIS_sea_ice_concentration',
  tags: [
    'Group:Sea Ice Concentration',
    'Data type:Remote-Sensing',
    'Geophysical Variable:Ice Concentration',
    'Level of processing:L3',
    'Sensor:SSMIS',
    'Platform / Mission:F16',
    'Platform / Mission:F17',
    'Platform / Mission:F18',
    'Depth:Surface',
    'Display type:Raster',
    'NRT',
  ],
  type: 'ZXY',
  selected: false,
  colormaps: [{
    colorPalette: 'images/palettes/ice.cpt',
    ticks: ODL.ConfigUtils.makeDeltaTicks(0, 100, 10),
  }],
  unit: '%',

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  mapMinZoom: 3,
  opacity: 1.0,
  stackLevel: 10,

  /* Tiled Raster */
  tileOrigin: tileOrigin,
  tileSize: tileSize,
}

Layer

Type: 'LAYER'

Used for third-party/external layers that are not known by Syntool services servers, thus are neither included in the coverage nor the find nearest requests.

Internally, products with this type have a single and unique dataset created automatically with a temporal coverage limited by validFrom and validTill.

Useful for adding Google Earth Engine, SHOM, or Meteosat layers to a portal.

Field Type Default Description
... ... ... The fields described in Product.
layer Layer Required The layer to be used to represent the one and only dataset of the product.
validFrom Date Optional If provided, the layer will be hidden before that date.
validTill Date Optional If provided, the layer will be hidden starting from that date.
updateLayer LayerUpdateFn Optional If provided, gets called to update the layer for a given current datetime.
Example
{
  /* General */
  label: 'True Color SEVIRI MSG (Eumetsat)',
  id: 'LOCAL_Meteosat-meteosat_msg_natural',
  tags: [
    'Group:Ocean Color',
    'Data type:Remote-Sensing',
    'Geophysical Variable:Color',
    'Level of processing:L1',
    'Sensor:SEVIRI',
    'Platform / Mission:MSG',
    'Depth:Surface',
    'Display type:Raster',
    'NRT',
  ],
  type: 'LAYER',
  description: 'Natural Colour RGB from Meteosat. Please note that the availability for this product is not advertised in the timeline.',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,
  permanent: true,

  /* Map */
  opacity: 1,
  stackLevel: 50,

  /* Layer */
  layer: new OpenLayers.Layer.WMS(
    'LOCAL_Meteosat_dataset-meteosat_msg_natural',
    'https://view.eumetsat.int/geoserver/wms',
    {
      SERVICE: 'WMS',
      VERSION: '1.3.0',
      FORMAT: 'image/png',
      TRANSPARENT: true,
      WIDTH: 512,
      HEIGHT: 512,
      STYLES: 'raster',
      CRS: 'EPSG:4326',
      LAYERS: 'msg_fes:rgb_natural',
    },
    {isBaseLayer: false}
  ),
  updateLayer(layer, currentDate) {
    var quarterHour = Math.floor(currentDate.getMinutes() / 15) * 15;
    var timeParam = (
      currentDate.toISOString().slice(0, 13) + ':' + quarterHour + ':00.000Z'
    );

    if (timeParam !== layer.params.TIME) {
      layer.mergeNewParams({TIME: timeParam});
    }
  },
}

Time Layer

Type: 'TIMELAYER'

Used for third-party/external layers that are known by Syntool services servers, but their data is loaded via an external WMS service, for example.

Useful when no two datasets of the product overlap in time.

Field Type Default Description
... ... ... The fields described in Product.
layer Layer Required Any OpenLayers layer to be used for all the datasets of the product.
updateLayer LayerUpdateFn Required Gets called to update the layer for a given current datetime.
Example
{
  /* General */
  label: 'SST MUR L4 (NASA, GHRSST)',
  id: '3857_GIBS_GHRSST_L4_MUR_Sea_Surface_Temperature',
  tags: [
    'Group:Temperature',
    'Data type:Remote-Sensing',
    'Geophysical Variable:Temperature',
    'Level of processing:L4',
    'Sensor:Multi-sensor',
    'Platform / Mission:Multi-mission',
    'Depth:Surface',
    'Display type:Raster',
    'NRT',
  ],
  type: 'TIMELAYER',
  description: 'Sea Surface Temperature MUR Global foundation L4 product',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,
  permanent: false,

  /* Map */
  opacity: 1,
  stackLevel: 50,

  /* Time Layer */
  layer: new OpenLayers.Layer.WMTS({
    name: '3857_GHRSST_L4_MUR_Sea_Surface_Temperature',
    url: 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/wmts.cgi?',
    layer: 'GHRSST_L4_MUR_Sea_Surface_Temperature',
    matrixSet: 'GoogleMapsCompatible_Level7',
    format: 'image/png',
    opacity: 1.0,
    isBaseLayer: false,
    style: null,
    hasTime: false,
    serverResolutions: [
      156543.03390625,
      78271.516953125,
      39135.7584765625,
      19567.87923828125,
      9783.939619140625,
      4891.9698095703125,
      2445.9849047851562,
      1222.9924523925781,
    ],
  }),
  updateLayer(layer, currentDate) {
    var timeParam = currentDate.toISOString().slice(0, 10);
    if (timeParam !== layer.params.TIME) {
      layer.mergeNewParams({TIME: timeParam});
    }
  },
}

ncWMS

Type: 'NCWMS'

Used for ncWMS based layers like CMEMS ones.

The tiles will be requested with a TIME parameter set to the dataset's mid datetime in an ISO 8601 format, unless overwritten by the returned value of the ncwmsQueryAdapter.

Field Type Default Description
... ... ... The fields described in Product.
ncwmsURL URL Required The URL of the ncWMS.
ncwmsParams object {} The parameters to pass with every request to the ncWMS server.
ncwmsQueryAdapter NcWMSQueryAdapter Optional If provided, gets called when a dataset is created and each time it is added to the map.
Example
{
  /* General */
  label: "Wind WRF Maui-O'ahu (PacIIOS)",
  id: '3857_PACIOOS_WRF_MAUI_ATMOS_wind',
  tags: [
    'Group:Metocean information',
    'Data type:Model',
    'Geophysical Variable:Wind',
    'Level of processing:L4',
    'Sensor:Model',
    'Platform / Mission:Model',
    'Depth:Atmospheric',
    'Display type:Arrows',
  ],
  type: 'NCWMS',
  selected: true,
  colormaps: [{
    colorPalette: 'images/palettes/GMT_jet.cpt',
    ticks: makeDeltaTicks(0, 30, 3),
  }],
  unit: 'knots',

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  opacity: 0.75,
  stackLevel: 160,

  /* ncWMS */
  ncwmsURL: 'https://pae-paha.pacioos.hawaii.edu/thredds/wms/wrf_mo/WRF_Maui-Oahu_Regional_Atmospheric_Model_best.ncd',
  ncwmsParams: {
    TRANSPARENT: true,
    COLORSCALERANGE: '0,15.43333',
    NUMCOLORBANDS: 256,
    ABOVEMAXCOLOR: 'extend',
    BELOWMINCOLOR: 'extend',
    LAYERS: 'wind',
    STYLES: 'stumpvec/jet',
  },
  ncwmsQueryAdapter(dataset) {
    return {params: {TIME: dataset.start.toISOString().replace('.000Z', 'Z')}};
  },
}

Arrow Vector Field

Type: 'ARROWS'

Used for arrow vector fields.

Field Type Default Description
... ... ... The fields described in Product.
dataFields DataFields Required Defines the fields (or channels) found in the datasets with their min and max.
renderFields RenderFields Required Defines the fields used for rendering the datasets.
density number ∈ ]0, 2] 1 The density used when rendering the product's datasets.

The renderFields field must include:

When the color render field references a data field, the first colormap of this product will be used to convert the data field's value to a color.

Example
{
  /* General */
  label: 'Surface current vector model Mercator PSY4QV2R2 (CMEMS)',
  id: '3857_MERCATOR_current_daily_agulhas_vectorfield',
  tags: [
    'Group:Current',
    'Data type:Model',
    'Geophysical Variable:Current',
    'Level of processing:L4',
    'Sensor:Model',
    'Platform / Mission:Model',
    'Depth:Surface',
    'Display type:Arrows'
  ],
  type: 'ARROWS',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  opacity: 1,
  stackLevel: 110,

  /* Arrow Vector Field */
  dataFields: {
    modulus: {
      channel: 0,
      min: 0,
      max: 2,
    },
    angle: {
      channel: 1,
      min: 0,
      max: 360,
    },
  },
  renderFields: {
    modulus: 'modulus',
    angle: 'angle',
    color: '#FFF',
  },
}

Barbs Vector Field

Type: 'BARBS'

Used for barbs vector fields.

Field Type Default Description
... ... ... The fields described in Product.
dataFields DataFields Required Defines the fields (or channels) found in the datasets with their min and max.
renderFields RenderFields Required Defines the fields used for rendering the datasets.
density number ∈ ]0, 2] 1 The density used when rendering the product's datasets.

The renderFields field must include:

When the color render field references a data field, the first colormap of this product will be used to convert the data field's value to a color.

Example
{
  /* General */
  label: '10m wind barbs model ECMWF 1/10° hourly',
  id: '3857_ECMWF_model_wind_0100deg_vectorfield',
  tags: [
    'Group:Wind',
    'Data type:Model',
    'Geophysical Variable:Wind',
    'Level of processing:L4',
    'Sensor:Model',
    'Platform / Mission:Model',
    'Depth:Atmospheric',
    'Display type:Barbs',
    'NRT',
  ],
  type: 'BARBS',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  opacity: 1,
  stackLevel: 140,

  /* Barbs Vector Field */
  dataFields: {
    modulus: {
      channel: 0,
      min: 0,
      max: 25.4,
    },
    angle: {
      channel: 1,
      min: 0,
      max: 360,
    },
  },
  renderFields: {
    modulus: 'modulus',
    angle: 'angle',
    color: '#FFF',
  },
}

Streamlines

Type: 'STREAMLINES'

Used for streamline vector fields.

Field Type Default Description
... ... ... The fields described in Product.
dataFields DataFields Required Defines the fields (or channels) found in the datasets with their min and max.
renderFields RenderFields Required Defines the fields used for rendering the datasets.
density number ∈ ]0, 2] 1 The density used when rendering the product's datasets.
speed number > 0 1 The factor to multiply the modulus by when rendering the product's datasets. (Bigger values imply faster streamlines)

The renderFields field must include:

Example
{
  /* General */
  label: '10m wind streamlines model ECMWF 1/10° hourly',
  id: '3857_ECMWF_model_wind_0100deg_streamlines',
  tags: ['Group:Wind', 'Data type:Model', 'Geophysical Variable:Wind', 'Level of processing:L4', 'Sensor:Model', 'Platform / Mission:Model', 'Depth:Atmospheric', 'Display type:Streamlines', 'NRT'],
  type: 'STREAMLINES',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  opacity: 0.3,
  stackLevel: 140,

  /* Streamlines */
  dataFields: {
    modulus: {
      channel: 0,
      min: 0,
      max: 25.4,
    },
    angle: {
      channel: 1,
      min: 0,
      max: 360,
    },
  },
  renderFields: {
    modulus: 'modulus',
    angle: 'angle',
    color: '#FFF',
  },
  speed: 0.05,
}

Trajectories

Type: 'TRAJECTORIES'

Used for trajectories with the notion of time. Allows to have a marker.

Field Type Default Description
... ... ... The fields described in Product.
dataFields DataFields Required Defines the fields (or channels) found in the datasets with their min and max.
renderFields RenderFields Required Defines the fields used for rendering the datasets.
marker Marker Optional The trajectory marker to render to indicate the position and direction at the closest (in the past) point of the trajectory to the current datetime. Defaults to a diamond shape.
markerPosition number ∈ [0, 1] Optional If provided specifies a fixed position (independent of the current datetime) of the marker. 0 being the first point of the trajectory and 1 the last.
startMarker Marker Optional The trajectory marker to render at the start of the trajectory.
endMarker Marker Optional The trajectory marker to render at the end of the trajectory.
withRangeMarkers boolean false If true brackets will rendered around the part of the trajectory that is in the current timespan.
restrictMarkersToZoomRange boolean false If true markers will not be shown until the dataset is shown for the first time, which can be restricted by the product's zoom range (mapMinZoom and mapMaxZoom). Otherwise the markers will be shown for all in-map datasets of the product regardless of the zoom level.

The renderFields field must include a color field color.

When the color render field references a data field, the first colormap of this product will be used to convert the data field's value to a color.

Note: The trajectories Product's outline field defaults to 'HIDDEN_IN_ZOOM_RANGE'.

Example
{
  /* General */
  label: 'Drifters 1000m North Atlantic speed (ANDRO)',
  id: '3857_ARGO_Deep_NATL1000',
  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',
  colormaps: [{
    palette: 'images/palettes/yellow_red.cpt',
    ticks: makeDeltaTicks(0, 0.35, 0.05),
  }],
  unit: 'm/s',

  /* Timeline */
  mustBeCurrent: false,

  /* Pagination */
  datasetWeight: 0.1,

  /* Map */
  mapMinZoom: 2,
  stackLevel: 90,

  /* Trajectories */
  dataFields: {
    speed: {
      channel: 'speed',
      min: 0,
      max: 0.35,
    },
  },
  renderFields: {
    color: 'speed',
  },
  marker(color) {
    return {
      graphicName: 'left_arrow_tip',
      pointRadius: 4,
      strokeWidth: 1,
      strokeColor: color,
      fillColor: color,
    };
  },
  markerPosition: 1,
}

GeoJSON

Type: 'GEOJSON'

Used for trajectories without the notion of time (like synoptic datasets).

Field Type Default Description
... ... ... The fields described in Product.
dataFields DataFields Required Defines the fields (or channels) found in the datasets with their min and max.
renderFields RenderFields Required Defines the fields used for rendering the datasets.

The renderFields field must include a color field color.

When the color render field references a data field, the first colormap of this product will be used to convert the data field's value to a color.

Note: The trajectories Product's outline field defaults to 'HIDDEN_IN_ZOOM_RANGE'.

Example
{
  /* General */
  label: 'SST fronts from VISSR (URI)',
  id: '3857_SST_fronts_VISSR',
  tags: [
    'Group:Synoptic',
    'Data type:Remote-Sensing',
    'Geophysical Variable:Fronts',
    'Level of processing:Added-value',
    'Sensor:VISSR',
    'Platform / Mission:GOES',
    'Depth:Surface',
    'Display type:Lines',
  ],
  type: 'GEOJSON',
  selected: false,
  colormaps: [{
    colorPalette: 'images/palettes/GMT_jet.cpt',
    ticks: makeDeltaTicks(0, 5, 1),
  }],
  unit: 'K',

  /* Timeline */
  mustBeCurrent: true,

  /* Map */
  mapMinZoom: 6,
  opacity: 1,
  stackLevel: 90,

  /* GeoJSON */
  dataFields: {
    sst_difference: {
      channel: 'sst_difference',
      min: 0,
      max: 5,
    },
  },
  renderFields: {
    color: 'sst_difference',
  },
}

Moorings

Type: 'MOORED'

Used for moored buoys.

Field Type Default Description
... ... ... The fields described in Product.
marker MarkerStyle Optional Defines the pictogram displayed at the location of the dataset. Defaults to a buoy icon.
Example
{
  /* General */
  label: 'Buoy wave spectrum (Globwave)',
  id: '3857_Globwave_spectral_density',
  tags: ['Group:Wave', 'Group:In Situ', 'Data type:In-Situ', 'Geophysical Variable:Wave', 'Sensor:In-Situ', 'Platform / Mission:In-Situ', 'Display type:Points'],
  type: 'MOORED',
  selected: false,

  /* Timeline */
  mustBeCurrent: true,

  /* Pagination */
  datasetWeight: 0,

  /* Map */
  opacity: 1,
  stackLevel: 90,
}

User Shapes

Type: 'USER_SHAPES'

See Annotations section.

Field Type Default Description
... ... ... The fields described in Product.
style ShapeStyleMap Optional The shapes rendering style description.
Example
{
  /* General */
  label: '<i>User Shapes</i>',
  id: '900913_User_Shapes',
  tags: [
    'Group:Annotation',
    'Data type:Annotation',
    'Geophysical Variable:Annotation',
    'Level of processing:Annotation',
    'Sensor:Annotation',
    'Platform / Mission:Annotation',
    'Depth:Annotation',
    'Display type:Annotation',
  ],
  type: 'USER_SHAPES',
  selected: false,

  /* Timeline */
  mustBeCurrent: false,
  excludedFromColoc: true,

  /* Map */
  opacity: 1,
  stackLevel: 150,

  /* User Shapes */
  style: {
    ALL: {
      strokeColor: '#FFF',
      fillOpacity: 0,
      fontSize: 16,
    },
    WKT: {
      strokeColor: '#AAAAEE',
      fillOpacity: 0.4,
      fontSize: 12,
    },
  },
}

Server Shapes

Type: 'SERVER_SHAPES'

See Annotations section.

Field Type Default Description
... ... ... The fields described in Product.
style ShapeStyleMap Optional The shapes rendering style description.
shapes Shape[] Required A list of predefined shapes. For more info see Annotations.
Example
{
  /* General */
  label: 'Predefined Annotations',
  id: 'LOCAL_Predefined_Annotations',
  type: 'SERVER_SHAPES',
  selected: false,

  /* Timeline */
  mustBeCurrent: false,

  /* Map */
  opacity: 1,
  stackLevel: 150,

  /* Server Shapes */
  shapes: [
    {
      type: 'TEXT',
      text: 'Text goes here',
      start: 1459814400000,
      end: 1459900800000,
      location: [133, -21],
    },
    {
      type: 'ARROW',
      text: '',
      start: 1459814400000,
      end: 1459900800000,
      points: [
        [28, -33],
        [27, -33],
      ],
    },
  ],
}

Ancillary Types

LayerUpdateFn

Type: (layer: Layer, currentDate: Date) -> void

This function will be called to update the passed layer for the given current date.

Parameter Type Description
layer Layer The layer to update.
currentDate Date The current datetime.
Example
function(layer, currentDate) {
  var timeParam = currentDate.toISOString().slice(0, 19) + 'Z';
  if (timeParam !== layer.params.TIME) {
    layer.mergeNewParams({TIME: timeParam});
  }
}

NcWMSQueryAdapter

Type: (dataset: Dataset) -> NcWMSQuerySettings

This function will be called when a ncWMS dataset is created and each time it is added to the map in order to get the ncWMS query settings to be used. This function is passed the dataset in question and must return a NcWMSQuerySettings.

Parameter Type Description
dataset Dataset The ncWMS dataset.
Example
function(dataset) {
  var timeParam = dataset.start.toISOString().replace('.000Z', 'Z');
  return {params: {TIME: timeParam}};
}

NcWMSQuerySettings

Type: object

Field Type Default Description
url URL Optional The URL of the ncWMS to be used. Overrides the product's ncwmsURL.
params object Optional Parameters to pass with every request to the ncWMS server. Will be merged with the product's ncwmsParams.

Dataset Markers

MarkerSymbols

Type: {[name: string]: MarkerSymbol}

Example
{
  left_arrow_tip: [-8,4, -8,-4, 0,0, -8,4],
}

MarkerSymbol

Type: MarkerPolygonSymbol or MarkerNodeSymbol

MarkerPolygonSymbol

Type: number[]

A list of coordinate pairs (x and y) (much like the MDN's SVG polygon points) which will form a polygon anchored on (0, 0).

Example
[-8,4, -8,-4, 0,0, -8,4]

gives the following SVG polygon:

<polygon points="-8,4 -8,-4 0,0 -8,4"></polygon>

left arrow tip

MarkerNodeSymbol

Type: object

Field Type Default Description
node SVGElement Required The SVG element to clone when rendering this symbol.
width number > 0 Required The width of the symbol.
height number > 0 Required The height of the symbol.

Note: The anchor point used when placing the node is (0, 0).

Example
{
  // <circle r="10"/>
  node: ODL.S('circle', {r: 10}),
  width: 20,
  height: 20,
}

Marker

Type: MarkerStyle or MarkerFn

Specifies the style in which the marker should be rendered.

MarkerFn

Type: (color: Color, dataset: Dataset, timestamp: number) -> MarkerStyle?

If a function is provided, it will be called in order to get the marker style for the given color, and must return a MarkerStyle or null to use the default one.

Parameter Type Description
color Color The color of the marker should have.
dataset Dataset The dataset in which the marker is used.
timestamp number The position of the marker as timestamp in milliseconds.

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

Examples
function argoMarker(color) {
  return {
    graphicName: 'left_arrow_tip',
    pointRadius: 4, // 2*4 = 8px wide and heigh on screen
    strokeWidth: 1,
    strokeColor: color,
    fillColor: color,
  };
}
function eddyMarker(color, dataset, timestamp) {
  var dataValues = dataset.getDataValuesAtTimestamp(timestamp);
  if (dataValues) {
    var radiusInPx = (
      ODL.Syntool.mapView.getViewportDistanceFromProjectedDistance(
        ODL.Syntool.mapView.convertFromUnit(dataValues.radius, 'km')
      )
    );
    return {
      pointRadius: radiusInPx,
      strokeWidth: 3,
      strokeColor: '#000',
      fillOpacity: 0,
    };
  }

  return {
    pointRadius: 4,
    strokeWidth: 1,
    strokeColor: color,
    fillColor: color,
  };
}

MarkerStyle

Type: MarkerStateStyle or object

Field Type Default Description
default MarkerStateStyle Required The style to use for the marker by default.
selected MarkerStateStyle default The style to use for the marker when the dataset is selected.

Note: If a single MarkerStateStyle is given (instead of an object), it will be used for all the states.

MarkerStateStyle

Type: ImageMarkerStyle or PolygonMarkerStyle

ImageMarkerStyle

Type: object

Field Type Default Description
externalGraphic URL Required The URL to the external image to use.
graphicWidth number > 0 Required The width in pixels of the marker when rendered on the screen.
graphicHeight number > 0 Required The height in pixels of the marker when rendered on the screen.
graphicOpacity number ∈ [0, 1] 1 The opacity of the marker. 0.0 (fully transparent) to 1.0 (fully opaque).
graphicXOffset number -width / 2 The pixel offset along the positive x axis (left to right) for displacing the image.
graphicYOffset number -height / 2 The pixel offset along the positive y axis (top to bottom) for displacing the image.
graphicHFlip boolean false If set to true, the image will be flipped horizontally.
graphicVFlip boolean false If set to true, the image will be flipped vertically.
graphicRotationOffset number ∈ [-360, 360] 0 The angle in degrees clockwise needed to make the marker point to the right.
graphicRotation number or boolean true If set to true, the marker will be rotated based on the data (when possible). Otherwise the direction in degrees clockwise at which the marker should be pointing (false is the same as 0).
Deprecated fields
Field Type Description
rotation number Deprecated: Use graphicRotationOffset and graphicRotation instead.
The angle in degrees between the marker pointing to the right and its defined position CW. Use NaN to prevent rotation.
Example
{
  externalGraphic: 'images/buoy-icon.png',
  graphicWidth   : 32,
  graphicHeight  : 32,
  graphicRotation: 0,
}

PolygonMarkerStyle

Type: object

Field Type Default Description
graphicName string Required The name of the symbol to render. Can be one of ('circle', 'star', 'cross', 'x', 'square', 'triangle'), or one of the fields defined in markerSymbols (see Configuration Fields).
pointRadius number > 0 Required Half the width in pixels of the marker when rendered on the screen.
fillColor SVGPaint Optional The color of the polygon's inside.
fillOpacity number ∈ [0, 1] 1 The opacity of the fill color. 0.0 (fully transparent) to 1.0 (fully opaque).
strokeColor SVGPaint Optional The color of the polygon's outline.
strokeOpacity number ∈ [0, 1] 1 The opacity of the stroke color. 0.0 (fully transparent) to 1.0 (fully opaque).
strokeWidth number >= 0 1 The width of the outline on the polygon. If a value of 0 is used the outline will never be drawn.
strokeDashstyle string Optional Controls the pattern of dashes and gaps used to stroke the polygon. Can be one of ('dot', 'dash', 'dashdot', 'longdash', 'longdashdot', 'solid') or a list of white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, '5 3 2' is equivalent to '5 3 2 5 3 2'.
graphicHFlip boolean false If set to true, the polygon will be flipped horizontally.
graphicVFlip boolean false If set to true, the polygon will be flipped vertically.
graphicRotationOffset number ∈ [-360, 360] 0 The angle in degrees clockwise needed to make the marker point to the right.
graphicRotation number or boolean true If set to true, the marker will be rotated based on the data (when possible). Otherwise the direction in degrees clockwise at which the marker should be pointing (false is the same as 0).
noWrap boolean false If set to true, the marker will be shown at most once, as opposed to twice when it gets wrapped around the anti-meridian line. This should only be used when performance requires it.
Deprecated fields
Field Type Description
rotation number Deprecated: Use graphicRotationOffset and graphicRotation instead.
The angle in degrees between the marker pointing to the right and its defined position CW. Use NaN to prevent rotation.
Example
{
  graphicName: 'left_arrow_tip',
  pointRadius: 4, // 2*4 = 8px wide and heigh on screen
  strokeWidth: 1,
  strokeColor: 'red',
  fillColor: 'red',
}

Product Field Options

DataFields

Type: {[name: string]: DataField}

Example
{
  modulus: {
    channel: 0,
    min: 0,
    max: 10,
  },
  temp: {
    min: 3.0,
    max: 12.5,
  },
}

DataField

Type: object

Field Type Default Description
channel string or number Optional The dataset's channel represented by this field. Defaults to the name of this field.
min number Required The minimum value.
max number Required The maximum value.

RenderFields

Type: {[name: string]: RenderField}

Examples
{
  modulus: 'speed',
  angle: 'angle',
  color: 'temp',
}
{
  modulus: 'speed',
  angle: 'angle',
  color: '#F00',
}

RenderField

Type: DataFieldRef or NumericValue or ColorValue

DataFieldRef

Type: string

The name of a data field defined in DataFields of the same product this is being used on.

Used to link a rendering parameter to the named data field.

NumericValue

Type: number

A single numeric value applied uniformly.

ColorValue

Type: Color

A single color applied uniformly.