@superrouteca/smap-openlayers 0.0.0-stage → 1.1.1

package/src/common/embed.js

@@ -0,0 +1,166 @@
+// sMap tool adapters — an sMap map (the Web SDK) drawn inside another tool. The tool owns the camera and the input;
+// the embedded map draws the basemap and sMap's layers. Its own camera moves (Auto Zoom, fitLayer, flyTo, a popup
+// panning into view) are handed to the tool, and the tool's clicks and pointer moves are handed to it, so popups,
+// Auto Zoom, hover and onClick work as on an sMap map. Kept identical in leaflet/, openlayers/ and mapbox/
+// (test/common.test.mjs checks).
+import { injectCss, mergeAttributions } from './badge.js';
+
+/** The engine's camera calls that are sent to the tool instead of moving the embedded map on its own. */
+export const CAMERA_CALLS = ['jumpTo', 'easeTo', 'flyTo', 'fitBounds', 'panBy', 'panTo', 'setCenter', 'setZoom', 'zoomTo',
+  'zoomIn', 'zoomOut', 'setBearing', 'rotateTo', 'setPitch'];
+const INSTANT = ['jumpTo', 'setCenter', 'setZoom', 'setBearing', 'setPitch'];
+
+/** The SDK options the embedding sets itself. */
+const OWN_OPTIONS = { interactive: false, attributionControl: false, keyboard3D: false };
+
+function lngLatOf(engineModule, v) {
+  if (v == null) { return null; }
+  if (engineModule && engineModule.LngLat && engineModule.LngLat.convert) {
+    const c = engineModule.LngLat.convert(v);
+    return { lng: c.lng, lat: c.lat };
+  }
+  if (Array.isArray(v)) { return { lng: +v[0], lat: +v[1] }; }
+  return { lng: +(v.lng !== undefined ? v.lng : v.lon), lat: +v.lat };
+}
+
+/**
+ * Where a camera call would take the engine: { center: {lng, lat}, zoom, bearing, pitch } and how to get there
+ * ({ animate, duration, fly }). Pure over the engine's read-only calls (getCenter, project, cameraForBounds, …).
+ */
+export function cameraTarget(engine, engineModule, call, args) {
+  const c = engine.getCenter();
+  const t = { center: { lng: c.lng, lat: c.lat }, zoom: engine.getZoom(), bearing: engine.getBearing ? engine.getBearing() : 0, pitch: engine.getPitch ? engine.getPitch() : 0 };
+  let o = {};
+  const take = function (cam) {
+    if (!cam) { return; }
+    if (cam.center !== undefined) { t.center = lngLatOf(engineModule, cam.center); }
+    if (typeof cam.zoom === 'number') { t.zoom = cam.zoom; }
+    if (typeof cam.bearing === 'number') { t.bearing = cam.bearing; }
+    if (typeof cam.pitch === 'number') { t.pitch = cam.pitch; }
+  };
+  switch (call) {
+    case 'jumpTo': case 'easeTo': case 'flyTo': o = args[0] || {}; take(o); break;
+    case 'fitBounds': o = args[1] || {}; take(engine.cameraForBounds ? engine.cameraForBounds(args[0], o) : null); break;
+    case 'panBy': {
+      o = args[1] || {};
+      const off = Array.isArray(args[0]) ? args[0] : [args[0].x, args[0].y];
+      const p = engine.project([t.center.lng, t.center.lat]);
+      take({ center: engine.unproject([p.x + off[0], p.y + off[1]]) });
+      break;
+    }
+    case 'panTo': o = args[1] || {}; take({ center: args[0] }); break;
+    case 'setCenter': take({ center: args[0] }); break;
+    case 'setZoom': take({ zoom: args[0] }); break;
+    case 'zoomTo': o = args[1] || {}; take({ zoom: args[0] }); break;
+    case 'zoomIn': o = args[0] || {}; t.zoom += 1; break;
+    case 'zoomOut': o = args[0] || {}; t.zoom -= 1; break;
+    case 'setBearing': take({ bearing: args[0] }); break;
+    case 'rotateTo': o = args[1] || {}; take({ bearing: args[0] }); break;
+    case 'setPitch': take({ pitch: args[0] }); break;
+    default: break;
+  }
+  const animate = INSTANT.indexOf(call) < 0 && o.animate !== false && o.duration !== 0;
+  return { target: t, how: { animate: animate, duration: typeof o.duration === 'number' ? o.duration : undefined, fly: call === 'flyTo' } };
+}
+
+/**
+ * Creates the embedded sMap map.
+ *
+ * @param {Object} sdk         the sMap Web SDK module (`Map`, `getEngine`)
+ * @param {HTMLElement} el     the element it draws in (sized and placed by the caller)
+ * @param {Object} options     sMap map options (style, language, apiKey, token, getToken, baseUrl, …)
+ * @param {Object} hooks       move(target, how): move the tool's camera; attribution(list): the credits changed
+ */
+export function createEmbedded(sdk, el, options, hooks) {
+  injectCss(el.ownerDocument);
+  el.classList.add('smap-embedded');
+  const map = new sdk.Map(Object.assign({ minZoom: -2, maxZoom: 24 }, options, OWN_OPTIONS, { container: el }));
+  const engineModule = typeof sdk.getEngine === 'function' ? sdk.getEngine() : null;
+  const state = { jumpTo: null, engine: null, credits: [], removed: false };
+
+  function credits() {
+    const engine = state.engine;
+    const list = [];
+    try {
+      const caches = engine.style && (engine.style.sourceCaches || engine.style._sourceCaches);
+      const ids = caches ? Object.keys(caches) : Object.keys((engine.getStyle() || {}).sources || {});
+      ids.forEach(function (id) {
+        const s = engine.getSource(id);
+        if (s && typeof s.attribution === 'string') { list.push(s.attribution); }
+      });
+    } catch (e) { /* no style yet */ }
+    const merged = mergeAttributions(list);
+    if (merged.join('\n') !== state.credits.join('\n')) {
+      state.credits = merged;
+      if (hooks.attribution) { hooks.attribution(merged.slice()); }
+    }
+  }
+
+  function adopt(engine) {
+    if (state.engine || !engine) { return; }
+    state.engine = engine;
+    state.jumpTo = engine.jumpTo.bind(engine);
+    CAMERA_CALLS.forEach(function (call) {
+      if (typeof engine[call] !== 'function') { return; }
+      engine[call] = function () {
+        const r = cameraTarget(engine, engineModule, call, Array.prototype.slice.call(arguments));
+        if (hooks.move) { hooks.move(r.target, r.how); }
+        return engine;
+      };
+    });
+    if (engine.on) {
+      engine.on('sourcedata', function (e) { if (!e || e.sourceDataType === 'metadata' || e.isSourceLoaded) { credits(); } });
+      engine.on('styledata', credits);
+    }
+    credits();
+    if (hooks.adopted) { hooks.adopted(engine); }
+  }
+
+  const ready = map.ready.then(function (m) { adopt(m.engine); return m; });
+
+  const api = {
+    map: map,
+    ready: ready,
+    /** The engine once created (null before). */
+    engine: function () { return state.engine || (map.engine && (adopt(map.engine), state.engine)) || null; },
+    /** Puts the embedded camera where the tool's is (zoom in the engine's 512 px scale). */
+    sync: function (camera) {
+      const engine = api.engine();
+      if (!engine || state.removed) { return; }
+      state.jumpTo({ center: [camera.center.lng, camera.center.lat], zoom: camera.zoom, bearing: camera.bearing || 0, pitch: camera.pitch || 0 });
+      if (camera.redraw && typeof engine.redraw === 'function') { engine.redraw(); }
+    },
+    resize: function () { const engine = api.engine(); if (engine && engine.resize) { engine.resize(); } },
+    /**
+     * Hands one of the tool's pointer events to the embedded map (click, dblclick, mousemove, mouseout, contextmenu):
+     * `x`, `y` in pixels of the embedded map's element, the position, and the browser event.
+     */
+    forward: function (type, x, y, lngLat, originalEvent) {
+      const engine = api.engine();
+      if (!engine || state.removed) { return; }
+      const point = engineModule && engineModule.Point ? new engineModule.Point(x, y) : { x: x, y: y };
+      const ll = engineModule && engineModule.LngLat ? new engineModule.LngLat(lngLat.lng, lngLat.lat) : lngLat;
+      engine.fire(type, { point: point, lngLat: ll, originalEvent: originalEvent, type: type });
+      // The tool's element shows the pointer the embedded map asks for (a hand over a clickable feature).
+      if (type === 'mousemove' && hooks.cursor && engine.getCanvas) { hooks.cursor(engine.getCanvas().style.cursor || ''); }
+    },
+    /** True when the browser event happened inside one of the embedded map's popups (the popup handles it). */
+    inPopup: function (originalEvent) {
+      const t = originalEvent && originalEvent.target;
+      return !!(t && typeof t.closest === 'function' && t.closest('.maplibregl-popup'));
+    },
+    credits: function () { return state.credits.slice(); },
+    remove: function () { state.removed = true; map.remove(); },
+  };
+  return api;
+}
+
+/** True where the browser can draw the vector map (WebGL 2). */
+export function hasWebGL2(doc) {
+  try {
+    const d = doc || (typeof document !== 'undefined' ? document : null);
+    if (!d) { return false; }
+    const c = d.createElement('canvas');
+    return !!(c.getContext && c.getContext('webgl2'));
+  } catch (e) { return false; }
+}

package/src/index.js

@@ -0,0 +1,326 @@
+// @superrouteca/smap-openlayers — sMap in OpenLayers: the vector map (an sMap map drawn as an OpenLayers layer, with
+// sMap's layers, popups and Auto Zoom) or raster tiles (an XYZ source), and the sMap badge and data credit.
+// OpenLayers sources and layers on an sMap map are in './on-smap.js' (`@superrouteca/smap-openlayers/on-smap`).
+import Layer from 'ol/layer/Layer.js';
+import TileLayer from 'ol/layer/Tile.js';
+import Source from 'ol/source/Source.js';
+import XYZ from 'ol/source/XYZ.js';
+import Control from 'ol/control/Control.js';
+import TileState from 'ol/TileState.js';
+import { toLonLat, fromLonLat } from 'ol/proj.js';
+import * as sMapModule from '@superrouteca/smap';
+import { SMapAccess, checkStyle, rasterPath, stylePath, FLAVORS, DEFAULT_BASE } from './common/access.js';
+import { OSM_ATTRIBUTION, createBadge } from './common/badge.js';
+import { createEmbedded, hasWebGL2 } from './common/embed.js';
+
+const SDK = sMapModule.default && sMapModule.default.Map ? sMapModule.default : sMapModule;
+
+export const version = '1.1.1';
+export { FLAVORS as styles, checkStyle, rasterPath, stylePath, SMapAccess, DEFAULT_BASE, OSM_ATTRIBUTION, hasWebGL2 };
+
+/** OpenLayers layer options; everything else of SMapLayer's options goes to the sMap map. */
+const LAYER_OPTIONS = ['className', 'opacity', 'visible', 'extent', 'zIndex', 'minResolution', 'maxResolution', 'minZoom', 'maxZoom', 'properties', 'map'];
+const ACCESS_OPTIONS = ['baseUrl', 'token', 'getToken', 'apiKey', 'nodes', 'nearest', 'fetch', 'timeoutMs', 'client'];
+/** Web Mercator: metres per pixel at OpenLayers zoom 0 (256 px tiles). */
+const RESOLUTION_0 = 2 * Math.PI * 6378137 / 256;
+
+function pick(o, keys, inside) {
+  const out = {};
+  Object.keys(o || {}).forEach(function (k) { if ((keys.indexOf(k) >= 0) === inside) { out[k] = o[k]; } });
+  return out;
+}
+
+// ------------------------------------------------------------------ badge (one per map)
+
+/** The sMap badge as an OpenLayers control, in the bottom-right corner above the attribution. */
+export class SMapBadge extends Control {
+  constructor(options) {
+    const doc = (options && options.document) || document;
+    const el = createBadge(doc);
+    el.classList.add('ol-unselectable');
+    el.style.position = 'absolute';
+    el.style.right = '.5em';
+    el.style.bottom = '2.6em';
+    el.style.margin = '0';
+    super({ element: el });
+  }
+}
+
+function holdBadge(map) {
+  const held = map.get('smap:badge') || { control: null, count: 0 };
+  held.count += 1;
+  if (!held.control) { held.control = new SMapBadge(); map.addControl(held.control); }
+  map.set('smap:badge', held, true);
+}
+
+function releaseBadge(map) {
+  const held = map.get('smap:badge');
+  if (!held) { return; }
+  held.count -= 1;
+  if (held.count <= 0 && held.control) { map.removeControl(held.control); held.control = null; held.count = 0; }
+}
+
+// ------------------------------------------------------------------ vector: an sMap map as a layer
+
+/** sMap map calls a layer forwards once its map is ready (each returns the layer). */
+export const FORWARDED = ['setStyle', 'setLanguage', 'setBasemap', 'setAutoZoom', 'addPoints', 'addLines', 'addPolygons',
+  'addData', 'setData', 'setVisible', 'fitLayer', 'openPopup', 'closePopup', 'addSource', 'removeSource', 'addStyleLayer',
+  'setPaint', 'setLayout', 'setFilter', 'addRasterLayer', 'addWmsLayer', 'addWmtsLayer', 'addVectorTiles', 'addArcGisLayer',
+  'loadLayers', 'setBuildings3D'];
+
+/**
+ * The sMap vector map as an OpenLayers layer. Options: every sMap map option (style incl. `custom:<id>`, language,
+ * apiKey, token, getToken, baseUrl, nodes, nearest, popup, popupLoading, autoZoom), OpenLayers layer options
+ * (opacity, visible, zIndex, minZoom, …) and `interactive` (OpenLayers' clicks and pointer moves reach sMap's
+ * layers; default true). The view must be in Web Mercator (EPSG:3857, OpenLayers' default).
+ */
+export class SMapLayer extends Layer {
+  constructor(options) {
+    options = options || {};
+    const credits = { list: [OSM_ATTRIBUTION] };
+    const source = new Source({ attributions: function () { return credits.list; } });
+    const self = { ref: null };
+    super(Object.assign(pick(options, LAYER_OPTIONS, true), {
+      source: source,
+      render: function (frameState) { return self.ref._render(frameState); },
+    }));
+    self.ref = this;
+    this._credits = credits;
+    this._sdk = options.sdk || SDK;
+    this._interactive = options.interactive !== false;
+    this._smapOptions = pick(options, LAYER_OPTIONS.concat(['sdk', 'interactive']), false);
+    if (typeof this._smapOptions.style === 'string' && this._smapOptions.style.indexOf('://') < 0) { checkStyle(this._smapOptions.style); }
+    const me = this;
+    this.ready = new Promise(function (resolve) { me._resolveReady = resolve; });
+    this._embedded = null;
+    this._container = null;
+    this._keys = [];
+    this._placeholder = null;
+  }
+
+  setMapInternal(map) {
+    const before = this.getMapInternal();
+    super.setMapInternal(map);
+    if (before === map) { return; }
+    if (before) { this._detach(before); }
+    if (map) { this._attach(map); }
+  }
+
+  _attach(map) {
+    const doc = map.getViewport().ownerDocument;
+    if (!this._container) {
+      this._container = doc.createElement('div');
+      this._container.className = 'ol-smap-layer';
+      this._container.style.width = '100%';
+      this._container.style.height = '100%';
+    }
+    // Inside the stop-event overlay: clicks on an open popup stay with the popup and never reach OpenLayers.
+    map.getOverlayContainerStopEvent().appendChild(this._container);
+    if (!this._embedded) {
+      const self = this;
+      // While the map is being built its view may not be set yet: the first render puts the sMap map in place.
+      const view = map.getView && map.getView();
+      const known = view && view.getCenter() && view.getZoom() !== undefined;
+      this._embedded = createEmbedded(this._sdk, this._container, Object.assign({}, this._smapOptions, {
+        center: known ? toLonLat(view.getCenter(), view.getProjection()) : [0, 0],
+        zoom: known ? view.getZoom() - 1 : 0,
+      }), {
+        move: function (t, how) { self._moveView(t, how); },
+        attribution: function (list) { self._credits.list = list; self.getSource().changed(); },
+        cursor: function (cursor) { const m = self.getMapInternal(); if (m) { m.getViewport().style.cursor = cursor; } },
+      });
+      this._embedded.ready.then(function (m) { self.changed(); self._resolveReady(m); });
+    } else {
+      this._embedded.resize();
+    }
+    const self = this;
+    const forward = function (type) {
+      return function (e) {
+        if (!self._interactive || !self._embedded || (e.dragging && type === 'mousemove')) { return; }
+        if (self._embedded.inPopup(e.originalEvent)) { return; }
+        const ll = toLonLat(e.coordinate, map.getView().getProjection());
+        self._embedded.forward(type, e.pixel[0], e.pixel[1], { lng: ll[0], lat: ll[1] }, e.originalEvent);
+      };
+    };
+    this._keys = [
+      [map, 'click', forward('click')],
+      [map, 'dblclick', forward('dblclick')],
+      [map, 'pointermove', forward('mousemove')],
+      [map, 'change:size', function () { if (self._embedded) { self._embedded.resize(); } }],
+    ];
+    this._keys.forEach(function (k) { k[0].on(k[1], k[2]); });
+    this._out = function (e) {
+      if (!self._interactive || !self._embedded) { return; }
+      self._embedded.forward('mouseout', -1, -1, { lng: 0, lat: 0 }, e);
+    };
+    map.getViewport().addEventListener('pointerleave', this._out);
+    holdBadge(map);
+  }
+
+  _detach(map) {
+    this._keys.forEach(function (k) { k[0].un(k[1], k[2]); });
+    this._keys = [];
+    map.getViewport().removeEventListener('pointerleave', this._out);
+    releaseBadge(map);
+    if (this._container && this._container.parentNode) { this._container.parentNode.removeChild(this._container); }
+  }
+
+  _render(frameState) {
+    const engine = this._embedded && this._embedded.engine();
+    if (!engine) {
+      if (!this._placeholder) { this._placeholder = document.createElement('div'); }
+      return this._placeholder;
+    }
+    const vs = frameState.viewState;
+    const ll = toLonLat(vs.center, vs.projection);
+    // OpenLayers counts zoom in 256 px tiles, the sMap map in 512 px tiles: one level apart.
+    const zoom = Math.log2(RESOLUTION_0 / vs.resolution) - 1;
+    this._embedded.sync({ center: { lng: ll[0], lat: ll[1] }, zoom: zoom, bearing: (-vs.rotation * 180) / Math.PI, redraw: true });
+    const canvas = engine.getCanvas();
+    canvas.style.position = 'absolute';
+    canvas.style.left = '0';
+    canvas.style.top = '0';
+    canvas.style.opacity = String(this.getOpacity());
+    return canvas;
+  }
+
+  // The sMap map asked to move (Auto Zoom, fitLayer, flyTo, a popup panning into view): the OpenLayers view moves.
+  _moveView(t, how) {
+    const map = this.getMapInternal();
+    if (!map) { return; }
+    const view = map.getView();
+    const center = fromLonLat([t.center.lng, t.center.lat], view.getProjection());
+    const resolution = RESOLUTION_0 / Math.pow(2, t.zoom + 1);
+    const rotation = (-(t.bearing || 0) * Math.PI) / 180;
+    if (how.animate) {
+      view.animate({ center: center, resolution: resolution, rotation: rotation, duration: how.duration !== undefined ? how.duration : 400 });
+    } else {
+      view.setCenter(center);
+      view.setResolution(resolution);
+      view.setRotation(rotation);
+    }
+  }
+
+  /** The sMap map (null until it is ready); `await layer.ready` gives it once it is. */
+  getSMap() { return this._embedded && this._embedded.engine() ? this._embedded.map : null; }
+
+  /** sMap map calls whose answer is a value: `layer.call('basemap')` resolves to it. */
+  call(name) {
+    const args = Array.prototype.slice.call(arguments, 1);
+    return this.ready.then(function (m) {
+      if (typeof m[name] !== 'function') { throw new Error('sMap: this version of @superrouteca/smap has no ' + name + '()'); }
+      return m[name].apply(m, args);
+    });
+  }
+
+  /** Removes one of the sMap map's layers (OpenLayers' own removeLayer belongs to the map). */
+  removeSMapLayer(id) { this.call('removeLayer', id).catch(function () {}); return this; }
+
+  disposeInternal() {
+    if (this._embedded) { this._embedded.remove(); this._embedded = null; }
+    super.disposeInternal();
+  }
+}
+
+FORWARDED.forEach(function (name) {
+  // OpenLayers layers have no method of these names, except setVisible (visibility of the OpenLayers layer), which
+  // stays OpenLayers'; the sMap map's is setSMapVisible.
+  const own = name === 'setVisible' ? 'setSMapVisible' : name;
+  SMapLayer.prototype[own] = function () {
+    const args = Array.prototype.slice.call(arguments);
+    if (name === 'setStyle' && typeof args[0] === 'string' && args[0].indexOf('://') < 0) { checkStyle(args[0]); }
+    this.call.apply(this, [name].concat(args)).catch(function (e) { if (typeof console !== 'undefined') { console.error(e); } });
+    return this;
+  };
+});
+
+// ------------------------------------------------------------------ raster tiles
+
+/**
+ * sMap raster tiles as an OpenLayers XYZ source: read with the map key or token from the nearest node, moving to the
+ * next node when one fails. Options: style (a scheme or `custom:<id>`), language, retina (512 px tiles; default the
+ * screen's), the access options, and XYZ source options.
+ */
+export class SMapRasterSource extends XYZ {
+  constructor(options) {
+    options = options || {};
+    const access = options.access || new SMapAccess(pick(options, ACCESS_OPTIONS, true));
+    const state = {
+      style: checkStyle(options.style || 'light'),
+      language: options.language || (typeof navigator !== 'undefined' && navigator.language) || 'en',
+      retina: options.retina !== undefined ? !!options.retina : (typeof window !== 'undefined' && window.devicePixelRatio > 1),
+    };
+    const rest = pick(options, ACCESS_OPTIONS.concat(['style', 'language', 'retina', 'access']), false);
+    super(Object.assign({
+      attributions: OSM_ATTRIBUTION,
+      attributionsCollapsible: true,
+      maxZoom: 22,
+      crossOrigin: 'anonymous',
+    }, rest, {
+      url: access.rasterTemplate(state.style, { lang: state.language, retina: state.retina }),
+      tileSize: 256,
+      tilePixelRatio: state.retina ? 2 : 1,
+      tileLoadFunction: function (tile) {
+        const c = tile.getTileCoord();
+        access.start()
+          .then(function () { return access.rasterTile(state.style, c[0], c[1], c[2], { lang: state.language, retina: state.retina }); })
+          .then(function (blob) {
+            const img = tile.getImage();
+            const url = URL.createObjectURL(blob);
+            const done = function () { URL.revokeObjectURL(url); };
+            img.addEventListener('load', done, { once: true });
+            img.addEventListener('error', done, { once: true });
+            img.src = url;
+          })
+          .catch(function () { tile.setState(TileState.ERROR); });
+      },
+    }));
+    this._access = access;
+    this._state = state;
+  }
+
+  _reload() { this.setUrl(this._access.rasterTemplate(this._state.style, { lang: this._state.language, retina: this._state.retina })); }
+
+  /** Switches the scheme (or `custom:<id>`) and reloads the tiles. */
+  setStyle(style) { this._state.style = checkStyle(style); this._reload(); return this; }
+  /** Switches the label language and reloads the tiles. */
+  setLanguage(language) { this._state.language = language; this._reload(); return this; }
+  /** The access in use (token, nodes). */
+  getAccess() { return this._access; }
+}
+
+/** sMap raster tiles as an OpenLayers tile layer (with the sMap badge). */
+export class SMapRasterLayer extends TileLayer {
+  constructor(options) {
+    options = options || {};
+    super(Object.assign(pick(options, LAYER_OPTIONS.concat(['preload', 'useInterimTilesOnError']), true), {
+      source: options.source || new SMapRasterSource(pick(options, LAYER_OPTIONS.concat(['preload', 'useInterimTilesOnError', 'source']), false)),
+    }));
+  }
+  setMapInternal(map) {
+    const before = this.getMapInternal();
+    super.setMapInternal(map);
+    if (before === map) { return; }
+    if (before) { releaseBadge(before); }
+    if (map) { holdBadge(map); }
+  }
+}
+
+export function smapRasterSource(options) { return new SMapRasterSource(options); }
+export function smapRasterLayer(options) { return new SMapRasterLayer(options); }
+export function smapLayer(options) { return new SMapLayer(options); }
+
+/**
+ * The sMap basemap the browser can draw: the vector map where WebGL 2 exists, raster tiles elsewhere.
+ * `mode: 'vector' | 'raster' | 'auto'` (default auto).
+ */
+export function smapBasemap(options) {
+  const o = Object.assign({}, options);
+  const mode = o.mode || 'auto';
+  delete o.mode;
+  if (mode === 'raster' || (mode === 'auto' && !hasWebGL2())) { return new SMapRasterLayer(o); }
+  return new SMapLayer(o);
+}
+
+const SMapOpenLayers = { version, styles: FLAVORS, SMapLayer, smapLayer, SMapRasterSource, smapRasterSource, SMapRasterLayer, smapRasterLayer, smapBasemap, SMapBadge, SMapAccess, hasWebGL2, rasterPath, checkStyle };
+export default SMapOpenLayers;