@superrouteca/smap-leaflet 0.0.0-stage → 1.1.0

package/src/compat.js

@@ -0,0 +1,847 @@
+// @superrouteca/smap-leaflet/compat — Leaflet-style calls on an sMap map, so code written for Leaflet runs on sMap:
+//
+//   const L = createLeafletCompat(smapMap);            // smapMap: a map of @superrouteca/smap, after `await map.ready`
+//   L.marker([43.65, -79.38]).addTo(L.map).bindPopup('<b>Depot</b>');
+//   L.geoJSON(zones, { style: (f) => ({ color: f.properties.color }) }).addTo(L.map);
+//
+// Positions are [lat, lng] as in Leaflet; zoom levels are Leaflet's (one above the sMap map's own). Every layer is
+// drawn with the sMap map's own calls (addPoints, addLines, addPolygons, addRasterLayer, addWmsLayer). Layers that
+// share their look are drawn together (a GeoJSON layer of 10,000 features is a few sMap layers, not 10,000). No Leaflet
+// is needed for this module. A layer without a slot draws on top in the order it was added, as in Leaflet.
+
+let seq = 0;
+
+// ------------------------------------------------------------------ positions
+
+function isNum(v) { return typeof v === 'number' && !isNaN(v); }
+
+/** A Leaflet position ([lat, lng], [lat, lng, alt], {lat, lng}, {lat, lon}) as {lat, lng}. */
+export function toLatLng(v) {
+  if (v == null) { return null; }
+  if (Array.isArray(v)) {
+    if (!isNum(+v[0]) || !isNum(+v[1])) { return null; }
+    return { lat: +v[0], lng: +v[1] };
+  }
+  if (typeof v === 'object' && v.lat !== undefined) { return { lat: +v.lat, lng: +(v.lng !== undefined ? v.lng : v.lon) }; }
+  return null;
+}
+
+function lngLatArr(v) { const ll = toLatLng(v); return [ll.lng, ll.lat]; }
+
+function isLatLngish(v) { return toLatLng(v) !== null && (!Array.isArray(v) || !Array.isArray(v[0])); }
+
+/** A Leaflet bounds ([[s, w], [n, e]], two positions, or an object with getSouthWest / getNorthEast) as LatLngBounds. */
+export function latLngBounds(a, b) {
+  if (a instanceof LatLngBounds) { return a; }
+  const bounds = new LatLngBounds();
+  if (b !== undefined) { bounds.extend(a).extend(b); return bounds; }
+  if (a && typeof a.getSouthWest === 'function') { return bounds.extend(a.getSouthWest()).extend(a.getNorthEast()); }
+  (a || []).forEach(function (p) { bounds.extend(p); });
+  return bounds;
+}
+
+export class LatLngBounds {
+  constructor() { this._sw = null; this._ne = null; }
+  extend(p) {
+    if (p instanceof LatLngBounds) { if (p.isValid()) { this.extend(p._sw).extend(p._ne); } return this; }
+    const ll = toLatLng(p);
+    if (!ll) { return this; }
+    if (!this._sw) { this._sw = { lat: ll.lat, lng: ll.lng }; this._ne = { lat: ll.lat, lng: ll.lng }; return this; }
+    this._sw = { lat: Math.min(this._sw.lat, ll.lat), lng: Math.min(this._sw.lng, ll.lng) };
+    this._ne = { lat: Math.max(this._ne.lat, ll.lat), lng: Math.max(this._ne.lng, ll.lng) };
+    return this;
+  }
+  isValid() { return !!this._sw; }
+  getSouthWest() { return this._sw; }
+  getNorthEast() { return this._ne; }
+  getNorthWest() { return { lat: this._ne.lat, lng: this._sw.lng }; }
+  getSouthEast() { return { lat: this._sw.lat, lng: this._ne.lng }; }
+  getWest() { return this._sw.lng; }
+  getSouth() { return this._sw.lat; }
+  getEast() { return this._ne.lng; }
+  getNorth() { return this._ne.lat; }
+  getCenter() { return { lat: (this._sw.lat + this._ne.lat) / 2, lng: (this._sw.lng + this._ne.lng) / 2 }; }
+  contains(p) {
+    if (p instanceof LatLngBounds) { return this.contains(p._sw) && this.contains(p._ne); }
+    const ll = toLatLng(p);
+    return !!ll && ll.lat >= this._sw.lat && ll.lat <= this._ne.lat && ll.lng >= this._sw.lng && ll.lng <= this._ne.lng;
+  }
+  /** As the sMap map takes bounds: [[west, south], [east, north]]. */
+  toLngLatArray() { return [[this._sw.lng, this._sw.lat], [this._ne.lng, this._ne.lat]]; }
+}
+
+// ------------------------------------------------------------------ colours
+
+function hexToRgb(c) {
+  let h = c.slice(1);
+  if (h.length === 3 || h.length === 4) { h = h.split('').map(function (x) { return x + x; }).join(''); }
+  if (h.length !== 6 && h.length !== 8) { return null; }
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16), h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1];
+}
+
+/** A colour with an opacity applied (hex and rgb() colours; a named colour is returned as it is). */
+export function withAlpha(color, alpha) {
+  if (alpha === undefined || alpha === null || alpha >= 1 || typeof color !== 'string') { return color; }
+  const c = color.trim();
+  let rgba = null;
+  if (c[0] === '#') { rgba = hexToRgb(c); }
+  const m = /^rgba?\(([^)]+)\)$/i.exec(c);
+  if (m) {
+    const parts = m[1].split(/[\s,/]+/).filter(Boolean).map(Number);
+    rgba = [parts[0], parts[1], parts[2], parts[3] !== undefined ? parts[3] : 1];
+  }
+  if (!rgba) { return c; }
+  const a = Math.max(0, Math.min(1, rgba[3] * alpha));
+  return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + Math.round(a * 1000) / 1000 + ')';
+}
+
+const TRANSPARENT = 'rgba(0, 0, 0, 0)';
+
+// ------------------------------------------------------------------ events
+
+class Evented {
+  constructor() { this._events = {}; }
+  on(types, fn, ctx) {
+    if (typeof types === 'object') { Object.keys(types).forEach(function (t) { this.on(t, types[t], fn); }, this); return this; }
+    String(types).split(/\s+/).forEach(function (t) { (this._events[t] = this._events[t] || []).push({ fn: fn, ctx: ctx }); }, this);
+    return this;
+  }
+  off(types, fn, ctx) {
+    if (types === undefined) { this._events = {}; return this; }
+    if (typeof types === 'object') { Object.keys(types).forEach(function (t) { this.off(t, types[t], fn); }, this); return this; }
+    String(types).split(/\s+/).forEach(function (t) {
+      if (!fn) { delete this._events[t]; return; }
+      this._events[t] = (this._events[t] || []).filter(function (l) { return l.fn !== fn || (ctx !== undefined && l.ctx !== ctx); });
+    }, this);
+    return this;
+  }
+  once(types, fn, ctx) {
+    const self = this;
+    const wrapped = function (e) { self.off(types, wrapped, ctx); return fn.call(ctx || self, e); };
+    return this.on(types, wrapped, ctx);
+  }
+  fire(type, data, propagate) {
+    const e = Object.assign({}, data || {}, { type: type, target: this, sourceTarget: (data && data.sourceTarget) || this });
+    (this._events[type] || []).slice().forEach(function (l) { l.fn.call(l.ctx || this, e); }, this);
+    if (propagate && this._eventParents) { this._eventParents.forEach(function (p) { p.fire(type, Object.assign({}, e, { layer: e.layer || this, propagatedFrom: this }), true); }, this); }
+    return this;
+  }
+  listens(type) { return !!(this._events[type] && this._events[type].length); }
+}
+
+// ------------------------------------------------------------------ popups
+
+function popupContent(content, layer) {
+  return typeof content === 'function' ? content(layer) : content;
+}
+
+/** Leaflet popup options as sMap popup options. */
+function popupOptions(o) {
+  if (!o) { return undefined; }
+  const out = {};
+  if (o.className !== undefined) { out.className = o.className; }
+  if (o.maxWidth !== undefined) { out.maxWidth = o.maxWidth; }
+  if (o.minWidth !== undefined) { out.minWidth = o.minWidth; }
+  if (o.closeButton !== undefined) { out.closeButton = o.closeButton; }
+  if (o.closeOnClick !== undefined) { out.closeOnClick = o.closeOnClick; }
+  if (o.autoPan !== undefined) { out.autoPan = o.autoPan; }
+  if (o.offset !== undefined) { out.offset = Array.isArray(o.offset) ? o.offset : [o.offset.x, o.offset.y]; }
+  return out;
+}
+
+// ------------------------------------------------------------------ layers
+
+/**
+ * What a layer draws: { kind: 'points' | 'lines' | 'polygons', geometries: [GeoJSON geometry], properties, options }
+ * (sMap layer options). Layers whose kind and options are equal are drawn as one sMap layer.
+ */
+class Layer extends Evented {
+  constructor(options) {
+    super();
+    this.options = Object.assign({}, this.constructor.defaults || {}, options || {});
+    this._leaflet_id = ++seq;
+    this._host = null;       // the compat map or group drawing it
+    this._popup = null;
+    this._eventParents = [];
+  }
+  addTo(target) {
+    const host = hostOf(target);
+    if (this._host) { this.remove(); }
+    host.addLayer(this);
+    return this;
+  }
+  remove() { if (this._host) { this._host.removeLayer(this); } return this; }
+  removeFrom(target) { const host = hostOf(target); if (this._host === host) { host.removeLayer(this); } return this; }
+  bindPopup(content, options) { this._popup = { content: content, options: options }; this._changed(); return this; }
+  unbindPopup() { this._popup = null; this._changed(); return this; }
+  getPopup() { return this._popup; }
+  isPopupOpen() { return !!this._popupOpen; }
+  setPopupContent(content) { if (this._popup) { this._popup.content = content; } return this; }
+  /** Opens this layer's popup at `latlng` (default: the layer's own position or centre). */
+  openPopup(latlng) {
+    const map = this._mapOf();
+    if (!map || !this._popup) { return this; }
+    const at = latlng ? toLatLng(latlng) : this._anchor();
+    if (!at) { return this; }
+    map.smap.openPopup([at.lng, at.lat], popupContent(this._popup.content, this), popupOptions(this._popup.options));
+    return this;
+  }
+  closePopup() { const map = this._mapOf(); if (map) { map.smap.closePopup(); } return this; }
+  togglePopup() { return this.openPopup(); }
+  addEventParent(p) { this._eventParents.push(p); return this; }
+  removeEventParent(p) { this._eventParents = this._eventParents.filter(function (x) { return x !== p; }); return this; }
+  getBounds() {
+    const b = new LatLngBounds();
+    this._specs().forEach(function (s) { s.geometries.forEach(function (g) { walkCoords(g, function (c) { b.extend([c[1], c[0]]); }); }); });
+    return b;
+  }
+  toGeoJSON() {
+    const features = [];
+    const props = (this.feature && this.feature.properties) || {};
+    this._specs().forEach(function (s) { s.geometries.forEach(function (g) { features.push({ type: 'Feature', properties: props, geometry: g }); }); });
+    return features.length === 1 ? features[0] : { type: 'FeatureCollection', features: features };
+  }
+  setStyle(style) { Object.assign(this.options, style || {}); this._changed(); return this; }
+  bringToFront() { const h = this._host; if (h) { h.removeLayer(this); h.addLayer(this); } return this; }
+  _mapOf() { let h = this._host; while (h && !(h instanceof CompatMap)) { h = h._host; } return h || null; }
+  _anchor() { const b = this.getBounds(); return b.isValid() ? b.getCenter() : null; }
+  _changed() { if (this._host) { this._host._childChanged(this); } }
+  _specs() { return []; }
+}
+
+function walkCoords(g, fn) {
+  if (!g) { return; }
+  if (g.type === 'GeometryCollection') { g.geometries.forEach(function (x) { walkCoords(x, fn); }); return; }
+  (function walk(c) { if (typeof c[0] === 'number') { fn(c); } else { c.forEach(walk); } })(g.coordinates);
+}
+
+// Leaflet's default look (Path options).
+const PATH_DEFAULTS = { stroke: true, color: '#3388ff', weight: 3, opacity: 1, fill: false, fillColor: null, fillOpacity: 0.2, dashArray: null };
+
+function dash(o) {
+  if (!o.dashArray) { return undefined; }
+  const parts = (Array.isArray(o.dashArray) ? o.dashArray : String(o.dashArray).split(/[\s,]+/)).map(Number).filter(function (n) { return n > 0; });
+  if (!parts.length) { return undefined; }
+  // Leaflet dashes are in pixels, sMap's in line widths.
+  const w = o.weight || 1;
+  return parts.map(function (n) { return Math.round((n / w) * 100) / 100; });
+}
+
+function lineOptions(o) {
+  const out = { color: o.stroke === false ? TRANSPARENT : o.color, width: o.weight, opacity: o.stroke === false ? 0 : o.opacity };
+  const d = dash(o);
+  if (d) { out.dash = d; }
+  return out;
+}
+
+function areaOptions(o) {
+  const fill = o.fill === false ? TRANSPARENT : (o.fillColor || o.color);
+  return {
+    fill: fill,
+    opacity: o.fill === false ? 0 : o.fillOpacity,
+    outline: o.stroke === false ? TRANSPARENT : withAlpha(o.color, o.opacity),
+    outlineWidth: o.stroke === false ? 0.01 : o.weight,
+  };
+}
+
+/** Leaflet's default marker: a blue pin. */
+const DEFAULT_PIN = { shape: 'pin', fill: '#2a81cb', border: '#3274a3', size: 26 };
+
+function iconAnchor(icon) {
+  const o = icon.options || {};
+  if (!o.iconAnchor || !o.iconSize) { return o.iconSize ? 'center' : 'bottom'; }
+  const a = Array.isArray(o.iconAnchor) ? o.iconAnchor : [o.iconAnchor.x, o.iconAnchor.y];
+  const s = Array.isArray(o.iconSize) ? o.iconSize : [o.iconSize.x, o.iconSize.y];
+  const v = a[1] >= s[1] * 0.75 ? 'bottom' : (a[1] <= s[1] * 0.25 ? 'top' : '');
+  const h = a[0] <= s[0] * 0.25 ? 'left' : (a[0] >= s[0] * 0.75 ? 'right' : '');
+  return (v + (v && h ? '-' : '') + h) || 'center';
+}
+
+let warnedDivIcon = false;
+
+export class Marker extends Layer {
+  constructor(latlng, options) { super(options); this._latlng = toLatLng(latlng); }
+  getLatLng() { return this._latlng; }
+  setLatLng(latlng) { this._latlng = toLatLng(latlng); this._changed(); this.fire('move', { latlng: this._latlng }); return this; }
+  setIcon(icon) { this.options.icon = icon; this._changed(); return this; }
+  setOpacity(opacity) { this.options.opacity = opacity; this._changed(); return this; }
+  setZIndexOffset(z) { this.options.zIndexOffset = z; this._changed(); return this; }
+  _anchor() { return this._latlng; }
+  _specs() {
+    if (!this._latlng) { return []; }
+    const o = this.options;
+    const icon = o.icon;
+    let options;
+    if (icon && icon.options && icon.options.iconUrl) {
+      options = { icon: icon.options.iconUrl, iconAnchor: iconAnchor(icon) };
+    } else {
+      if (icon && icon.options && icon.options.html !== undefined && !warnedDivIcon && typeof console !== 'undefined') {
+        warnedDivIcon = true;
+        console.warn('sMap: divIcon has no counterpart on an sMap map; the default pin is drawn instead.');
+      }
+      options = { marker: Object.assign({}, DEFAULT_PIN, o.opacity !== undefined && o.opacity !== 1 ? { opacity: o.opacity } : {}) };
+    }
+    if (o.zIndexOffset) { options.zIndex = o.zIndexOffset; }
+    return [{ kind: 'points', geometries: [{ type: 'Point', coordinates: [this._latlng.lng, this._latlng.lat] }], options: options }];
+  }
+}
+
+export class CircleMarker extends Layer {
+  constructor(latlng, options) { super(Object.assign({}, PATH_DEFAULTS, { fill: true, radius: 10 }, options || {})); this._latlng = toLatLng(latlng); }
+  getLatLng() { return this._latlng; }
+  setLatLng(latlng) { this._latlng = toLatLng(latlng); this._changed(); return this; }
+  setRadius(r) { this.options.radius = r; this._changed(); return this; }
+  getRadius() { return this.options.radius; }
+  _anchor() { return this._latlng; }
+  _specs() {
+    if (!this._latlng) { return []; }
+    const o = this.options;
+    return [{
+      kind: 'points',
+      geometries: [{ type: 'Point', coordinates: [this._latlng.lng, this._latlng.lat] }],
+      options: {
+        color: o.fill === false ? TRANSPARENT : withAlpha(o.fillColor || o.color, o.fillOpacity),
+        radius: o.radius,
+        strokeColor: o.stroke === false ? TRANSPARENT : withAlpha(o.color, o.opacity),
+        strokeWidth: o.stroke === false ? 0 : o.weight,
+      },
+    }];
+  }
+}
+
+/** A circle of a radius in metres, drawn as an area of 64 points. */
+export class Circle extends Layer {
+  constructor(latlng, options) {
+    if (typeof options === 'number') { options = { radius: options }; }
+    super(Object.assign({}, PATH_DEFAULTS, { fill: true, radius: 10 }, options || {}));
+    this._latlng = toLatLng(latlng);
+  }
+  getLatLng() { return this._latlng; }
+  setLatLng(latlng) { this._latlng = toLatLng(latlng); this._changed(); return this; }
+  setRadius(r) { this.options.radius = r; this._changed(); return this; }
+  getRadius() { return this.options.radius; }
+  _anchor() { return this._latlng; }
+  _specs() {
+    if (!this._latlng) { return []; }
+    const R = 6378137;
+    const lat = this._latlng.lat * Math.PI / 180;
+    const ring = [];
+    for (let i = 0; i <= 64; i++) {
+      const a = (i % 64) / 64 * 2 * Math.PI;
+      const dLat = (this.options.radius * Math.cos(a)) / R;
+      const dLng = (this.options.radius * Math.sin(a)) / (R * Math.cos(lat));
+      ring.push([this._latlng.lng + dLng * 180 / Math.PI, this._latlng.lat + dLat * 180 / Math.PI]);
+    }
+    return [{ kind: 'polygons', geometries: [{ type: 'Polygon', coordinates: [ring] }], options: areaOptions(this.options) }];
+  }
+}
+
+function depth(a) { let d = 0; while (Array.isArray(a) && a.length && !isLatLngish(a)) { d += 1; a = a[0]; } return d; }
+
+export class Polyline extends Layer {
+  constructor(latlngs, options) { super(Object.assign({}, PATH_DEFAULTS, options || {})); this._latlngs = latlngs || []; }
+  getLatLngs() { return this._latlngs; }
+  setLatLngs(latlngs) { this._latlngs = latlngs || []; this._changed(); return this; }
+  addLatLng(latlng) { if (depth(this._latlngs) <= 1) { this._latlngs.push(latlng); } this._changed(); return this; }
+  isEmpty() { return !this._latlngs.length; }
+  _geometry() {
+    const lls = this._latlngs;
+    if (!lls.length) { return null; }
+    if (depth(lls) <= 1) { return { type: 'LineString', coordinates: lls.map(lngLatArr) }; }
+    return { type: 'MultiLineString', coordinates: lls.map(function (line) { return line.map(lngLatArr); }) };
+  }
+  _specs() { const g = this._geometry(); return g ? [{ kind: 'lines', geometries: [g], options: lineOptions(this.options) }] : []; }
+}
+
+function closeRing(ring) {
+  const r = ring.map(lngLatArr);
+  if (r.length && (r[0][0] !== r[r.length - 1][0] || r[0][1] !== r[r.length - 1][1])) { r.push(r[0].slice()); }
+  return r;
+}
+
+export class Polygon extends Polyline {
+  constructor(latlngs, options) { super(latlngs, Object.assign({ fill: true }, options || {})); }
+  _geometry() {
+    const lls = this._latlngs;
+    if (!lls.length) { return null; }
+    const d = depth(lls);
+    if (d <= 1) { return { type: 'Polygon', coordinates: [closeRing(lls)] }; }
+    if (d === 2) { return { type: 'Polygon', coordinates: lls.map(closeRing) }; }
+    return { type: 'MultiPolygon', coordinates: lls.map(function (poly) { return poly.map(closeRing); }) };
+  }
+  _specs() { const g = this._geometry(); return g ? [{ kind: 'polygons', geometries: [g], options: areaOptions(this.options) }] : []; }
+}
+
+export class Rectangle extends Polygon {
+  constructor(bounds, options) { super(rectangleRing(bounds), options); }
+  setBounds(bounds) { return this.setLatLngs(rectangleRing(bounds)); }
+}
+
+function rectangleRing(bounds) {
+  const b = latLngBounds(bounds);
+  return [b.getSouthWest(), b.getNorthWest(), b.getNorthEast(), b.getSouthEast()];
+}
+
+// ------------------------------------------------------------------ drawing (maps and groups)
+
+function keyOf(spec) {
+  return spec.kind + '|' + JSON.stringify(spec.options, function (k, v) { return typeof v === 'function' ? '[fn]' : v; });
+}
+
+/** The layers a list draws, groups opened up: [{ layer, popup }] (a layer's own popup, else its nearest group's). */
+function leaves(layers, inherited, out) {
+  out = out || { vectors: [], tiles: [] };
+  layers.forEach(function (l) {
+    if (l instanceof LayerGroup) { leaves(l._layers, l._popup || inherited, out); return; }
+    if (l instanceof TileLayer) { out.tiles.push(l); return; }
+    out.vectors.push({ layer: l, popup: l._popup || inherited || null });
+  });
+  return out;
+}
+
+/**
+ * Draws layers on the sMap map under ids `<base>:<n>`: layers of one kind and look become one sMap layer, each feature
+ * tagged with its layer, so a click and a popup find the Leaflet layer it came from. Drawn again with the same looks,
+ * only the data is replaced (the sMap layers keep their place); otherwise they are added again (on top).
+ */
+class Drawing {
+  constructor(base) { this.base = base; this.ids = []; this.keys = []; this.groups = []; }
+  draw(smap, items) {
+    const groups = [];
+    const byKey = {};
+    items.forEach(function (item) {
+      item.layer._specs().forEach(function (spec) {
+        const k = keyOf(spec) + (item.popup ? '|popup' : '');
+        let g = byKey[k];
+        if (!g) { g = byKey[k] = { key: k, kind: spec.kind, options: spec.options, features: [], items: [] }; groups.push(g); }
+        const idx = g.items.length;
+        g.items.push(item);
+        const props = Object.assign({}, (item.layer.feature && item.layer.feature.properties) || {}, { __leaflet: idx });
+        spec.geometries.forEach(function (geometry) { g.features.push({ type: 'Feature', properties: props, geometry: geometry }); });
+      });
+    });
+    const keys = groups.map(function (g) { return g.key; });
+    const same = keys.length === this.keys.length && keys.every(function (k, i) { return k === this.keys[i]; }, this) &&
+      this.ids.every(function (id) { return smap.layers().indexOf(id) >= 0; });
+    this.groups = groups;
+    if (same) {
+      groups.forEach(function (g, n) { smap.setData(this.ids[n], { type: 'FeatureCollection', features: g.features }); }, this);
+      return;
+    }
+    this.erase(smap);
+    this.keys = keys;
+    const self = this;
+    groups.forEach(function (g, n) {
+      const id = self.base + ':' + n;
+      const item = function (props) { const live = self.groups[n]; return live && props ? live.items[props.__leaflet] : null; };
+      const options = Object.assign({}, g.options, {
+        onClick: function (feature, e) {
+          const it = item(feature && feature.properties);
+          if (!it) { return; }
+          const lngLat = e && e.lngLat;
+          it.layer.fire('click', {
+            latlng: lngLat ? { lat: lngLat.lat, lng: lngLat.lng } : it.layer._anchor(),
+            containerPoint: e && e.point,
+            originalEvent: e && e.originalEvent,
+            layer: it.layer,
+          }, true);
+        },
+      });
+      const withPopup = g.items.find(function (it) { return !!it.popup; });
+      if (withPopup) {
+        options.popup = function (props) {
+          const it = item(props);
+          return it && it.popup ? popupContent(it.popup.content, it.layer) : null;
+        };
+        if (withPopup.popup.options) { options.popupOptions = popupOptions(withPopup.popup.options); }
+      }
+      const fc = { type: 'FeatureCollection', features: g.features };
+      if (g.kind === 'points') { smap.addPoints(id, fc, options); }
+      else if (g.kind === 'lines') { smap.addLines(id, fc, options); }
+      else { smap.addPolygons(id, fc, options); }
+      self.ids.push(id);
+    });
+  }
+  erase(smap) {
+    this.ids.forEach(function (id) { smap.removeLayer(id); });
+    this.ids = [];
+    this.keys = [];
+  }
+}
+
+function hostOf(target) {
+  if (target instanceof CompatMap || target instanceof LayerGroup) { return target; }
+  if (target && target.__leafletCompat) { return target.__leafletCompat.map; }
+  throw new Error('sMap: addTo() takes the compat map (L.map), a layer group, or an sMap map passed to createLeafletCompat()');
+}
+
+/** Raster tiles (`L.tileLayer`) on the sMap map. */
+export class TileLayer extends Layer {
+  constructor(url, options) { super(Object.assign({ subdomains: 'abc', tileSize: 256, minZoom: 0, maxZoom: 18, zoomOffset: 0, opacity: 1 }, options || {})); this._url = url; this._rev = 0; }
+  setUrl(url) { this._url = url; this._rev += 1; this._changed(); return this; }
+  setOpacity(opacity) { this.options.opacity = opacity; this._rev += 1; this._changed(); return this; }
+  getAttribution() { return this.options.attribution; }
+  /** The tile URLs with every Leaflet placeholder filled except {z}, {x}, {y} (one per subdomain). */
+  tileUrls() {
+    const o = this.options;
+    const subs = typeof o.subdomains === 'string' ? o.subdomains.split('') : (o.subdomains || []);
+    let url = String(this._url).replace(/\{r\}/g, o.detectRetina ? '@2x' : '').replace(/\{-y\}/g, '{y}');
+    url = url.replace(/\{([A-Za-z_]+)\}/g, function (all, name) {
+      if (name === 'z' || name === 'x' || name === 'y' || name === 's') { return all; }
+      const v = o[name];
+      return v === undefined ? all : (typeof v === 'function' ? v({}) : String(v));
+    });
+    if (url.indexOf('{s}') < 0 || !subs.length) { return [url]; }
+    return subs.map(function (s) { return url.replace(/\{s\}/g, s); });
+  }
+  _drawSelf(smap, id) {
+    if (typeof smap.addRasterLayer !== 'function') { throw new Error('sMap: tileLayer needs @superrouteca/smap 1.1.0 (addRasterLayer)'); }
+    const o = this.options;
+    const spec = { tiles: this.tileUrls(), tileSize: o.tileSize };
+    if (o.attribution) { spec.attribution = o.attribution; }
+    if (o.opacity !== undefined && o.opacity !== 1) { spec.opacity = o.opacity; }
+    if (o.tms || /\{-y\}/.test(this._url)) { spec.scheme = 'tms'; }
+    if (o.minZoom) { spec.minzoom = Math.max(0, o.minZoom - 1); }
+    if (o.maxNativeZoom !== undefined || o.maxZoom !== undefined) { spec.maxzoom = o.maxNativeZoom !== undefined ? o.maxNativeZoom : o.maxZoom; }
+    smap.addRasterLayer(id, spec);
+  }
+}
+
+/** OGC WMS (`L.tileLayer.wms`) on the sMap map. */
+export class WmsLayer extends TileLayer {
+  constructor(url, options) { super(url, Object.assign({ layers: '', styles: '', format: 'image/jpeg', transparent: false, version: '1.1.1' }, options || {})); }
+  setParams(params) { Object.assign(this.options, params); this._rev += 1; this._changed(); return this; }
+  _drawSelf(smap, id) {
+    if (typeof smap.addWmsLayer !== 'function') { throw new Error('sMap: tileLayer.wms needs @superrouteca/smap 1.1.0 (addWmsLayer)'); }
+    const o = this.options;
+    const spec = { url: this._url, layers: o.layers, styles: o.styles, format: o.format, transparent: o.transparent, version: o.version };
+    if (o.attribution) { spec.attribution = o.attribution; }
+    smap.addWmsLayer(id, spec);
+  }
+}
+
+/** Layers held and drawn together (`L.layerGroup`, `L.featureGroup`, `L.geoJSON`). */
+export class LayerGroup extends Layer {
+  constructor(layers, options) {
+    super(options);
+    this._layers = [];
+    (layers || []).forEach(function (l) { this.addLayer(l); }, this);
+  }
+  addLayer(layer) {
+    if (layer._host === this) { return this; }
+    if (layer._host) { layer._host.removeLayer(layer); }
+    layer._host = this;
+    this._layers.push(layer);
+    if (this._eventsUp) { layer.addEventParent(this); }
+    this._changed();
+    return this;
+  }
+  removeLayer(layer) {
+    if (typeof layer === 'number') { layer = this.getLayer(layer); }
+    if (!layer || layer._host !== this) { return this; }
+    layer._host = null;
+    layer.removeEventParent(this);
+    this._layers = this._layers.filter(function (l) { return l !== layer; });
+    this._changed();
+    return this;
+  }
+  hasLayer(layer) { return this._layers.indexOf(layer) >= 0; }
+  clearLayers() { this._layers.slice().forEach(function (l) { this.removeLayer(l); }, this); return this; }
+  eachLayer(fn, ctx) { this._layers.forEach(function (l) { fn.call(ctx, l); }); return this; }
+  getLayers() { return this._layers.slice(); }
+  getLayer(id) { return this._layers.find(function (l) { return l._leaflet_id === id; }) || null; }
+  getLayerId(layer) { return layer._leaflet_id; }
+  setStyle(style) { this._layers.forEach(function (l) { if (l.setStyle) { l.setStyle(style); } }); return this; }
+  invoke(name) { const args = Array.prototype.slice.call(arguments, 1); this._layers.forEach(function (l) { if (typeof l[name] === 'function') { l[name].apply(l, args); } }); return this; }
+  _specs() { return this._layers.reduce(function (a, l) { return a.concat(l._specs()); }, []); }
+  _childChanged() { this._changed(); }
+}
+
+/** A layer group whose layers' events reach it (as Leaflet's FeatureGroup). */
+export class FeatureGroup extends LayerGroup {
+  constructor(layers, options) { super([], options); this._eventsUp = true; (layers || []).forEach(function (l) { this.addLayer(l); }, this); }
+  bringToFront() { return Layer.prototype.bringToFront.call(this); }
+}
+
+function asFeatures(data) {
+  if (!data) { return []; }
+  if (Array.isArray(data)) { return data.reduce(function (a, d) { return a.concat(asFeatures(d)); }, []); }
+  if (data.type === 'FeatureCollection') { return data.features || []; }
+  if (data.type === 'Feature') { return [data]; }
+  if (data.type) { return [{ type: 'Feature', properties: {}, geometry: data }]; }
+  return [];
+}
+
+function swap(c) { return [c[1], c[0]]; }
+
+/** `L.geoJSON(data, { style, pointToLayer, onEachFeature, filter })` on the sMap map. */
+export class GeoJSON extends FeatureGroup {
+  constructor(data, options) {
+    super([], options);
+    if (data) { this.addData(data); }
+  }
+  addData(data) {
+    const o = this.options;
+    asFeatures(data).forEach(function (f) {
+      if (!f || !f.geometry) { return; }
+      if (o.filter && !o.filter(f)) { return; }
+      const layer = this._layerFor(f);
+      if (!layer) { return; }
+      layer.feature = f;
+      layer.defaultOptions = Object.assign({}, layer.options);
+      this._restyle(layer);
+      if (o.onEachFeature) { o.onEachFeature(f, layer); }
+      this.addLayer(layer);
+    }, this);
+    return this;
+  }
+  resetStyle(layer) {
+    const layers = layer ? [layer] : this._layers;
+    layers.forEach(function (l) { if (l.defaultOptions) { l.options = Object.assign({}, l.defaultOptions); this._restyle(l); l._changed(); } }, this);
+    return this;
+  }
+  setStyle(style) { this.options.style = style; this._layers.forEach(function (l) { this._restyle(l); l._changed(); }, this); return this; }
+  _restyle(layer) {
+    const s = this.options.style;
+    if (!s || layer instanceof Marker) { return; }
+    Object.assign(layer.options, typeof s === 'function' ? s(layer.feature) : s);
+  }
+  _layerFor(f) {
+    const g = f.geometry;
+    const o = this.options;
+    const coordsToLatLng = o.coordsToLatLng || swap;
+    switch (g.type) {
+      case 'Point': {
+        const ll = coordsToLatLng(g.coordinates);
+        return o.pointToLayer ? o.pointToLayer(f, toLatLng(ll)) : new Marker(ll, o.markersInheritOptions ? o : {});
+      }
+      case 'MultiPoint': {
+        const group = new FeatureGroup();
+        g.coordinates.forEach(function (c) {
+          const ll = coordsToLatLng(c);
+          group.addLayer(o.pointToLayer ? o.pointToLayer(f, toLatLng(ll)) : new Marker(ll));
+        });
+        return group;
+      }
+      case 'LineString': return new Polyline(g.coordinates.map(coordsToLatLng));
+      case 'MultiLineString': return new Polyline(g.coordinates.map(function (l) { return l.map(coordsToLatLng); }));
+      case 'Polygon': return new Polygon(g.coordinates.map(function (r) { return r.map(coordsToLatLng); }));
+      case 'MultiPolygon': return new Polygon(g.coordinates.map(function (p) { return p.map(function (r) { return r.map(coordsToLatLng); }); }));
+      case 'GeometryCollection': {
+        const group = new FeatureGroup();
+        g.geometries.forEach(function (x) {
+          const child = this._layerFor({ type: 'Feature', properties: f.properties, geometry: x });
+          if (child) { child.feature = f; this._restyle(child); group.addLayer(child); }
+        }, this);
+        return group;
+      }
+      default: return null;
+    }
+  }
+}
+
+// ------------------------------------------------------------------ the map
+
+/** A Leaflet-style map over an sMap map (zoom levels as Leaflet counts them: one above the sMap map's). */
+export class CompatMap extends Evented {
+  constructor(smap) {
+    super();
+    this.smap = smap;
+    this._layers = [];
+    this._wrapped = [];
+  }
+  get engine() { return this.smap.engine; }
+  addLayer(layer) {
+    if (layer._host === this) { return this; }
+    if (layer._host) { layer._host.removeLayer(layer); }
+    layer._host = this;
+    this._layers.push(layer);
+    this._drawLayer(layer);
+    layer.fire('add');
+    this.fire('layeradd', { layer: layer });
+    return this;
+  }
+  removeLayer(layer) {
+    if (layer._host !== this) { return this; }
+    layer._host = null;
+    this._layers = this._layers.filter(function (l) { return l !== layer; });
+    this._eraseLayer(layer);
+    layer.fire('remove');
+    this.fire('layerremove', { layer: layer });
+    return this;
+  }
+  hasLayer(layer) { return layer._host === this; }
+  eachLayer(fn, ctx) { this._layers.forEach(function (l) { fn.call(ctx, l); }); return this; }
+  // Each layer added to the map is drawn on its own, in the order added (a later layer is on top, as in Leaflet).
+  _drawLayer(layer) {
+    const smap = this.smap;
+    const parts = leaves([layer], null);
+    layer.__tiles = layer.__tiles || {};
+    const keep = {};
+    parts.tiles.forEach(function (t) {
+      const id = 'leaflet-' + t._leaflet_id;
+      keep[id] = t._rev;
+      if (layer.__tiles[id] === t._rev) { return; }
+      if (layer.__tiles[id] !== undefined) { smap.removeLayer(id); }
+      t._drawSelf(smap, id);
+    });
+    Object.keys(layer.__tiles).forEach(function (id) { if (keep[id] === undefined) { smap.removeLayer(id); } });
+    layer.__tiles = keep;
+    if (!layer.__drawing) { layer.__drawing = new Drawing('leaflet-' + layer._leaflet_id); }
+    layer.__drawing.draw(smap, parts.vectors);
+  }
+  _eraseLayer(layer) {
+    const smap = this.smap;
+    Object.keys(layer.__tiles || {}).forEach(function (id) { smap.removeLayer(id); });
+    layer.__tiles = {};
+    if (layer.__drawing) { layer.__drawing.erase(smap); }
+  }
+  _childChanged(layer) { if (layer._host === this) { this._drawLayer(layer); } }
+  // Camera
+  getCenter() { const c = this.smap.engine.getCenter(); return { lat: c.lat, lng: c.lng }; }
+  getZoom() { return this.smap.engine.getZoom() + 1; }
+  getBounds() { const b = this.smap.engine.getBounds(); return latLngBounds([[b.getSouth(), b.getWest()], [b.getNorth(), b.getEast()]]); }
+  getMinZoom() { return this.smap.engine.getMinZoom() + 1; }
+  getMaxZoom() { return this.smap.engine.getMaxZoom() + 1; }
+  setView(center, zoom, options) {
+    const ll = toLatLng(center);
+    const cam = { center: [ll.lng, ll.lat] };
+    if (zoom !== undefined) { cam.zoom = zoom - 1; }
+    const animate = options && options.animate;
+    this.smap.engine[animate ? 'easeTo' : 'jumpTo'](animate ? Object.assign(cam, { duration: ((options && options.duration) || 0.25) * 1000 }) : cam);
+    return this;
+  }
+  setZoom(zoom, options) { return this.setView(this.getCenter(), zoom, options); }
+  zoomIn(delta, options) { return this.setZoom(this.getZoom() + (delta || 1), options); }
+  zoomOut(delta, options) { return this.setZoom(this.getZoom() - (delta || 1), options); }
+  panTo(center, options) { return this.setView(center, undefined, Object.assign({ animate: true }, options)); }
+  panBy(offset, options) { this.smap.engine.panBy(Array.isArray(offset) ? offset : [offset.x, offset.y], options && options.animate === false ? { duration: 0 } : {}); return this; }
+  flyTo(center, zoom, options) {
+    const ll = toLatLng(center);
+    const cam = { center: [ll.lng, ll.lat] };
+    if (zoom !== undefined) { cam.zoom = zoom - 1; }
+    if (options && options.duration !== undefined) { cam.duration = options.duration * 1000; }
+    this.smap.flyTo(cam);
+    return this;
+  }
+  fitBounds(bounds, options) {
+    const b = latLngBounds(bounds);
+    if (!b.isValid()) { return this; }
+    const o = options || {};
+    const fit = {};
+    if (o.padding) { const p = Array.isArray(o.padding) ? o.padding : [o.padding.x, o.padding.y]; fit.padding = { left: p[0], right: p[0], top: p[1], bottom: p[1] }; }
+    if (o.paddingTopLeft || o.paddingBottomRight) {
+      const tl = o.paddingTopLeft || [0, 0];
+      const br = o.paddingBottomRight || [0, 0];
+      fit.padding = { left: tl[0], top: tl[1], right: br[0], bottom: br[1] };
+    }
+    if (o.maxZoom !== undefined) { fit.maxZoom = o.maxZoom - 1; }
+    if (o.animate === false) { fit.duration = 0; }
+    this.smap.engine.fitBounds(b.toLngLatArray(), fit);
+    return this;
+  }
+  flyToBounds(bounds, options) { return this.fitBounds(bounds, options); }
+  invalidateSize() { this.smap.engine.resize(); return this; }
+  getContainer() { return this.smap.engine.getContainer(); }
+  getSize() { const c = this.smap.engine.getContainer(); return { x: c.clientWidth, y: c.clientHeight }; }
+  project(latlng) { const ll = toLatLng(latlng); return this.smap.engine.project([ll.lng, ll.lat]); }
+  unproject(point) { const p = Array.isArray(point) ? point : [point.x, point.y]; const c = this.smap.engine.unproject(p); return { lat: c.lat, lng: c.lng }; }
+  latLngToContainerPoint(latlng) { return this.project(latlng); }
+  containerPointToLatLng(point) { return this.unproject(point); }
+  openPopup(content, latlng, options) {
+    if (content instanceof Popup) { content.openOn(this); return this; }
+    const ll = toLatLng(latlng);
+    this.smap.openPopup([ll.lng, ll.lat], content, popupOptions(options));
+    return this;
+  }
+  closePopup() { this.smap.closePopup(); return this; }
+  remove() { this.smap.remove(); return this; }
+  // Events: map mouse events carry `latlng` and `containerPoint` as in Leaflet; the others are the sMap map's own.
+  on(types, fn, ctx) {
+    if (typeof types === 'object') { return super.on(types, fn); }
+    const self = this;
+    String(types).split(/\s+/).forEach(function (type) {
+      const engineType = type;
+      const wrapped = function (e) {
+        const out = { type: type, target: self, originalEvent: e && e.originalEvent };
+        if (e && e.lngLat) { out.latlng = { lat: e.lngLat.lat, lng: e.lngLat.lng }; }
+        if (e && e.point) { out.containerPoint = { x: e.point.x, y: e.point.y }; }
+        fn.call(ctx || self, out);
+      };
+      self._wrapped.push({ type: type, fn: fn, ctx: ctx, wrapped: wrapped, engineType: engineType });
+      self.smap.engine.on(engineType, wrapped);
+    });
+    return this;
+  }
+  off(types, fn, ctx) {
+    const self = this;
+    String(types || '').split(/\s+/).forEach(function (type) {
+      self._wrapped = self._wrapped.filter(function (w) {
+        if (w.type !== type || (fn && w.fn !== fn) || (ctx !== undefined && w.ctx !== ctx)) { return true; }
+        self.smap.engine.off(w.engineType, w.wrapped);
+        return false;
+      });
+    });
+    return this;
+  }
+}
+
+/** `L.popup()`: a popup opened at a position on the map. */
+export class Popup {
+  constructor(options, source) { this.options = options || {}; this._source = source; this._latlng = null; this._content = null; }
+  setLatLng(latlng) { this._latlng = toLatLng(latlng); return this; }
+  getLatLng() { return this._latlng; }
+  setContent(content) { this._content = content; return this; }
+  getContent() { return this._content; }
+  openOn(map) {
+    const m = map instanceof CompatMap ? map : hostOf(map);
+    m.smap.openPopup([this._latlng.lng, this._latlng.lat], popupContent(this._content, this._source), popupOptions(this.options));
+    this._map = m;
+    return this;
+  }
+  close() { if (this._map) { this._map.smap.closePopup(); } return this; }
+  remove() { return this.close(); }
+}
+
+/** `L.icon({ iconUrl, iconSize, iconAnchor })`. */
+export class Icon { constructor(options) { this.options = Object.assign({}, options || {}); } }
+/** `L.divIcon()`: kept for the call to work; an sMap map draws the default pin for it. */
+export class DivIcon extends Icon {}
+
+/**
+ * Leaflet-style calls on an sMap map: `L.map` is the map, `L.marker`, `L.circleMarker`, `L.circle`, `L.polyline`,
+ * `L.polygon`, `L.rectangle`, `L.geoJSON`, `L.tileLayer` (and `L.tileLayer.wms`), `L.layerGroup`, `L.featureGroup`,
+ * `L.popup`, `L.icon`, `L.latLng`, `L.latLngBounds`.
+ */
+export function createLeafletCompat(smap) {
+  if (!smap || !smap.engine) { throw new Error('sMap: createLeafletCompat() takes an sMap map once it is ready (await map.ready)'); }
+  if (smap.__leafletCompat) { return smap.__leafletCompat; }
+  const map = new CompatMap(smap);
+  const tileLayer = function (url, options) { return new TileLayer(url, options); };
+  tileLayer.wms = function (url, options) { return new WmsLayer(url, options); };
+  const ns = {
+    version: '1.1.0',
+    map: map,
+    marker: function (ll, o) { return new Marker(ll, o); },
+    circleMarker: function (ll, o) { return new CircleMarker(ll, o); },
+    circle: function (ll, o) { return new Circle(ll, o); },
+    polyline: function (lls, o) { return new Polyline(lls, o); },
+    polygon: function (lls, o) { return new Polygon(lls, o); },
+    rectangle: function (b, o) { return new Rectangle(b, o); },
+    geoJSON: function (d, o) { return new GeoJSON(d, o); },
+    geoJson: function (d, o) { return new GeoJSON(d, o); },
+    tileLayer: tileLayer,
+    layerGroup: function (l, o) { return new LayerGroup(l, o); },
+    featureGroup: function (l, o) { return new FeatureGroup(l, o); },
+    popup: function (o, s) { return new Popup(o, s); },
+    icon: function (o) { return new Icon(o); },
+    divIcon: function (o) { return new DivIcon(o); },
+    latLng: function (a, b) { return b !== undefined ? { lat: +a, lng: +b } : toLatLng(a); },
+    latLngBounds: latLngBounds,
+    Marker, CircleMarker, Circle, Polyline, Polygon, Rectangle, GeoJSON, TileLayer, LayerGroup, FeatureGroup, Popup, Icon, DivIcon,
+  };
+  Object.defineProperty(smap, '__leafletCompat', { value: ns, enumerable: false, configurable: true });
+  return ns;
+}
+
+export default createLeafletCompat;