@superrouteca/smap-leaflet 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; }
+}