leaflet-rotate 0.3.0 → 0.5.0

package/src/layer/Tooltip.js

@@ -1,28 +1,44 @@
 /**
+ * Keeps tooltips positioned correctly when the map is rotated or pitched.
+ *
  * @external L.Tooltip
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Tooltip.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const tooltipProto = L.extend({}, L.Tooltip.prototype);
+const tooltipProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Tooltip.prototype));
 
 L.Tooltip.include({
 
-    _animateZoom: function(e) {
+    /**
+     * Reposition the tooltip during zoom animation using transformed map coordinates.
+     *
+     * @param {Object} e Zoom animation event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _animateZoom(e) {
         if (!this._map._rotate) {
             return tooltipProto._animateZoom.apply(this, arguments);
         }
-        var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
+        let pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
 
         pos = this._map.rotatedPointToMapPanePoint(pos);
         this._setPosition(pos);
     },
 
-    _updatePosition: function() {
+    /**
+     * Recompute tooltip screen position after map movement.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _updatePosition() {
         if (!this._map._rotate) {
             return tooltipProto._updatePosition.apply(this, arguments);
         }
-        var pos = this._map.latLngToLayerPoint(this._latlng);
+        let pos = this._map.latLngToLayerPoint(this._latlng);
 
         pos = this._map.rotatedPointToMapPanePoint(pos);
         this._setPosition(pos);

package/src/layer/marker/Icon.js

@@ -1,24 +1,36 @@
 /**
+ * Applies icon-anchor transform origins so marker rotation pivots around its anchor.
+ *
  * @external L.Icon
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Icon.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const iconProto = L.extend({}, L.Icon.prototype);
+const iconProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Icon.prototype));
 
 L.Icon.include({
 
-    _setIconStyles: function(img, name) {
-        var options = this.options;
-        var sizeOption = options[name + 'Size'];
+    /**
+     * Set marker icon dimensions and anchor styles, including the rotation origin.
+     * 
+     * @param {HTMLImageElement} img Icon or shadow element.
+     * @param {string} name Icon style key (`icon` or `shadow`).
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _setIconStyles(img, name) {
+        const options = this.options;
+        let sizeOption = options[name + 'Size'];
 
         if (typeof sizeOption === 'number') {
             sizeOption = [sizeOption, sizeOption];
         }
 
-        var size = L.point(sizeOption),
-            anchor = L.point(name === 'shadow' && options.shadowAnchor || options.iconAnchor ||
-                size && size.divideBy(2, true));
+        const size = sizeOption ? new L.Point(...(Array.isArray(sizeOption) ? sizeOption : [sizeOption.x, sizeOption.y])) : null,
+            anchorOption = name === 'shadow' && options.shadowAnchor || options.iconAnchor || size && size.divideBy(2, true),
+            anchor = anchorOption ? new L.Point(...(Array.isArray(anchorOption) ? anchorOption : [anchorOption.x, anchorOption.y])) : null;
 
         img.className = 'leaflet-marker-' + name + ' ' + (options.className || '');
 
@@ -26,7 +38,7 @@ L.Icon.include({
             img.style.marginLeft = (-anchor.x) + 'px';
             img.style.marginTop = (-anchor.y) + 'px';
             /** @TODO use iconProto._setIconStyles */
-            img.style[L.DomUtil.TRANSFORM + "Origin"] = anchor.x + "px " + anchor.y + "px 0px";
+            img.style.transformOrigin = anchor.x + "px " + anchor.y + "px 0px";
         }
 
         if (size) {

package/src/layer/marker/Marker.js

@@ -1,63 +1,90 @@
 /**
+ * Adds rotation and pitch-aware positioning to Leaflet markers.
+ *
  * @external L.Marker
  * @external L.Handler.MarkerDrag
  * 
+ * @property {number} [rotation=0] Marker icon rotation in radians.
+ * @property {boolean} [rotateWithView=false] Rotate the icon with the map bearing.
+ * @property {boolean} [keepUpright=false] Flip a map-aligned icon to keep it upright.
+ * @property {number} [scale] Optional scale applied to the icon and shadow.
+ * 
+ * @since leaflet-rotate (v0.1.0)
+ * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Marker.js
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Marker.Drag.js
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
  */
 
-const markerProto = L.extend({}, L.Marker.prototype);
+const markerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Marker.prototype));
 
 L.Marker.mergeOptions({
 
     /**
-     * Rotation of this marker in rad
+     * Rotation of the marker icon in radians.
      * 
      * @type {Number}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     rotation: 0,
 
     /**
-     * Rotate this marker when map rotates
+     * Rotate the marker icon when the map bearing changes.
+     *
+     * Combine with `keepUpright: true` to keep the marker readable while
+     * preserving its line alignment.
      * 
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     rotateWithView: false,
 
     /**
-     * Flip a rotated marker when needed to keep it upright
+     * Flip the icon when needed to keep it upright while map-aligned.
      *
      * @type {Boolean}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     keepUpright: false,
 
     /**
-     * Scale of the marker icon
+     * Optional scale of the marker icon and shadow.
      * 
      * @type {Number}
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
     scale: undefined,
 
 });
 
-var markerDragProto; // retrived at runtime (see below: L.Marker::_initInteraction())
+let markerDragProto; // retrived at runtime (see below: L.Marker::_initInteraction())
 
-var MarkerDrag = {
+const MarkerDrag = {
 
-    // _onDragStart: function() {
+    // _onDragStart() {
     //     if (!this._marker._map._rotate) {
     //         return markerDragProto._onDragStart.apply(this, arguments);
     //     }
     //     this._draggable.updateMapBearing(this._marker._map._bearing);
     // },
 
-    _onDrag: function(e) {
-        var marker = this._marker,
+    /**
+     * Update a dragged marker's geographic position from its transformed icon position.
+     * 
+     * @param {Object} e Marker drag event with `latlng` and `oldLatLng` fields.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _onDrag(e) {
+        const marker = this._marker,
             /** @TODO use markerDragProto._onDrag */
             rotated_marker = marker.options.rotation || marker.options.rotateWithView,
-            shadow = marker._shadow,
-            iconPos = L.DomUtil.getPosition(marker._icon);
+            shadow = marker._shadow;
+        let iconPos = L.DomUtil.getPosition(marker._icon);
 
         /** @TODO use markerDragProto._onDrag */
         // update shadow position
@@ -70,7 +97,7 @@ var MarkerDrag = {
             // Reverse calculation from mapPane coordinates to rotatePane coordinates
             iconPos = marker._map.mapPanePointToRotatedPoint(iconPos);
         }
-        var latlng = marker._map.layerPointToLatLng(iconPos);
+        const latlng = marker._map.layerPointToLatLng(iconPos);
 
         marker._latlng = latlng;
         e.latlng = latlng;
@@ -86,7 +113,14 @@ var MarkerDrag = {
             .fire('drag', e);
     },
 
-    _onDragEnd: function(e) {
+    /**
+     * Reposition the marker after a drag ends, then run Leaflet's drag-end logic.
+     * 
+     * @param {Object} e Marker drag-end event.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _onDragEnd(e) {
         if (this._marker._map._rotate) {
             this._marker.update();
         }
@@ -98,17 +132,46 @@ var MarkerDrag = {
 L.Marker.include({
 
     /**
-     * Update L.Marker anchor position after the map
-     * is moved by calling `map.setBearing(theta)`
+     * Extend marker event subscriptions to reposition its icon after bearing or pitch changes.
      * 
      * @listens L.Map~rotate
+     * @listens L.Map~pitch
+     * 
+     * @returns {Object} Leaflet event map for the marker.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    getEvents() {
+        const events = Object.assign(markerProto.getEvents.apply(this, arguments), {
+            rotate: this.update,
+            pitch: this._updatePitchEvents,
+        });
+        if (this._map && this._map._pitch) {
+            events.move = this.update;
+        }
+        return events;
+    },
+
+    /**
+     * Subscribe to map movement while pitch is active to keep the icon aligned.
+     * 
+     * @since leaflet-rotate (0.5.0)
      */
-    getEvents: function() {
-        return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
+    _updatePitchEvents() {
+        if (this._map._pitch) {
+            this._map.on('move', this.update, this);
+        } else {
+            this._map.off('move', this.update, this);
+        }
     },
 
-    _initInteraction: function() {
-        var ret = markerProto._initInteraction.apply(this, arguments);
+    /**
+     * Install rotation-aware drag callbacks when marker dragging is enabled.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _initInteraction() {
+        const ret = markerProto._initInteraction.apply(this, arguments);
         if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
             // L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable
             markerDragProto = markerDragProto || Object.getPrototypeOf(this.dragging);
@@ -123,7 +186,14 @@ L.Marker.include({
         return ret;
     },
 
-    _setPos: function(pos) {
+    /**
+     * Position and rotate the marker icon and shadow in map-pane coordinates.
+     * 
+     * @param {L.Point} pos Marker anchor in layer-point coordinates.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _setPos(pos) {
 
         /** @TODO use markerProto._setPos */
         if (this._map._rotate) {
@@ -131,7 +201,7 @@ L.Marker.include({
         }
 
         /** @TODO use markerProto._setPos */
-        var bearing = this.options.rotation || 0;
+        let bearing = this.options.rotation || 0;
         if (this.options.rotateWithView) {
             bearing += this._map._bearing;
         }
@@ -158,14 +228,23 @@ L.Marker.include({
         this._resetZIndex();
     },
 
-    // _updateZIndex: function(offset) {
+    // _updateZIndex(offset) {
     //     if (!this._map._rotate) {
     //         return markerProto._updateZIndex.apply(this, arguments);
     //     }
     //     this._icon.style.zIndex = Math.round(this._zIndex + offset);
     // },
 
-    setRotation: function(rotation) {
+    /**
+     * Set the marker icon's rotation and redraw it.
+     * 
+     * @param {number} rotation Angle in radians.
+     * 
+     * @returns {void}
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    setRotation(rotation) {
         this.options.rotation = rotation;
         this.update();
     },

package/src/layer/tile/GridLayer.js

@@ -1,21 +1,28 @@
 /**
+ * Updates tile coverage for rotated map bounds.
+ *
  * @external L.GridLayer
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/tile/GridLayer.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const gridLayerProto = L.extend({}, L.GridLayer.prototype);
+const gridLayerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.GridLayer.prototype));
 
 L.GridLayer.include({
 
     /**
-     * Redraw L.TileLayer bounds after the map is
-     * moved by just calling `map.setBearing(theta)`
+     * Add a throttled tile refresh after map bearing changes.
      * 
      * @listens L.Map~rotate
+     * 
+     * @returns {Object} Leaflet event map for the grid layer.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    getEvents: function() {
-        var events = gridLayerProto.getEvents.apply(this, arguments);
+    getEvents() {
+        const events = gridLayerProto.getEvents.apply(this, arguments);
         if (this._map._rotate && !this.options.updateWhenIdle) {
             if (!this._onRotate) {
                 this._onRotate = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
@@ -25,7 +32,16 @@ L.GridLayer.include({
         return events;
     },
 
-    _getTiledPixelBounds: function(center) {
+    /**
+     * Return tile pixel bounds that cover the rotated viewport.
+     * 
+     * @param {L.LatLng} center View center used to calculate bounds.
+     * 
+     * @returns {L.Bounds} Pixel bounds covered by the layer's tiles.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _getTiledPixelBounds(center) {
         if (!this._map._rotate) {
             return gridLayerProto._getTiledPixelBounds.apply(this, arguments);
         }

package/src/layer/vector/Renderer.js

@@ -1,29 +1,59 @@
 /**
+ * Recalculates vector renderer bounds and transforms for rotated and pitched maps.
+ *
  * @external L.Renderer
  * 
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/Renderer.js
+ * 
+ * @since leaflet-rotate (v0.1.0)
  */
 
-const rendererProto = L.extend({}, L.Renderer.prototype);
+const rendererProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Renderer.prototype));
+const rendererBase = Object.getPrototypeOf(L.Renderer.prototype);
+const rendererGetEvents = rendererProto.getEvents || rendererBase.getEvents;
+const rendererOnMoveEnd = rendererProto._onMoveEnd || rendererBase._onMoveEnd;
 
 L.Renderer.include({
 
     /**
-     * Redraw L.Canvas and L.SVG renderer bounds after the
-     * map is moved by just calling `map.setBearing(theta)`
+     * Subscribe the renderer to map rotation so its visible bounds are recalculated.
      * 
      * @listens L.Map~rotate
+     * 
+     * @returns {Object} Leaflet event map for the renderer.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    getEvents: function() {
-        return L.extend(rendererProto.getEvents.apply(this, arguments), { rotate: this._update });
+    getEvents() {
+        const events = rendererGetEvents.apply(this, arguments);
+        return Object.assign(events, { rotate: this._onRotate });
+    },
+
+    /**
+     * Reproject vector paths and refresh renderer bounds after bearing changes.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _onRotate() {
+        if (!this._map._rotate) { return; }
+        this._onZoomEnd();
+        if (L.version.startsWith('2.')) {
+            this._onMoveEnd();
+        } else {
+            this._update();
+        }
     },
 
     /**
-     * Fix for `map.flyTo()` when `false === map.options.zoomAnimation`
+     * Add the zoom-animation class needed for correct renderer transforms in Leaflet 1.
+     *
+     * Fixes `map.flyTo()` when `map.options.zoomAnimation` is false.
      * 
      * @see https://github.com/Leaflet/Leaflet/pull/8794
+     * 
+     * @since leaflet-rotate (v0.2.0)
      */
-    onAdd: function() {
+    onAdd() {
         rendererProto.onAdd.apply(this, arguments);
         if (L.version <= "1.9.3") {
             // always keep transform-origin as 0 0
@@ -32,6 +62,8 @@ L.Renderer.include({
     },
 
     /**
+     * Update the renderer transform during zoom animation, accounting for rotated coordinates.
+     *
      * @FIXME layer drifts on `map.setZoom()` (eg. zoom during animation)
      * 
      * the main cause seems to be related to `this._updateTransform(path._center, path._zoom))`
@@ -46,11 +78,27 @@ L.Renderer.include({
      * @see https://github.com/Leaflet/Leaflet/pull/8103
      * @see https://github.com/Leaflet/Leaflet/issues/7466
      * 
-     * @TODO rechek this changes from leaflet@v1.9.3
+     * @TODO recheck these changes against leaflet@v1.9.3
      * 
      * @see https://github.com/Leaflet/Leaflet/compare/v1.7.0...v1.9.3
+     * 
+     * @param {L.LatLng} center Target map center.
+     * @param {number} zoom Target zoom level.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _updateTransform: function(center, zoom) {
+    _updateTransform(center, zoom) {
+        if (L.version.startsWith('2.')) {
+            if (this._map._rotate) {
+                const scale = this._map.getZoomScale(zoom, this._zoom),
+                    offset = this._topLeftPoint.multiplyBy(scale)
+                        .subtract(this._map._getNewPixelOrigin(center, zoom));
+
+                L.DomUtil.setTransform(this._container, offset, scale);
+                return;
+            }
+            return rendererBase._updateTransform.apply(this, arguments);
+        }
         if (!this._map._rotate) {
             return rendererProto._updateTransform.apply(this, arguments);
         }
@@ -61,13 +109,51 @@ L.Renderer.include({
         /**
          * @FIXME see path._renderer._reset();
          */
-        var scale = this._map.getZoomScale(zoom, this._zoom),
+        const scale = this._map.getZoomScale(zoom, this._zoom),
             offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
 
         L.DomUtil.setTransform(this._container, offset, scale);
         
     },
 
+    /**
+     * Recalculate bounds and finish renderer updates after movement on Leaflet 2.
+     *
+     * @param {Object} ev Map movement event.
+     * 
+     * @since leaflet-rotate (v0.4.0)
+     */
+    _onMoveEnd(ev) {
+        if (!L.version.startsWith('2.') || !this._map._rotate) {
+            return rendererOnMoveEnd.apply(this, arguments);
+        }
+
+        this._bounds = this._map._getPaddedPixelBounds(this.options.padding);
+        this._topLeft = this._map.layerPointToLatLng(this._bounds.min);
+        this._center = this._map.getCenter();
+        this._zoom = this._map.getZoom();
+        this._topLeftPoint = this._map._getNewPixelOrigin(this._center, this._zoom).add(this._bounds.min);
+        this._updateTransform(this._center, this._zoom);
+        this._resizeContainer();
+        this._onSettled(ev);
+    },
+
+    /**
+     * Resize the renderer container to cover the pitch-aware map bounds.
+     * 
+     * @since leaflet-rotate (v0.4.0)
+     */
+    _resizeContainer() {
+        if (!L.version.startsWith('2.') || !this._map._rotate || !this._bounds) {
+            return rendererBase._resizeContainer.apply(this, arguments);
+        }
+
+        const size = this._bounds.getSize();
+        this._container.style.width = size.x + 'px';
+        this._container.style.height = size.y + 'px';
+        return size;
+    },
+
     // getEvents() {
     //     const events = {
     //         viewreset: this._reset,
@@ -110,7 +196,12 @@ L.Renderer.include({
     //     }
     // },
 
-    _update: function() {
+    /**
+     * Recalculate renderer bounds and cached view state.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _update() {
         if (!this._map._rotate) {
             return rendererProto._update.apply(this, arguments);
         }