@deck.gl-community/leaflet 9.2.0-beta.3

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2020 vis.gl a Series of LF Projects, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# @deck.gl-community/leaflet
+
+This module allows [Leaflet](https://leafletjs.com/) to be used as a [deck.gl](https://deck.gl) basemap. 
+
+More precisely, it provides a Leaflet custom layer that wraps a deck.gl renderer, enabling deck.gl to render layers synchronized with the Leaflet basemap. 
+
+## Installation
+
+```bash
+npm install deck.gl @deck.gl-community/leaflet leaflet
+```
+
+## Usage
+
+```js
+import {DeckLayer} from '@deck.gl-community/leaflet';
+import {MapView} from '@deck.gl/core';
+import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
+const AIR_PORTS =
+  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
+
+// Create map
+const map = L.map(document.getElementById('map'), {
+  center: [51.47, 0.45],
+  zoom: 4,
+});
+L.tileLayer('https://tiles.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png', {
+  maxZoom: 22,
+  attribution:
+    '© <a href="https://carto.com/about-carto/" target="_blank" rel="noopener">CARTO</a>, © <a href="http://www.openstreetmap.org/about/" target="_blank">OpenStreetMap</a> contributors',
+}).addTo(map);
+
+// Add deck.gl overlay
+const deckLayer = new DeckLayer({
+  views: [
+    new MapView({ repeat: true }),
+  ],
+  layers: [
+    new GeoJsonLayer({
+      id: 'airports',
+      data: AIR_PORTS,
+      // Styles
+      filled: true,
+      pointRadiusMinPixels: 2,
+      pointRadiusScale: 2000,
+      getPointRadius: (f) => 11 - f.properties.scalerank,
+      getFillColor: [200, 0, 80, 180],
+      // Interactive props
+      pickable: true,
+      autoHighlight: true,
+      onClick: (info) =>
+        // eslint-disable-next-line
+        info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
+    }),
+    new ArcLayer({
+      id: 'arcs',
+      data: AIR_PORTS,
+      dataTransform: (d: any) => d.features.filter((f) => f.properties.scalerank < 4),
+      // Styles
+      getSourcePosition: (f) => [-0.4531566, 51.4709959], // London
+      getTargetPosition: (f) => f.geometry.coordinates,
+      getSourceColor: [0, 128, 200],
+      getTargetColor: [200, 0, 80],
+      getWidth: 1
+    })
+  ],
+  getTooltip: (info) => info.object && info.object.properties.name
+});
+map.addLayer(deckLayer);
+```
+
+## API Reference
+
+### DeckLayer
+
+An implementation of [L.Layer](https://leafletjs.com/reference.html#layer).
+
+```js
+const deckLayer = new DeckLayer({
+  views: [
+    new MapView({ repeat: true }),
+  ],
+  layers: [...],
+});
+map.addLayer(deckLayer);
+```
+
+The constructor accepts a props object that is passed to the [Deck](https://deck.gl/docs/api-reference/core/deck) constructor. See the [limitations](#supported-features-and-limitations) section below for more details.
+
+The following [Deck methods](https://deck.gl/docs/api-reference/core/deck#methods) can be called directly from a `DeckLayer` instance:
+
+- `deckLayer.setProps`
+- `deckLayer.pickObject`
+- `deckLayer.pickMultipleObjects`
+- `deckLayer.pickObjects`
+
+## Supported Features and Limitations
+
+Supported deck.gl features:
+
+- Layers
+- Effects
+- Auto-highlighting
+- Attribute transitions
+- `onHover` and `onClick` callbacks
+- Tooltip
+
+Not supported features:
+
+- Tilting
+- Multiple views
+- Controller
+- React integration
+- Gesture event callbacks (e.g. `onDrag*`)

package/dist/deck-layer.d.ts

@@ -0,0 +1,21 @@
+import * as L from 'leaflet';
+import type { Deck, DeckProps } from '@deck.gl/core';
+import type { ViewOrViews } from "./deck-utils.js";
+export declare class DeckLayer extends L.Layer {
+    #private;
+    props: DeckProps<ViewOrViews>;
+    _container: HTMLDivElement | undefined;
+    _deck: Deck<ViewOrViews> | undefined;
+    _animate: boolean | undefined;
+    constructor(props: DeckProps<ViewOrViews>);
+    onAdd(): this;
+    onRemove(_map: L.Map): this;
+    getEvents(): {
+        [name: string]: L.LeafletEventHandlerFn;
+    };
+    setProps(props: DeckProps): void;
+    pickObject(opts: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']>;
+    pickMultipleObjects(opts: Parameters<Deck['pickMultipleObjects']>[0]): ReturnType<Deck['pickMultipleObjects']>;
+    pickObjects(opts: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']>;
+}
+//# sourceMappingURL=deck-layer.d.ts.map

package/dist/deck-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-layer.d.ts","sourceRoot":"","sources":["../src/deck-layer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,KAAK,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAC,WAAW,EAAC,wBAAqB;AAE9C,qBAAa,SAAU,SAAQ,CAAC,CAAC,KAAK;;IACpC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,UAAU,EAAE,cAAc,GAAG,SAAS,CAAa;IACnD,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,SAAS,CAAa;IACjD,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAa;gBAE9B,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC;IAMzC,KAAK,IAAI,IAAI;IAmBb,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI;IAc3B,SAAS,IAAI;QAAC,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,qBAAqB,CAAA;KAAC;IActD,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAQhC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAQnF,mBAAmB,CACjB,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,GAC/C,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAQ1C,WAAW,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;CAkHvF"}

package/dist/deck-layer.js

@@ -0,0 +1,166 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import * as L from 'leaflet';
+import { createDeckInstance, updateDeckView } from "./deck-utils.js";
+export class DeckLayer extends L.Layer {
+    props;
+    _container = undefined;
+    _deck = undefined;
+    _animate = undefined;
+    constructor(props) {
+        super();
+        this.props = props;
+    }
+    onAdd() {
+        const pane = this.getPane();
+        if (!pane) {
+            return this;
+        }
+        this._container = L.DomUtil.create('div');
+        this._container.className = 'leaflet-layer';
+        if (this.#getZoomAnimated()) {
+            L.DomUtil.addClass(this._container, 'leaflet-zoom-animated');
+        }
+        pane.appendChild(this._container);
+        this._deck = createDeckInstance(this._map, this._container, this._deck, this.props);
+        this.#update();
+        return this;
+    }
+    onRemove(_map) {
+        if (!this._container || !this._deck) {
+            return this;
+        }
+        L.DomUtil.remove(this._container);
+        this._container = undefined;
+        this._deck.finalize();
+        this._deck = undefined;
+        return this;
+    }
+    getEvents() {
+        return {
+            viewreset: this.#reset.bind(this),
+            movestart: this.#onMoveStart.bind(this),
+            moveend: this.#onMoveEnd.bind(this),
+            zoomstart: this.#onZoomStart.bind(this),
+            zoom: this.#onZoom.bind(this),
+            zoomend: this.#onZoomEnd.bind(this),
+            ...(this.#getZoomAnimated()
+                ? { zoomanim: this.#onAnimZoom.bind(this) }
+                : {})
+        };
+    }
+    setProps(props) {
+        Object.assign(this.props, props);
+        if (this._deck) {
+            this._deck.setProps(props);
+        }
+    }
+    pickObject(opts) {
+        if (!this._deck) {
+            return null;
+        }
+        return this._deck.pickObject(opts);
+    }
+    pickMultipleObjects(opts) {
+        if (!this._deck) {
+            return [];
+        }
+        return this._deck.pickMultipleObjects(opts);
+    }
+    pickObjects(opts) {
+        if (!this._deck) {
+            return [];
+        }
+        return this._deck.pickObjects(opts);
+    }
+    #getMap() {
+        return this._map;
+    }
+    #getZoomAnimated() {
+        return this._zoomAnimated;
+    }
+    #update() {
+        if (!this._container || !this._deck) {
+            return;
+        }
+        if (this.#getMap()._animatingZoom) {
+            return;
+        }
+        const size = this.#getMap().getSize();
+        this._container.style.width = `${size.x}px`;
+        this._container.style.height = `${size.y}px`;
+        // invert map position
+        const offset = this.#getMap()._getMapPanePos().multiplyBy(-1);
+        L.DomUtil.setPosition(this._container, offset);
+        updateDeckView(this._deck, this._map);
+    }
+    #pauseAnimation() {
+        if (!this._deck) {
+            return;
+        }
+        if (this._deck.props._animate) {
+            this._animate = this._deck.props._animate;
+            this._deck.setProps({ _animate: false });
+        }
+    }
+    #unpauseAnimation() {
+        if (!this._deck) {
+            return;
+        }
+        if (this._animate) {
+            this._deck.setProps({ _animate: this._animate });
+            this._animate = undefined;
+        }
+    }
+    #reset() {
+        this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+        this.#update();
+    }
+    #onMoveStart() {
+        this.#pauseAnimation();
+    }
+    #onMoveEnd() {
+        this.#update();
+        this.#unpauseAnimation();
+    }
+    #onZoomStart() {
+        this.#pauseAnimation();
+    }
+    #onAnimZoom(event) {
+        this.#updateTransform(event.center, event.zoom);
+    }
+    #onZoom() {
+        this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+    }
+    #onZoomEnd() {
+        this.#unpauseAnimation();
+    }
+    /**
+     * see https://stackoverflow.com/a/67107000/1823988
+     * see L.Renderer._updateTransform https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Renderer.js#L90-L105
+     */
+    #updateTransform(center, zoom) {
+        if (!this._container) {
+            return;
+        }
+        const scale = this.#getMap().getZoomScale(zoom, this.#getMap().getZoom());
+        const position = L.DomUtil.getPosition(this._container);
+        const viewHalf = this.#getMap().getSize().multiplyBy(0.5);
+        const currentCenterPoint = this.#getMap().project(this.#getMap().getCenter(), zoom);
+        const destCenterPoint = this.#getMap().project(center, zoom);
+        const centerOffset = destCenterPoint.subtract(currentCenterPoint);
+        const topLeftOffset = viewHalf
+            .multiplyBy(-scale)
+            .add(position)
+            .add(viewHalf)
+            .subtract(centerOffset);
+        if (L.Browser.any3d) {
+            L.DomUtil.setTransform(this._container, topLeftOffset, scale);
+        }
+        else {
+            L.DomUtil.setPosition(this._container, topLeftOffset);
+        }
+    }
+}
+//# sourceMappingURL=deck-layer.js.map

package/dist/deck-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-layer.js","sourceRoot":"","sources":["../src/deck-layer.ts"],"names":[],"mappings":"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"}

package/dist/deck-utils.d.ts

@@ -0,0 +1,7 @@
+import * as L from 'leaflet';
+import { Deck } from '@deck.gl/core';
+import type { DeckProps, View } from '@deck.gl/core';
+export type ViewOrViews = View | View[] | null;
+export declare function createDeckInstance(map: L.Map, container: HTMLDivElement, deck: Deck<ViewOrViews> | undefined, props: DeckProps<ViewOrViews>): Deck<ViewOrViews>;
+export declare function updateDeckView(deck: Deck<ViewOrViews>, map: L.Map): void;
+//# sourceMappingURL=deck-utils.d.ts.map

package/dist/deck-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-utils.d.ts","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,EAAC,SAAS,EAAE,IAAI,EAAwB,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;AAY/C,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,SAAS,EACnC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,GAC5B,IAAI,CAAC,WAAW,CAAC,CAYnB;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,CAMxE"}

package/dist/deck-utils.js

@@ -0,0 +1,33 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Deck } from '@deck.gl/core';
+function getViewState(map) {
+    return {
+        longitude: map.getCenter().lng,
+        latitude: map.getCenter().lat,
+        zoom: map.getZoom() - 1,
+        pitch: 0,
+        bearing: 0
+    };
+}
+export function createDeckInstance(map, container, deck, props) {
+    if (!deck) {
+        const viewState = getViewState(map);
+        deck = new Deck({
+            ...props,
+            parent: container,
+            controller: false,
+            style: { zIndex: 'auto' },
+            viewState
+        });
+    }
+    return deck;
+}
+export function updateDeckView(deck, map) {
+    const viewState = getViewState(map);
+    // console.log(viewState);
+    deck.setProps({ viewState });
+    deck.redraw();
+}
+//# sourceMappingURL=deck-utils.js.map

package/dist/deck-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-utils.js","sourceRoot":"","sources":["../src/deck-utils.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAGpC,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAKnC,SAAS,YAAY,CAAC,GAAU;IAC9B,OAAO;QACL,SAAS,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC,GAAG;QAC9B,QAAQ,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC,GAAG;QAC7B,IAAI,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;QACvB,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;KACX,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,GAAU,EACV,SAAyB,EACzB,IAAmC,EACnC,KAA6B;IAE7B,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,IAAI,GAAG,IAAI,IAAI,CAAC;YACd,GAAG,KAAK;YACR,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,KAAK;YACjB,KAAK,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC;YACvB,SAAS;SACV,CAAC,CAAC;IACL,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,IAAuB,EAAE,GAAU;IAChE,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACpC,0BAA0B;IAE1B,IAAI,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAC,CAAC,CAAC;IAC3B,IAAI,CAAC,MAAM,EAAE,CAAC;AAChB,CAAC"}

package/dist/index.cjs

@@ -0,0 +1,222 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  DeckLayer: () => DeckLayer
+});
+module.exports = __toCommonJS(dist_exports);
+
+// dist/deck-layer.js
+var L = __toESM(require("leaflet"), 1);
+
+// dist/deck-utils.js
+var import_core = require("@deck.gl/core");
+function getViewState(map) {
+  return {
+    longitude: map.getCenter().lng,
+    latitude: map.getCenter().lat,
+    zoom: map.getZoom() - 1,
+    pitch: 0,
+    bearing: 0
+  };
+}
+function createDeckInstance(map, container, deck, props) {
+  if (!deck) {
+    const viewState = getViewState(map);
+    deck = new import_core.Deck({
+      ...props,
+      parent: container,
+      controller: false,
+      style: { zIndex: "auto" },
+      viewState
+    });
+  }
+  return deck;
+}
+function updateDeckView(deck, map) {
+  const viewState = getViewState(map);
+  deck.setProps({ viewState });
+  deck.redraw();
+}
+
+// dist/deck-layer.js
+var DeckLayer = class extends L.Layer {
+  props;
+  _container = void 0;
+  _deck = void 0;
+  _animate = void 0;
+  constructor(props) {
+    super();
+    this.props = props;
+  }
+  onAdd() {
+    const pane = this.getPane();
+    if (!pane) {
+      return this;
+    }
+    this._container = L.DomUtil.create("div");
+    this._container.className = "leaflet-layer";
+    if (this.#getZoomAnimated()) {
+      L.DomUtil.addClass(this._container, "leaflet-zoom-animated");
+    }
+    pane.appendChild(this._container);
+    this._deck = createDeckInstance(this._map, this._container, this._deck, this.props);
+    this.#update();
+    return this;
+  }
+  onRemove(_map) {
+    if (!this._container || !this._deck) {
+      return this;
+    }
+    L.DomUtil.remove(this._container);
+    this._container = void 0;
+    this._deck.finalize();
+    this._deck = void 0;
+    return this;
+  }
+  getEvents() {
+    return {
+      viewreset: this.#reset.bind(this),
+      movestart: this.#onMoveStart.bind(this),
+      moveend: this.#onMoveEnd.bind(this),
+      zoomstart: this.#onZoomStart.bind(this),
+      zoom: this.#onZoom.bind(this),
+      zoomend: this.#onZoomEnd.bind(this),
+      ...this.#getZoomAnimated() ? { zoomanim: this.#onAnimZoom.bind(this) } : {}
+    };
+  }
+  setProps(props) {
+    Object.assign(this.props, props);
+    if (this._deck) {
+      this._deck.setProps(props);
+    }
+  }
+  pickObject(opts) {
+    if (!this._deck) {
+      return null;
+    }
+    return this._deck.pickObject(opts);
+  }
+  pickMultipleObjects(opts) {
+    if (!this._deck) {
+      return [];
+    }
+    return this._deck.pickMultipleObjects(opts);
+  }
+  pickObjects(opts) {
+    if (!this._deck) {
+      return [];
+    }
+    return this._deck.pickObjects(opts);
+  }
+  #getMap() {
+    return this._map;
+  }
+  #getZoomAnimated() {
+    return this._zoomAnimated;
+  }
+  #update() {
+    if (!this._container || !this._deck) {
+      return;
+    }
+    if (this.#getMap()._animatingZoom) {
+      return;
+    }
+    const size = this.#getMap().getSize();
+    this._container.style.width = `${size.x}px`;
+    this._container.style.height = `${size.y}px`;
+    const offset = this.#getMap()._getMapPanePos().multiplyBy(-1);
+    L.DomUtil.setPosition(this._container, offset);
+    updateDeckView(this._deck, this._map);
+  }
+  #pauseAnimation() {
+    if (!this._deck) {
+      return;
+    }
+    if (this._deck.props._animate) {
+      this._animate = this._deck.props._animate;
+      this._deck.setProps({ _animate: false });
+    }
+  }
+  #unpauseAnimation() {
+    if (!this._deck) {
+      return;
+    }
+    if (this._animate) {
+      this._deck.setProps({ _animate: this._animate });
+      this._animate = void 0;
+    }
+  }
+  #reset() {
+    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+    this.#update();
+  }
+  #onMoveStart() {
+    this.#pauseAnimation();
+  }
+  #onMoveEnd() {
+    this.#update();
+    this.#unpauseAnimation();
+  }
+  #onZoomStart() {
+    this.#pauseAnimation();
+  }
+  #onAnimZoom(event) {
+    this.#updateTransform(event.center, event.zoom);
+  }
+  #onZoom() {
+    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+  }
+  #onZoomEnd() {
+    this.#unpauseAnimation();
+  }
+  /**
+   * see https://stackoverflow.com/a/67107000/1823988
+   * see L.Renderer._updateTransform https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Renderer.js#L90-L105
+   */
+  #updateTransform(center, zoom) {
+    if (!this._container) {
+      return;
+    }
+    const scale = this.#getMap().getZoomScale(zoom, this.#getMap().getZoom());
+    const position = L.DomUtil.getPosition(this._container);
+    const viewHalf = this.#getMap().getSize().multiplyBy(0.5);
+    const currentCenterPoint = this.#getMap().project(this.#getMap().getCenter(), zoom);
+    const destCenterPoint = this.#getMap().project(center, zoom);
+    const centerOffset = destCenterPoint.subtract(currentCenterPoint);
+    const topLeftOffset = viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset);
+    if (L.Browser.any3d) {
+      L.DomUtil.setTransform(this._container, topLeftOffset, scale);
+    } else {
+      L.DomUtil.setPosition(this._container, topLeftOffset);
+    }
+  }
+};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/deck-layer.ts", "../src/deck-utils.ts"],
+  "sourcesContent": ["// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nexport * from './deck-layer';\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport * as L from 'leaflet';\nimport type {Deck, DeckProps} from '@deck.gl/core';\nimport {createDeckInstance, updateDeckView} from './deck-utils';\nimport type {ViewOrViews} from './deck-utils';\n\nexport class DeckLayer extends L.Layer {\n  props: DeckProps<ViewOrViews>;\n  _container: HTMLDivElement | undefined = undefined;\n  _deck: Deck<ViewOrViews> | undefined = undefined;\n  _animate: boolean | undefined = undefined;\n\n  constructor(props: DeckProps<ViewOrViews>) {\n    super();\n\n    this.props = props;\n  }\n\n  onAdd(): this {\n    const pane = this.getPane();\n    if (!pane) {\n      return this;\n    }\n\n    this._container = L.DomUtil.create('div');\n    this._container.className = 'leaflet-layer';\n    if (this.#getZoomAnimated()) {\n      L.DomUtil.addClass(this._container, 'leaflet-zoom-animated');\n    }\n\n    pane.appendChild(this._container);\n    this._deck = createDeckInstance(this._map, this._container, this._deck, this.props);\n    this.#update();\n\n    return this;\n  }\n\n  onRemove(_map: L.Map): this {\n    if (!this._container || !this._deck) {\n      return this;\n    }\n\n    L.DomUtil.remove(this._container);\n    this._container = undefined;\n\n    this._deck.finalize();\n    this._deck = undefined;\n\n    return this;\n  }\n\n  getEvents(): {[name: string]: L.LeafletEventHandlerFn} {\n    return {\n      viewreset: this.#reset.bind(this),\n      movestart: this.#onMoveStart.bind(this),\n      moveend: this.#onMoveEnd.bind(this),\n      zoomstart: this.#onZoomStart.bind(this),\n      zoom: this.#onZoom.bind(this),\n      zoomend: this.#onZoomEnd.bind(this),\n      ...(this.#getZoomAnimated()\n        ? {zoomanim: this.#onAnimZoom.bind(this) as L.LeafletEventHandlerFn}\n        : {})\n    };\n  }\n\n  setProps(props: DeckProps): void {\n    Object.assign(this.props, props);\n\n    if (this._deck) {\n      this._deck.setProps(props);\n    }\n  }\n\n  pickObject(opts: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']> {\n    if (!this._deck) {\n      return null;\n    }\n\n    return this._deck.pickObject(opts);\n  }\n\n  pickMultipleObjects(\n    opts: Parameters<Deck['pickMultipleObjects']>[0]\n  ): ReturnType<Deck['pickMultipleObjects']> {\n    if (!this._deck) {\n      return [];\n    }\n\n    return this._deck.pickMultipleObjects(opts);\n  }\n\n  pickObjects(opts: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']> {\n    if (!this._deck) {\n      return [];\n    }\n\n    return this._deck.pickObjects(opts);\n  }\n\n  #getMap(): L.Map & {_animatingZoom: boolean; _getMapPanePos: () => L.Point} {\n    return (this as any)._map;\n  }\n\n  #getZoomAnimated(): boolean {\n    return (this as any)._zoomAnimated;\n  }\n\n  #update(): void {\n    if (!this._container || !this._deck) {\n      return;\n    }\n    if (this.#getMap()._animatingZoom) {\n      return;\n    }\n\n    const size = this.#getMap().getSize();\n    this._container.style.width = `${size.x}px`;\n    this._container.style.height = `${size.y}px`;\n\n    // invert map position\n    const offset = this.#getMap()._getMapPanePos().multiplyBy(-1);\n    L.DomUtil.setPosition(this._container, offset);\n\n    updateDeckView(this._deck, this._map);\n  }\n\n  #pauseAnimation(): void {\n    if (!this._deck) {\n      return;\n    }\n\n    if (this._deck.props._animate) {\n      this._animate = this._deck.props._animate;\n      this._deck.setProps({_animate: false});\n    }\n  }\n\n  #unpauseAnimation(): void {\n    if (!this._deck) {\n      return;\n    }\n\n    if (this._animate) {\n      this._deck.setProps({_animate: this._animate});\n      this._animate = undefined;\n    }\n  }\n\n  #reset(): void {\n    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());\n    this.#update();\n  }\n\n  #onMoveStart(): void {\n    this.#pauseAnimation();\n  }\n\n  #onMoveEnd(): void {\n    this.#update();\n    this.#unpauseAnimation();\n  }\n\n  #onZoomStart(): void {\n    this.#pauseAnimation();\n  }\n\n  #onAnimZoom(event: L.ZoomAnimEvent): void {\n    this.#updateTransform(event.center, event.zoom);\n  }\n\n  #onZoom(): void {\n    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());\n  }\n\n  #onZoomEnd(): void {\n    this.#unpauseAnimation();\n  }\n\n  /**\n   * see https://stackoverflow.com/a/67107000/1823988\n   * see L.Renderer._updateTransform https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Renderer.js#L90-L105\n   */\n  #updateTransform(center: L.LatLng, zoom: number): void {\n    if (!this._container) {\n      return;\n    }\n\n    const scale = this.#getMap().getZoomScale(zoom, this.#getMap().getZoom());\n    const position = L.DomUtil.getPosition(this._container);\n    const viewHalf = this.#getMap().getSize().multiplyBy(0.5);\n    const currentCenterPoint = this.#getMap().project(this.#getMap().getCenter(), zoom);\n    const destCenterPoint = this.#getMap().project(center, zoom);\n    const centerOffset = destCenterPoint.subtract(currentCenterPoint);\n    const topLeftOffset = viewHalf\n      .multiplyBy(-scale)\n      .add(position)\n      .add(viewHalf)\n      .subtract(centerOffset);\n\n    if (L.Browser.any3d) {\n      L.DomUtil.setTransform(this._container, topLeftOffset, scale);\n    } else {\n      L.DomUtil.setPosition(this._container, topLeftOffset);\n    }\n  }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport * as L from 'leaflet';\nimport {Deck} from '@deck.gl/core';\nimport type {DeckProps, View, ViewStateMap, MapView} from '@deck.gl/core';\n\nexport type ViewOrViews = View | View[] | null;\n\nfunction getViewState(map: L.Map): ViewStateMap<MapView> {\n  return {\n    longitude: map.getCenter().lng,\n    latitude: map.getCenter().lat,\n    zoom: map.getZoom() - 1,\n    pitch: 0,\n    bearing: 0\n  };\n}\n\nexport function createDeckInstance(\n  map: L.Map,\n  container: HTMLDivElement,\n  deck: Deck<ViewOrViews> | undefined,\n  props: DeckProps<ViewOrViews>\n): Deck<ViewOrViews> {\n  if (!deck) {\n    const viewState = getViewState(map);\n    deck = new Deck({\n      ...props,\n      parent: container,\n      controller: false,\n      style: {zIndex: 'auto'},\n      viewState\n    });\n  }\n  return deck;\n}\n\nexport function updateDeckView(deck: Deck<ViewOrViews>, map: L.Map): void {\n  const viewState = getViewState(map);\n  // console.log(viewState);\n\n  deck.setProps({viewState});\n  deck.redraw();\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./deck-layer.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,gCAA6B"}

package/dist/index.js

@@ -0,0 +1,5 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export * from "./deck-layer.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,gCAA6B"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@deck.gl-community/leaflet",
+  "description": "deck.gl integration with Leaflet",
+  "license": "MIT",
+  "version": "9.2.0-beta.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "webgl",
+    "visualization",
+    "leaflet"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visgl/deck.gl-community"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "dependencies": {
+    "@deck.gl/core": "~9.2.1"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.18",
+    "leaflet": "^1.9.4"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.9.4"
+  },
+  "gitHead": "6110b774c8be16f199ecdf67723851a2e34901e5"
+}

package/src/deck-layer.ts

@@ -0,0 +1,209 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import * as L from 'leaflet';
+import type {Deck, DeckProps} from '@deck.gl/core';
+import {createDeckInstance, updateDeckView} from './deck-utils';
+import type {ViewOrViews} from './deck-utils';
+
+export class DeckLayer extends L.Layer {
+  props: DeckProps<ViewOrViews>;
+  _container: HTMLDivElement | undefined = undefined;
+  _deck: Deck<ViewOrViews> | undefined = undefined;
+  _animate: boolean | undefined = undefined;
+
+  constructor(props: DeckProps<ViewOrViews>) {
+    super();
+
+    this.props = props;
+  }
+
+  onAdd(): this {
+    const pane = this.getPane();
+    if (!pane) {
+      return this;
+    }
+
+    this._container = L.DomUtil.create('div');
+    this._container.className = 'leaflet-layer';
+    if (this.#getZoomAnimated()) {
+      L.DomUtil.addClass(this._container, 'leaflet-zoom-animated');
+    }
+
+    pane.appendChild(this._container);
+    this._deck = createDeckInstance(this._map, this._container, this._deck, this.props);
+    this.#update();
+
+    return this;
+  }
+
+  onRemove(_map: L.Map): this {
+    if (!this._container || !this._deck) {
+      return this;
+    }
+
+    L.DomUtil.remove(this._container);
+    this._container = undefined;
+
+    this._deck.finalize();
+    this._deck = undefined;
+
+    return this;
+  }
+
+  getEvents(): {[name: string]: L.LeafletEventHandlerFn} {
+    return {
+      viewreset: this.#reset.bind(this),
+      movestart: this.#onMoveStart.bind(this),
+      moveend: this.#onMoveEnd.bind(this),
+      zoomstart: this.#onZoomStart.bind(this),
+      zoom: this.#onZoom.bind(this),
+      zoomend: this.#onZoomEnd.bind(this),
+      ...(this.#getZoomAnimated()
+        ? {zoomanim: this.#onAnimZoom.bind(this) as L.LeafletEventHandlerFn}
+        : {})
+    };
+  }
+
+  setProps(props: DeckProps): void {
+    Object.assign(this.props, props);
+
+    if (this._deck) {
+      this._deck.setProps(props);
+    }
+  }
+
+  pickObject(opts: Parameters<Deck['pickObject']>[0]): ReturnType<Deck['pickObject']> {
+    if (!this._deck) {
+      return null;
+    }
+
+    return this._deck.pickObject(opts);
+  }
+
+  pickMultipleObjects(
+    opts: Parameters<Deck['pickMultipleObjects']>[0]
+  ): ReturnType<Deck['pickMultipleObjects']> {
+    if (!this._deck) {
+      return [];
+    }
+
+    return this._deck.pickMultipleObjects(opts);
+  }
+
+  pickObjects(opts: Parameters<Deck['pickObjects']>[0]): ReturnType<Deck['pickObjects']> {
+    if (!this._deck) {
+      return [];
+    }
+
+    return this._deck.pickObjects(opts);
+  }
+
+  #getMap(): L.Map & {_animatingZoom: boolean; _getMapPanePos: () => L.Point} {
+    return (this as any)._map;
+  }
+
+  #getZoomAnimated(): boolean {
+    return (this as any)._zoomAnimated;
+  }
+
+  #update(): void {
+    if (!this._container || !this._deck) {
+      return;
+    }
+    if (this.#getMap()._animatingZoom) {
+      return;
+    }
+
+    const size = this.#getMap().getSize();
+    this._container.style.width = `${size.x}px`;
+    this._container.style.height = `${size.y}px`;
+
+    // invert map position
+    const offset = this.#getMap()._getMapPanePos().multiplyBy(-1);
+    L.DomUtil.setPosition(this._container, offset);
+
+    updateDeckView(this._deck, this._map);
+  }
+
+  #pauseAnimation(): void {
+    if (!this._deck) {
+      return;
+    }
+
+    if (this._deck.props._animate) {
+      this._animate = this._deck.props._animate;
+      this._deck.setProps({_animate: false});
+    }
+  }
+
+  #unpauseAnimation(): void {
+    if (!this._deck) {
+      return;
+    }
+
+    if (this._animate) {
+      this._deck.setProps({_animate: this._animate});
+      this._animate = undefined;
+    }
+  }
+
+  #reset(): void {
+    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+    this.#update();
+  }
+
+  #onMoveStart(): void {
+    this.#pauseAnimation();
+  }
+
+  #onMoveEnd(): void {
+    this.#update();
+    this.#unpauseAnimation();
+  }
+
+  #onZoomStart(): void {
+    this.#pauseAnimation();
+  }
+
+  #onAnimZoom(event: L.ZoomAnimEvent): void {
+    this.#updateTransform(event.center, event.zoom);
+  }
+
+  #onZoom(): void {
+    this.#updateTransform(this.#getMap().getCenter(), this.#getMap().getZoom());
+  }
+
+  #onZoomEnd(): void {
+    this.#unpauseAnimation();
+  }
+
+  /**
+   * see https://stackoverflow.com/a/67107000/1823988
+   * see L.Renderer._updateTransform https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Renderer.js#L90-L105
+   */
+  #updateTransform(center: L.LatLng, zoom: number): void {
+    if (!this._container) {
+      return;
+    }
+
+    const scale = this.#getMap().getZoomScale(zoom, this.#getMap().getZoom());
+    const position = L.DomUtil.getPosition(this._container);
+    const viewHalf = this.#getMap().getSize().multiplyBy(0.5);
+    const currentCenterPoint = this.#getMap().project(this.#getMap().getCenter(), zoom);
+    const destCenterPoint = this.#getMap().project(center, zoom);
+    const centerOffset = destCenterPoint.subtract(currentCenterPoint);
+    const topLeftOffset = viewHalf
+      .multiplyBy(-scale)
+      .add(position)
+      .add(viewHalf)
+      .subtract(centerOffset);
+
+    if (L.Browser.any3d) {
+      L.DomUtil.setTransform(this._container, topLeftOffset, scale);
+    } else {
+      L.DomUtil.setPosition(this._container, topLeftOffset);
+    }
+  }
+}

package/src/deck-utils.ts

@@ -0,0 +1,46 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import * as L from 'leaflet';
+import {Deck} from '@deck.gl/core';
+import type {DeckProps, View, ViewStateMap, MapView} from '@deck.gl/core';
+
+export type ViewOrViews = View | View[] | null;
+
+function getViewState(map: L.Map): ViewStateMap<MapView> {
+  return {
+    longitude: map.getCenter().lng,
+    latitude: map.getCenter().lat,
+    zoom: map.getZoom() - 1,
+    pitch: 0,
+    bearing: 0
+  };
+}
+
+export function createDeckInstance(
+  map: L.Map,
+  container: HTMLDivElement,
+  deck: Deck<ViewOrViews> | undefined,
+  props: DeckProps<ViewOrViews>
+): Deck<ViewOrViews> {
+  if (!deck) {
+    const viewState = getViewState(map);
+    deck = new Deck({
+      ...props,
+      parent: container,
+      controller: false,
+      style: {zIndex: 'auto'},
+      viewState
+    });
+  }
+  return deck;
+}
+
+export function updateDeckView(deck: Deck<ViewOrViews>, map: L.Map): void {
+  const viewState = getViewState(map);
+  // console.log(viewState);
+
+  deck.setProps({viewState});
+  deck.redraw();
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export * from './deck-layer';