Map initialisation event for customisation

[rjksmith]

Background

The WebVMT engine handles basic options for web map initialisation, but some map displays may require additional steps during initialisation.

Issue

When a webpage loads, the WebVMT engine creates a web map object for the chosen map API. The parameters include required attributes such as the div element in which to create the map object and map data url, and basic optional extras such as custom attribution text. However, some use cases may require additional custom options to correctly initialise the map element such as adding an extra layer.

Discussion

In OGC Testbed-20, the geotagged video maritime use case included OpenSeaMap to display an open source nautical chart with WebVMT. This requires:

1. a base layer to display map tiles:
   • https://t2.openseamap.org/tile/{z}/{x}/{y}.png
2. a seamark layer to display nautical markers such as buoys:
   • https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png

A new feature was prototyped to generate an event after the map initialisation to enable correct integration of the OpenSeaMap seamark layer.

Proposal

Add a mapinit event which fires after the map object is created by the WebVMT engine. This event passes the map object as a parameter to enable a customised display initialisation step to correctly complete.

HTML

  <video ...>
    <!-- add event handler to mapinit -->
    <track onmapinit="initOpenSeaMap" ...></track>
  </video>

JS

function initOpenSeaMap(event) {
  const map = event.detail; // map passed in CustomEvent.detail
  // initialise OpenSeaMap seamark layer
  const seamark = new ol.layer.Tile(...); // create layer
  map.addLayer(seamark); // add layer to map
}