leaflet-rotate 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.5.2",
+	"version": "0.5.3",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",

package/src/index.js

@@ -53,6 +53,7 @@ export * from './layer/vector/Renderer';
 export * from './map/Map';
 export * from './map/handler/CompassBearing';
 export * from './map/handler/ContainerMutation';
+export * from './map/handler/Drag';
 export * from './map/handler/TouchGestures';
 export * from './map/handler/TouchRotate';
 export * from './map/handler/TouchPitch';

package/src/layer/marker/Marker.js

@@ -201,17 +201,7 @@ L.Marker.include({
         }
 
         /** @TODO use markerProto._setPos */
-        let bearing = this.options.rotation || 0;
-        if (this.options.rotateWithView) {
-            bearing += this._map._bearing;
-        }
-        if (this.options.keepUpright) {
-            bearing = ((bearing % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
-            if (bearing > Math.PI / 2 && bearing < 3 * Math.PI / 2) {
-                bearing += Math.PI;
-            }
-            bearing %= 2 * Math.PI;
-        }
+        const bearing = this._getIconBearing();
 
         /** @TODO use markerProto._setPos */
         if (this._icon) {
@@ -228,6 +218,29 @@ L.Marker.include({
         this._resetZIndex();
     },
 
+    /**
+     * Compute the on-screen icon rotation from `rotation`, `rotateWithView` and `keepUpright`.
+     *
+     * @returns {number} Angle in radians.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    _getIconBearing() {
+        let bearing = this.options.rotation || 0;
+        if (this.options.rotateWithView) {
+            bearing += this._map._bearing;
+        }
+        if (this.options.keepUpright) {
+            bearing = ((bearing % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
+            if (bearing > Math.PI / 2 && bearing < 3 * Math.PI / 2) {
+                bearing += Math.PI;
+            }
+            bearing %= 2 * Math.PI;
+        }
+
+        return bearing;
+    },
+
     // _updateZIndex(offset) {
     //     if (!this._map._rotate) {
     //         return markerProto._updateZIndex.apply(this, arguments);

package/src/layer/tile/GridLayer.js

@@ -32,9 +32,24 @@ L.GridLayer.include({
         return events;
     },
 
+    /**
+     * Preserve the 3D context on tile containers without making individual tile levels 3D.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    _initContainer() {
+        gridLayerProto._initContainer.apply(this, arguments);
+        if (!this._map._rotate || !this._container) { return; }
+        // Tile levels stay flat: preserving 3D on them also clips images in Firefox.
+        for (let pane = this._container; pane && pane !== this._map._rotatePane; pane = pane.parentElement) {
+            pane.style.transformStyle = 'preserve-3d';
+        }
+    },
+
     /**
      * Keep tile levels aligned when a bearing/pitch change shifts the pixel origin
      * (eg. when the rotation pivot is not the view center), then refresh tiles (throttled).
+     * The first event also synchronizes levels created before any accumulated pans.
      * 
      * @listens L.Map~rotate
      * 
@@ -44,7 +59,7 @@ L.GridLayer.include({
         const map = this._map;
         if (!map) { return; }
         const origin = map.getPixelOrigin();
-        if (this._rotateOrigin && !this._rotateOrigin.equals(origin) && !map._animatingZoom && this._levels) {
+        if ((!this._rotateOrigin || !this._rotateOrigin.equals(origin)) && !map._animatingZoom && this._levels) {
             this._setZoomTransforms(map.getCenter(), map.getZoom());
         }
         this._rotateOrigin = origin;

package/src/map/Map.js

@@ -71,6 +71,20 @@ L.Map.mergeOptions({
 
 L.Map.include({
 
+    /**
+     * Rebuild perspective before Leaflet calculates the origin of a reset view.
+     * A reset clears the outer pane translation, unlike a completed pan.
+     */
+    _resetView() {
+        if (this._pitch) {
+            delete this._pitchPan;
+            L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
+            this._updatePitchTransform();
+            arguments[0] = this._limitCenter(arguments[0], arguments[1], this.options.maxBounds);
+        }
+        return mapProto._resetView.apply(this, arguments);
+    },
+
     /**
      * Apply an immediate animated-zoom frame without waiting for a transition delay.
      *
@@ -110,6 +124,7 @@ L.Map.include({
             this.on('move', this._updatePitchPan, this);
             this.on('moveend', this._endPitchPan, this);
             this.on('move', this._updatePitchSky, this);
+            this.on('rotate', this._panInsideMaxBounds, this);
             this.setBearing(this.options.bearing);
             this.setPitch(this.options.pitch);
         }
@@ -528,22 +543,34 @@ L.Map.include({
      * @param {L.Point|number[]} point Input pixel coordinate.
      * @param {DOMMatrix|Object} matrix Forward CSS matrix or inverse homography with
      *                                row-major coefficients `a` through `i`.
+     * @param {L.Point} [anchor] Keep inverse pan coordinates on this anchor's side of the horizon.
      * 
      * @returns {L.Point} Transformed pixel coordinate.
      * 
      * @since leaflet-rotate (0.5.0)
      */
-    _transformPitchPoint(point, matrix) {
+    _transformPitchPoint(point, matrix, anchor) {
         point = toPoint(point);
         if (!(matrix instanceof DOMMatrix)) {
+            if (anchor) {
+                const anchorW = matrix.g * anchor.x + matrix.h * anchor.y + matrix.i,
+                    pointW = matrix.g * point.x + matrix.h * point.y + matrix.i;
+                // Keep a constrained pan on the near side of the horizon.
+                if (pointW * anchorW <= 0) {
+                    point = anchor.add(point.subtract(anchor).multiplyBy(anchorW / (anchorW - pointW) * (1 - 1e-6)));
+                }
+            }
             const denominator = matrix.g * point.x + matrix.h * point.y + matrix.i;
             return new L.Point(
                 (matrix.a * point.x + matrix.b * point.y + matrix.c) / denominator,
                 (matrix.d * point.x + matrix.e * point.y + matrix.f) / denominator
             );
         }
-        const transformed = new DOMPoint(point.x, point.y).matrixTransform(matrix);
-        return new L.Point(transformed.x / transformed.w, transformed.y / transformed.w);
+        const denominator = matrix.m14 * point.x + matrix.m24 * point.y + matrix.m44;
+        return new L.Point(
+            (matrix.m11 * point.x + matrix.m21 * point.y + matrix.m41) / denominator,
+            (matrix.m12 * point.x + matrix.m22 * point.y + matrix.m42) / denominator
+        );
     },
 
     /**
@@ -576,7 +603,6 @@ L.Map.include({
      */
     _setPitchTransform(transform) {
         this._rotatePane.style.transformOrigin = '0 0';
-        this._rotatePane.style.transform = transform;
         // parse the transform directly: getComputedStyle() would force a style recalculation on every frame
         const matrix = this._pitchTransform = new DOMMatrix(transform),
             a = matrix.m11, b = matrix.m21, c = matrix.m41,
@@ -584,6 +610,11 @@ L.Map.include({
             g = matrix.m14, h = matrix.m24, i = matrix.m44,
             determinant = a * (e * i - f * h) - b * (d * i - f * g) + c * (d * h - e * g);
 
+        // Preserve invertibility for Firefox and scale homogeneous coefficients to avoid CSS rounding.
+        const ground = DOMMatrix.fromMatrix(matrix);
+        ground.m13 = ground.m23 = ground.m43 = 0;
+        this._rotatePane.style.transform = `matrix3d(${Array.from(ground.toFloat64Array(), value => value * 1000).join(',')})`;
+
         this._pitchInverseTransform = {
             a: (e * i - f * h) / determinant,
             b: (c * h - b * i) / determinant,
@@ -670,7 +701,7 @@ L.Map.include({
 
     /**
      * Fill the area above the far plane (where no tiles are loaded) with a sky gradient.
-     * Style it through the `.leaflet-pitch-sky` class.
+     * Style it through `.leaflet-pitch-sky` or the `--leaflet-sky-background` CSS property.
      * 
      * @since leaflet-rotate (0.5.1)
      */
@@ -684,7 +715,7 @@ L.Map.include({
             this._pitchSky = L.DomUtil.create('div', 'leaflet-pitch-sky', this._container);
             Object.assign(this._pitchSky.style, {
                 position: 'absolute', left: 0, top: 0, width: '100%', zIndex: 0, pointerEvents: 'none',
-                background: 'linear-gradient(#9ec5e8, #dfe9f0)',
+                background: 'var(--leaflet-sky-background, linear-gradient(#9ec5e8, #dfe9f0))',
             });
         }
         this._pitchSky.style.display = '';
@@ -856,6 +887,8 @@ L.Map.include({
 
         if (this._rotate) {
             this._rotatePane = this.createPane('rotatePane', this._mapPane);
+            // Keep the context stable at pitch zero too: Firefox clips tiles when it is removed.
+            this._mapPane.style.transformStyle = this._rotatePane.style.transformStyle = 'preserve-3d';
             this._norotatePane = this.createPane('norotatePane', this._mapPane);
             if (L.version.startsWith('2.')) {
                 this._rotatePane.style.transformOrigin = '0 0';
@@ -934,54 +967,111 @@ L.Map.include({
     },
 
     /**
-     * Pans the map to the closest view that would lie inside the given bounds
-     * (if it's not already), controlling the animation using the options specific,
-     * if any.
-     * 
-     * @TODO check if map bounds calculated by `L.Map::panInsideBounds()`
-     *       function should match the `rotatePane` or `norotatePane` bounds
+     * Constrain the visible ground footprint, including its asymmetric pitched far side.
+     * When it is larger than maxBounds, Leaflet's rebound centers the excess on each axis.
+     */
+    _limitCenter(center, zoom, bounds) {
+        if (!this._rotate || !bounds) {
+            return mapProto._limitCenter.apply(this, arguments);
+        }
+        const centerPoint = this.project(center, zoom),
+            layerCenter = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
+            footprint = this._getPaddedPixelBounds(0, false),
+            viewBounds = new L.Bounds(
+                centerPoint.add(footprint.min.subtract(layerCenter)),
+                centerPoint.add(footprint.max.subtract(layerCenter))
+            ),
+            offset = this._getBoundsOffset(viewBounds, bounds, zoom);
+        if (Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) { return center; }
+        return this.unproject(centerPoint.add(offset), zoom);
+    },
+
+    /**
+     * Reapply configured maximum bounds after a map transform.
      *
-     * @see https://github.com/fnicollet/Leaflet/issues/7
-     * 
-     * @param {L.LatLngBounds} bounds Geographic bounds to fit inside the viewport.
-     * @param {Object} [options] Pan animation options.
-     * 
+     * @since leaflet-rotate (0.5.3)
+     */
+    _panInsideMaxBounds() {
+        if (this.options.maxBounds) {
+            return mapProto._panInsideMaxBounds.apply(this, arguments);
+        }
+    },
+
+    /**
+     * Keep the visible ground footprint inside the given bounds.
+     *
+     * @param {L.LatLngBounds|Array} bounds Geographic bounds.
+     * @param {Object} [options] Pan options passed to Leaflet.
      * @returns {L.Map} This map instance.
-     * 
-     * @since leaflet-rotate (v0.1.0)
+     *
+     * @since leaflet-rotate (0.5.3)
      */
-    // panInsideBounds(bounds, options) {
-    //     this._enforcingBounds = true;
-    //     const center = this.getCenter(),
-    //         newCenter = this._limitCenter(center, this._zoom, L.latLngBounds(bounds));
-    //
-    //     if (!center.equals(newCenter)) {
-    //         this.panTo(newCenter, options);
-    //     }
-    //
-    //     this._enforcingBounds = false;
-    //     return this;
-    // },
+    panInsideBounds(bounds, options) {
+        if (this._rotate) {
+            bounds = bounds instanceof L.LatLngBounds ? bounds : new L.LatLngBounds(bounds);
+            const center = this.getCenter(),
+                limited = this._limitCenter(center, this._zoom, bounds);
+            const offset = this._getCenterOffset(limited);
+            // Screen-space rounding cannot reliably apply subpixel pans at high pitch.
+            if (!center.equals(limited) && Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) {
+                this._enforcingBounds = true;
+                this.setView(limited, this._zoom, { reset: true });
+                this._enforcingBounds = false;
+                return this;
+            }
+        }
+        return mapProto.panInsideBounds.apply(this, arguments);
+    },
 
-    // adjust center for view to get inside bounds
-    // _limitCenter(center, zoom, bounds) {
-    //
-    //     if (!bounds) { return center; }
-    //
-    //     const centerPoint = this.project(center, zoom),
-    //         viewHalf = this.getSize().divideBy(2),
-    //         viewBounds = new Bounds(centerPoint.subtract(viewHalf), centerPoint.add(viewHalf)),
-    //         offset = this._getBoundsOffset(viewBounds, bounds, zoom);
-    //
-    //     // If offset is less than a pixel, ignore.
-    //     // This prevents unstable projections from getting into
-    //     // an infinite loop of tiny offsets.
-    //     if (Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) {
-    //             return center;
-    //     }
-    //
-    //     return this.unproject(centerPoint.add(offset), zoom);
-    // },
+    /**
+     * Leaflet supplies inertia offsets in screen pixels, not projected CRS pixels.
+     * Keep the drag's moving anchor when inertia continues a pitched pan.
+     */
+    _limitOffset(offset, bounds) {
+        if (!this._rotate || !bounds) {
+            return mapProto._limitOffset.apply(this, arguments);
+        }
+        const pan = this._pitchPan,
+            anchor = pan ? pan.anchor.add(this._getMapPanePos().subtract(pan.panePos)) : this.getSize().divideBy(2),
+            layerAnchor = this.containerPointToLayerPoint(anchor),
+            panePos = this._getMapPanePos(),
+            target = anchor.subtract(offset).subtract(panePos),
+            shift = (this._pitch
+                ? this._transformPitchPoint(target, this._pitchInverseTransform, anchor.subtract(panePos))
+                : this.containerPointToLayerPoint(anchor.subtract(offset))).subtract(layerAnchor),
+            footprint = this._getPaddedPixelBounds(0, false),
+            origin = this.getPixelOrigin().subtract(shift),
+            correction = this._getBoundsOffset(new L.Bounds(
+                footprint.min.add(origin), footprint.max.add(origin)
+            ), bounds);
+        return anchor.subtract(this.layerPointToContainerPoint(layerAnchor.add(shift).subtract(correction)));
+    },
+
+    /**
+     * Pan by a screen-pixel offset, constraining large immediate pans to maxBounds.
+     *
+     * @param {L.Point|number[]} offset Pan offset in pixels.
+     * @param {Object} [options] Pan options passed to Leaflet.
+     * @returns {L.Map} This map instance.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    panBy(offset, options) {
+        offset = toPoint(offset);
+        if (this._rotate && this._loaded && !this.getSize().contains(offset) && !(options && options.animate)) {
+            const anchor = this.getSize().divideBy(2),
+                panePos = this._getMapPanePos(),
+                layerAnchor = this.containerPointToLayerPoint(anchor),
+                target = anchor.subtract(offset).subtract(panePos),
+                shift = (this._pitch
+                    ? this._transformPitchPoint(target, this._pitchInverseTransform, anchor.subtract(panePos))
+                    : this.containerPointToLayerPoint(anchor.subtract(offset))).subtract(layerAnchor),
+                center = this.unproject(this.project(this.getCenter()).subtract(shift));
+            this._resetView(this._limitCenter(center, this._zoom, this.options.maxBounds), this._zoom);
+            return this;
+        }
+        return mapProto.panBy.call(this, offset, options);
+    },
 
     // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this
     // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto),
@@ -1188,23 +1278,25 @@ L.Map.include({
      * @see src\layer\vector\Renderer::_update()
      * 
      * @param {number} padding Bounds padding as a fraction of map size.
+     * @param {boolean} [round=true] Round renderer bounds; navigation needs exact ground coordinates.
      * 
      * @returns {L.Bounds} Padded bounds in layer-point coordinates.
      * 
      * @since leaflet-rotate (v0.2.0)
      */
-    _getPaddedPixelBounds(padding) {
+    _getPaddedPixelBounds(padding, round = true) {
         if (!this._rotate && mapProto._getPaddedPixelBounds) {
             return mapProto._getPaddedPixelBounds.apply(this, arguments);
         }
         const [padMin, padMax] = this._getPitchedContainerBounds(padding);
 
         return new L.Bounds([
-            this.containerPointToLayerPoint([padMin.x, padMin.y]).floor(),
-            this.containerPointToLayerPoint([padMin.x, padMax.y]).floor(),
-            this.containerPointToLayerPoint([padMax.x, padMin.y]).floor(),
-            this.containerPointToLayerPoint([padMax.x, padMax.y]).floor()
-        ]);
+            [padMin.x, padMin.y], [padMin.x, padMax.y],
+            [padMax.x, padMin.y], [padMax.x, padMax.y]
+        ].map(point => {
+            const projected = this.containerPointToLayerPoint(point);
+            return round ? projected.floor() : projected;
+        }));
     },
 
     /**

package/src/map/handler/Drag.js

@@ -0,0 +1,59 @@
+/**
+ * Apply maxBoundsViscosity in projected ground coordinates before moving the map pane.
+ */
+const dragProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Map.Drag.prototype));
+
+L.Map.Drag.include({
+
+    /**
+     * Capture the ground footprint and pointer anchor before a constrained drag.
+     */
+    _onDragStart() {
+        dragProto._onDragStart.apply(this, arguments);
+        const map = this._map;
+        this._rotateLimit = null;
+        if (!map._rotate || !map.options.maxBounds || !map.options.maxBoundsViscosity) { return; }
+        const anchor = (map.pointerEventToContainerPoint || map.mouseEventToContainerPoint).call(map, {
+                clientX: this._draggable._startPoint.x, clientY: this._draggable._startPoint.y,
+            }),
+            footprint = map._getPaddedPixelBounds(0, false),
+            origin = map.getPixelOrigin();
+        this._rotateLimit = {
+            anchor,
+            layerAnchor: map.containerPointToLayerPoint(anchor),
+            panePos: map._getMapPanePos().clone(),
+            footprint: new L.Bounds(footprint.min.add(origin), footprint.max.add(origin)),
+            matrix: map._pitch ? map._pitchTransform : null,
+            inverse: map._pitchInverseTransform,
+            bearing: map._bearing,
+        };
+    },
+
+    /**
+     * Apply max-bounds viscosity in ground coordinates during a rotated drag.
+     */
+    _onPreDragLimit() {
+        const limit = this._rotateLimit;
+        if (!this._map._rotate || !limit) {
+            return dragProto._onPreDragLimit.apply(this, arguments);
+        }
+        const map = this._map,
+            draggable = this._draggable,
+            offset = draggable._newPos.subtract(draggable._startPos),
+            shift = limit.matrix
+                ? map._transformPitchPoint(limit.anchor.add(offset).subtract(limit.panePos), limit.inverse,
+                    limit.anchor.subtract(limit.panePos))
+                    .subtract(limit.layerAnchor)
+                : offset.rotate(-limit.bearing),
+            correction = map._getBoundsOffset(new L.Bounds(
+                limit.footprint.min.subtract(shift), limit.footprint.max.subtract(shift)
+            ), map.options.maxBounds);
+        shift._subtract(correction.multiplyBy(this._viscosity));
+        const limitedOffset = limit.matrix
+            ? map._transformPitchPoint(limit.layerAnchor.add(shift), limit.matrix)
+                .add(limit.panePos).subtract(limit.anchor)
+            : shift.rotate(limit.bearing);
+        draggable._newPos = draggable._startPos.add(limitedOffset);
+    },
+
+});

package/test/features/navigation-bounds.feature

@@ -0,0 +1,33 @@
+@navigation-bounds
+Feature: Navigation limits on rotated and pitched maps
+  Background:
+    Given a standalone map with navigation limits is open
+
+  @issue-75
+  Scenario Outline: Zoom and programmatic navigation respect the transformed viewport
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then minimum zoom 14 applies to view changes, wheel zoom and pinch zoom
+    And maximum bounds constrain programmatic pans and camera changes
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |
+
+  @issue-75
+  Scenario Outline: Viscosity limits the geographic footprint during dragging
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then viscosity 1 prevents crossing maximum bounds during a mouse drag
+    And viscosities 0 and 0.5 allow progressively less overshoot
+    And maximum bounds are restored after drag inertia
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |

package/test/features/overlays.feature

@@ -56,3 +56,12 @@ Feature: Rotating a Leaflet map
   Scenario: Opening a popup in a second rotated map does not move it
     When I open a popup in a second rotated map with map listeners
     Then the second map center remains unchanged and its popup stays anchored
+
+  Scenario Outline: Markers keep Leaflet DOM rendering when the map prefers Canvas
+    When I add markers to a Canvas-preferred map at pitch <pitch>
+    Then the markers use Leaflet DOM icons while vector paths use Canvas
+
+    Examples:
+      | pitch |
+      | 0     |
+      | 45    |

package/test/features/pitch.feature

@@ -0,0 +1,19 @@
+Feature: Pitched map rendering
+  Background:
+    Given a standalone pitched map is open
+
+  @issue-75
+  Scenario: Raster layers restore perspective after toggling and late attachment
+    Then raster perspective follows pitch on late and reattached layers
+
+  @issue-75
+  Scenario: Pitched raster surfaces and markers remain visible after camera changes and compass reset
+    Then pitched raster surfaces draw loaded tiles after rapid camera changes
+
+  @issue-75
+  Scenario: Raster tile levels follow the first camera change after accumulated pans
+    Then raster tiles remain aligned after panning before their first pitch change
+
+  @issue-75
+  Scenario: Resetting a pitched view after animated zoom restores the ground camera
+    Then pitched view resets preserve the ground perspective after accumulated pans

package/test/index.html

@@ -162,20 +162,84 @@
 				version: 8,
 				sources: {
 					esri: { type: 'raster', tiles: [tiles], tileSize: 256, maxzoom: 18 },
-					polygon: { type: 'geojson', data: { type: 'Polygon', coordinates: [[...polygonLatLngs, polygonLatLngs[0]].map(([lat, lng]) => [lng, lat])] } },
-					route: { type: 'geojson', data: { type: 'LineString', coordinates: route.map(([lat, lng]) => [lng, lat]) } },
+					overlays: { type: 'geojson', data: { type: 'FeatureCollection', features: [] } },
 				},
 				layers: [
 					{ id: 'esri', type: 'raster', source: 'esri' },
-					{ id: 'polygon', type: 'fill', source: 'polygon', paint: { 'fill-color': '#3388ff', 'fill-opacity': 0.2 } },
-					{ id: 'polygon-line', type: 'line', source: 'polygon', paint: { 'line-color': '#3388ff', 'line-width': 3 } },
-					{ id: 'route', type: 'line', source: 'route', paint: { 'line-color': 'yellow', 'line-width': 3 } },
+					{ id: 'overlay-fills', type: 'fill', source: 'overlays', filter: ['==', ['geometry-type'], 'Polygon'], paint: { 'fill-color': ['get', 'fillColor'], 'fill-opacity': ['get', 'fillOpacity'] } },
+					{ id: 'overlay-lines', type: 'line', source: 'overlays', filter: ['!=', ['geometry-type'], 'Point'], paint: { 'line-color': ['get', 'color'], 'line-opacity': ['get', 'opacity'], 'line-width': ['get', 'weight'] } },
+					{ id: 'overlay-points', type: 'circle', source: 'overlays', filter: ['==', ['geometry-type'], 'Point'], paint: { 'circle-radius': ['get', 'radius'], 'circle-color': ['get', 'fillColor'], 'circle-opacity': ['get', 'fillOpacity'], 'circle-stroke-color': ['get', 'color'], 'circle-stroke-opacity': ['get', 'opacity'], 'circle-stroke-width': ['get', 'weight'] } },
 				],
 			},
 		}) : null;
 		if (ml) {
 			ml.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
-			for (const name in places) new maplibregl.Marker().setLngLat([places[name][1], places[name][0]]).setPopup(new maplibregl.Popup().setText(name)).addTo(ml);
+			const mirrors = new Map();
+			let mirrorFrame;
+			const syncOverlays = () => {
+				mirrorFrame = null;
+				if (!ml.getSource('overlays')) return;
+				const active = new Set(), features = [];
+				lf.eachLayer(layer => {
+					if (layer instanceof L.Marker) {
+						active.add(layer);
+						let marker = mirrors.get(layer);
+						if (!marker) {
+							const element = document.createElement('div');
+							element.style.width = element.style.height = '0px';
+							const icon = layer.options.icon.createIcon();
+							icon.style.position = 'absolute';
+							icon.style.transform = `scale(${layer.options.scale ?? 1})`;
+							element.appendChild(icon);
+							marker = new maplibregl.Marker({ element, rotationAlignment: 'viewport', pitchAlignment: 'viewport', draggable: Boolean(layer.dragging?.enabled()) });
+							marker.on('drag', () => {
+								const ll = marker.getLngLat();
+								layer.setLatLng([ll.lat, ll.lng]);
+							});
+							layer.on('move', scheduleOverlays);
+							const tooltip = layer.getTooltip();
+							if (tooltip) marker.setPopup(new maplibregl.Popup().setHTML(tooltip.getContent()));
+							mirrors.set(layer, marker);
+							marker.setLngLat([layer.getLatLng().lng, layer.getLatLng().lat]).addTo(ml);
+						}
+						const ll = layer.getLatLng();
+						marker.setLngLat([ll.lng, ll.lat]);
+						marker.setRotation(layer._getIconBearing() * 180 / Math.PI);
+						marker.getElement().style.opacity = layer.options.opacity;
+					} else if (layer instanceof L.Path && !layer._marker) {
+						let feature = layer.toGeoJSON();
+						if (layer instanceof L.Circle) {
+							const center = layer.getLatLng(), angular = layer.getRadius() / 6371000,
+								lat = center.lat * Math.PI / 180, lng = center.lng * Math.PI / 180;
+							const ring = Array.from({ length: 65 }, (_, i) => {
+								const angle = i * 2 * Math.PI / 64;
+								const y = Math.asin(Math.sin(lat) * Math.cos(angular) + Math.cos(lat) * Math.sin(angular) * Math.cos(angle));
+								const x = lng + Math.atan2(Math.sin(angle) * Math.sin(angular) * Math.cos(lat), Math.cos(angular) - Math.sin(lat) * Math.sin(y));
+								return [x * 180 / Math.PI, y * 180 / Math.PI];
+							});
+							feature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] } };
+						}
+						const o = layer.options;
+						feature.properties = {
+							color: o.color, fillColor: o.fillColor || o.color,
+							opacity: o.stroke ? o.opacity : 0, fillOpacity: o.fill ? o.fillOpacity : 0,
+							weight: o.weight || 0, radius: layer instanceof L.CircleMarker ? layer.getRadius() : 0,
+						};
+						features.push(feature);
+					}
+				});
+				for (const [layer, marker] of mirrors) {
+					if (!active.has(layer)) {
+						layer.off('move', scheduleOverlays);
+						marker.remove();
+						mirrors.delete(layer);
+					}
+				}
+				ml.getSource('overlays').setData({ type: 'FeatureCollection', features });
+			};
+			const scheduleOverlays = () => { mirrorFrame ??= requestAnimationFrame(syncOverlays); };
+			lf.on('layeradd layerremove move zoom rotate pitch', scheduleOverlays);
+			ml.on('load', syncOverlays);
 		}
 
 		/**