leaflet-rotate 0.2.8 → 0.4.0

package/package.json

@@ -1,17 +1,15 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.2.8",
+	"version": "0.4.0",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",
 	"browser": "dist/leaflet-rotate.js",
 	"module": "src/index.js",
 	"scripts": {
-		"test": "uvu . \"(examples|src)[\\\\/].*\\.spec\\.js$\"",
-		"build": "rollup -c build/rollup.config.js",
-		"watch": "rollup -c build/rollup.config.js --watch",
-		"dev": "npm-run-all --print-label --parallel serve watch",
-		"serve": "http-server",
+		"dev": "node build/dev.js",
+		"build": "node build/build.js",
+		"test": "node build/test.js",
 		"version": "npm run build && git add -A dist"
 	},
 	"repository": {
@@ -48,17 +46,12 @@
 		"url": "https://github.com/Raruto/leaflet-rotate/issues"
 	},
 	"homepage": "https://github.com/Raruto/leaflet-rotate#readme",
-	"devDependencies": {
-		"rollup": "^3.20.6",
-		"@rollup/plugin-commonjs": "^24.1.0",
-		"@rollup/plugin-node-resolve": "^15.0.2",
-		"@rollup/plugin-terser": "^0.4.1",
-		"http-server": "^14.1.1",
-		"npm-run-all": "^4.1.5",
-		"playwright": "^1.32.3",
-		"uvu": "^0.5.6"
-	},
 	"peerDependencies": {
-		"leaflet": "^1.9.3"
+		"leaflet": "^1.9.3 || ^2.0.0-alpha.1"
+	},
+	"devDependencies": {
+		"@cucumber/cucumber": "^10.3.1",
+		"esbuild": "^0.28.2",
+		"playwright": "^1.64.1"
 	}
 }

package/src/control/Rotate.js

@@ -15,12 +15,12 @@ L.Control.Rotate = L.Control.extend({
         closeOnZeroBearing: true
     },
 
-    onAdd: function(map) {
-        var container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
+    onAdd(map) {
+        const container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
 
         // this.button = L.Control.Zoom.prototype._createButton.call(this, 'R', 'leaflet-control-rotate', 'leaflet-control-rotate', container, this._toggleLock);
 
-        var arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
+        const arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
 
         arrow.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")`;
         arrow.style.cursor = 'grab';
@@ -31,7 +31,7 @@ L.Control.Rotate = L.Control.extend({
         arrow.style.backgroundPosition = '50%';
 
         // Copy-pasted from L.Control.Zoom
-        var link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
+        const link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
         link.appendChild(arrow);
         link.href = '#';
         link.title = 'Rotate map';
@@ -43,10 +43,6 @@ L.Control.Rotate = L.Control.extend({
             .on(link, 'click', this._cycleState, this)
             .on(link, 'click', this._refocusOnMap, this);
 
-        if (!L.Browser.any3d) {
-            L.DomUtil.addClass(link, 'leaflet-disabled');
-        }
-
         this._restyle();
 
         map.on('rotate', this._restyle, this);
@@ -62,11 +58,11 @@ L.Control.Rotate = L.Control.extend({
         return container;
     },
     
-    onRemove: function(map) {
+    onRemove(map) {
         map.off('rotate', this._restyle, this);
     },
 
-    _handleMouseDown: function(e) {
+    _handleMouseDown(e) {
         L.DomEvent.stop(e);
         this.dragging = true;
         this.dragstartX = e.pageX;
@@ -76,7 +72,7 @@ L.Control.Rotate = L.Control.extend({
             .on(document, 'mouseup', this._handleMouseUp, this);
     },
 
-    _handleMouseUp: function(e) {
+    _handleMouseUp(e) {
         L.DomEvent.stop(e);
         this.dragging = false;
 
@@ -85,18 +81,18 @@ L.Control.Rotate = L.Control.extend({
             .off(document, 'mouseup', this._handleMouseUp, this);
     },
 
-    _handleMouseDrag: function(e) {
+    _handleMouseDrag(e) {
         if (!this.dragging) { return; }
-        var deltaX = e.clientX - this.dragstartX;
+        const deltaX = e.clientX - this.dragstartX;
         this._map.setBearing(deltaX);
     },
 
-    _cycleState: function(ev) {
+    _cycleState(ev) {
         if (!this._map) {
             return;
         }
 
-        var map = this._map;
+        const map = this._map;
 
         // Touch mode
         if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
@@ -106,7 +102,11 @@ L.Control.Rotate = L.Control.extend({
         // Compass mode
         else if (!map.compassBearing.enabled()) {
             map.touchRotate.disable();
-            map.compassBearing.enable();
+            (
+                DeviceOrientationEvent && DeviceOrientationEvent.requestPermission
+                    ? DeviceOrientationEvent.requestPermission() // iOS compass
+                    : Promise.resolve('granted')                 // others
+            ).then(state => "granted" === state && map.compassBearing.enable())
         }
 
         // Locked mode
@@ -120,12 +120,12 @@ L.Control.Rotate = L.Control.extend({
         this._restyle();
     },
 
-    _restyle: function() {
+    _restyle() {
         if (!this._map.options.rotate) {
-            L.DomUtil.addClass(this._link, 'leaflet-disabled');
+            this._link.classList.add('leaflet-disabled');
         } else {
-            var map = this._map;
-            var bearing = map.getBearing();
+            const map = this._map;
+            const bearing = map.getBearing();
 
             this._arrow.style.transform = 'rotate(' + bearing + 'deg)';
 
@@ -155,9 +155,9 @@ L.Control.Rotate = L.Control.extend({
 
 });
 
-L.control.rotate = function(options) {
-    return new L.Control.Rotate(options);
-};
+if (L.control) {
+    L.control.rotate = options => new L.Control.Rotate(options);
+}
 
 L.Map.mergeOptions({
     rotateControl: true,
@@ -165,8 +165,8 @@ L.Map.mergeOptions({
 
 L.Map.addInitHook(function() {
     if (this.options.rotateControl) {
-        var options = typeof this.options.rotateControl === 'object' ? this.options.rotateControl : {};
-        this.rotateControl = L.control.rotate(options);
+        const options = typeof this.options.rotateControl === 'object' ? this.options.rotateControl : {};
+        this.rotateControl = new L.Control.Rotate(options);
         this.addControl(this.rotateControl);
     }
 });

package/src/dom/DomUtil.js

@@ -4,75 +4,59 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/DomUtil.js
  */
 
-const domUtilProto = L.extend({}, L.DomUtil);
-
-L.extend(L.DomUtil, {
+const domUtilProto = Object.assign({}, L.DomUtil);
 
+Object.assign(L.DomUtil, {
     /**
-     * Resets the 3D CSS transform of `el` so it is
-     * translated by `offset` pixels and optionally
-     * scaled by `scale`. Does not have an effect if
-     * the browser doesn't support 3D CSS transforms.
-     * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} offset 
+     * Resets the 3D CSS transform of `el` so it is translated by `offset` pixels,
+     * optionally scaled by `scale`, and rotated around `pivot` when `bearing` is set.
+     *
+     * @param {HTMLElement} el
+     * @param {L.Point} offset
      * @param {Number} scale
-     * @param {Number} bearing 
-     * @param {L.Point} pivot 
+     * @param {Number} bearing
+     * @param {L.Point} pivot
      */
-    setTransform: function(el, offset, scale, bearing, pivot) {
-        var pos = offset || new L.Point(0, 0);
+    setTransform(el, offset, scale, bearing, pivot) {
+        let pos = offset || new L.Point(0, 0);
 
         if (!bearing) {
-            offset = pos._round();
-            return domUtilProto.setTransform.apply(this, arguments);
+            return domUtilProto.setTransform(el, pos._round(), scale);
         }
 
         pos = pos.rotateFrom(bearing, pivot);
-
-        el.style[L.DomUtil.TRANSFORM] =
-            'translate3d(' + pos.x + 'px,' + pos.y + 'px' + ',0)' +
+        el.style.transform =
+            'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)' +
             (scale ? ' scale(' + scale + ')' : '') +
             ' rotate(' + bearing + 'rad)';
     },
 
     /**
-     * Sets the position of `el` to coordinates specified by
-     * `position`, using CSS translate or top/left positioning
-     * depending on the browser (used by Leaflet internally
-     * to position its layers).
-     * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} point 
+     * Sets the position of `el` to `point`, using CSS transforms or top/left positioning
+     * depending on browser support, and optionally rotating it around `pivot`.
+     *
+     * @param {HTMLElement} el
+     * @param {L.Point} point
      * @param {Number} bearing
-     * @param {L.Point} pivot 
-     * @param {Number} scale 
+     * @param {L.Point} pivot
+     * @param {Number} scale
      */
-    setPosition: function(el, point, bearing, pivot, scale) {
+    setPosition(el, point, bearing, pivot, scale) {
         if (!bearing) {
-            return domUtilProto.setPosition.apply(this, arguments);
+            return domUtilProto.setPosition(el, point);
         }
 
-        /*eslint-disable */
         el._leaflet_pos = point;
-        /*eslint-enable */
-
-        if (L.Browser.any3d) {
-            L.DomUtil.setTransform(el, point, scale, bearing, pivot);
-        } else {
-            el.style.left = point.x + 'px';
-            el.style.top = point.y + 'px';
-        }
+        L.DomUtil.setTransform(el, point, scale, bearing, pivot);
     },
 
     /**
-     * @constant radians = degrees × π/180°
+     * Returns the position assigned to `el`.
+     *
+     * @param {HTMLElement} el
+     * @returns {L.Point}
      */
-    DEG_TO_RAD: Math.PI / 180,
-
-    /**
-     * @constant degrees = radians × 180°/π
-     */
-    RAD_TO_DEG: 180 / Math.PI,
-
+    getPosition(el) {
+        return el._leaflet_pos || domUtilProto.getPosition(el);
+    }
 });

package/src/dom/Draggable.js

@@ -13,7 +13,7 @@
 L.Draggable.include({
 
     /** @TODO */
-    // updateMapBearing: function(mapBearing) {
+    // updateMapBearing(mapBearing) {
     //     this._mapBearing = mapBearing;
     // },
 

package/src/geometry/Point.js

@@ -4,7 +4,7 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Point.js
  */
 
-L.extend(L.Point.prototype, {
+Object.assign(L.Point.prototype, {
 
     /**
      * Rotate around (0,0) by applying the 2D rotation matrix:
@@ -14,7 +14,7 @@ L.extend(L.Point.prototype, {
      * 
      * @param theta must be given in radians.
      */
-    rotate: function(theta) {
+    rotate(theta) {
         return this.rotateFrom(theta, new L.Point(0,0))
     },
 
@@ -32,13 +32,13 @@ L.extend(L.Point.prototype, {
      * 
      * @returns {L.Point}
      */
-    rotateFrom: function(theta, pivot) {
+    rotateFrom(theta, pivot) {
         if (!theta) { return this; }
-        var sinTheta = Math.sin(theta);
-        var cosTheta = Math.cos(theta);
-        var cx = pivot.x,
+        const sinTheta = Math.sin(theta);
+        const cosTheta = Math.cos(theta);
+        const cx = pivot.x,
             cy = pivot.y;
-        var x = this.x - cx,
+        const x = this.x - cx,
             y = this.y - cy;
 
         return new L.Point(
@@ -48,3 +48,12 @@ L.extend(L.Point.prototype, {
     },
 
 });
+
+export function toPoint(point) {
+    if (point == null || point instanceof L.Point) {
+        return point;
+    }
+    return Array.isArray(point)
+        ? new L.Point(point[0], point[1])
+        : new L.Point(point.x, point.y);
+}

package/src/layer/DivOverlay.js

@@ -4,7 +4,9 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/DivOverlay.js
  */
 
-const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
+import { toPoint } from '../geometry/Point';
+
+const divOverlayProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.DivOverlay.prototype));
 
 L.DivOverlay.include({
 
@@ -14,21 +16,33 @@ L.DivOverlay.include({
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-        return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
+    getEvents() {
+        return Object.assign(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
     },
 
     /**
      * 0. update element anchor point (divOverlayProto v1.9.3)
      * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
      */
-    _updatePosition: function() {
+    _updatePosition() {
         if (!this._map) { return; }
         divOverlayProto._updatePosition.apply(this, arguments);
-        if (this._map && this._map._rotate && this._zoomAnimated) {
-            var anchor = this._getAnchor();
-            var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+        if (this._map._rotate && this._zoomAnimated) {
+            const anchor = this._getAnchor();
+            const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
             L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
+        } else if (this._map._rotate) {
+            const mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)),
+                offset = toPoint(this.options.offset || [0, 0]),
+                anchor = this._getAnchor();
+
+            this._containerLeft = -Math.round(this._containerWidth / 2) + mapPanePoint.x + offset.x + anchor.x;
+            this._containerBottom = -(mapPanePoint.y + offset.y + anchor.y);
+            this._container.style.left = this._containerLeft + 'px';
+            this._container.style.bottom = this._containerBottom + 'px';
+            this._container.style.top = '';
+            L.DomUtil.setPosition(this._container, new L.Point(0, 0));
+            this._container.style.transform = '';
         }
 
     },

package/src/layer/Popup.js

@@ -4,7 +4,9 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Popup.js
  */
 
-const popupProto = L.extend({}, L.Popup.prototype);
+import { toPoint } from '../geometry/Point';
+
+const popupProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Popup.prototype));
 
 L.Popup.include({
 
@@ -12,11 +14,11 @@ L.Popup.include({
      * 0. update element anchor point (popupProto v1.9.3)
      * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
      */
-    _animateZoom: function(e) {
+    _animateZoom(e) {
         popupProto._animateZoom.apply(this, arguments);
         if (this._map && this._map._rotate) {
-            var anchor = this._getAnchor();
-            var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+            const anchor = this._getAnchor();
+            const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
             L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
         }
     },
@@ -26,7 +28,7 @@ L.Popup.include({
      * 
      * @see https://github.com/fnicollet/Leaflet/pull/21
      */
-    _adjustPan: function() {
+    _adjustPan() {
         if (!this.options.autoPan || (this._map._panAnim && this._map._panAnim._inProgress)) { return; }
 
         // We can endlessly recurse if keepInView is set and the view resets.
@@ -36,8 +38,8 @@ L.Popup.include({
             return;
         }
 
-        var map = this._map,
-            marginBottom = parseInt(L.DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0,
+        const map = this._map,
+            marginBottom = parseInt(getComputedStyle(this._container).marginBottom, 10) || 0,
             containerHeight = this._container.offsetHeight + marginBottom,
             containerWidth = this._containerWidth,
             layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom);
@@ -46,12 +48,12 @@ L.Popup.include({
 
         /** @TODO use popupProto._adjustPan */
         // var containerPos = map.layerPointToContainerPoint(layerPos);
-        var containerPos = layerPos._add(this._map._getMapPanePos()),
-            padding = L.point(this.options.autoPanPadding),
-            paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding),
-            paddingBR = L.point(this.options.autoPanPaddingBottomRight || padding),
-            size = map.getSize(),
-            dx = 0,
+        const containerPos = layerPos._add(this._map._getMapPanePos()),
+            padding = toPoint(this.options.autoPanPadding || [0, 0]),
+            paddingTL = toPoint(this.options.autoPanPaddingTopLeft || padding),
+            paddingBR = toPoint(this.options.autoPanPaddingBottomRight || padding),
+            size = map.getSize();
+        let dx = 0,
             dy = 0;
 
         if (containerPos.x + containerWidth + paddingBR.x > size.x) { // right

package/src/layer/Tooltip.js

@@ -4,25 +4,25 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Tooltip.js
  */
 
-const tooltipProto = L.extend({}, L.Tooltip.prototype);
+const tooltipProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Tooltip.prototype));
 
 L.Tooltip.include({
 
-    _animateZoom: function(e) {
+    _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() {
+    _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

@@ -4,21 +4,21 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Icon.js
  */
 
-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'];
+    _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 +26,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

@@ -7,7 +7,7 @@
  * @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({
 
@@ -25,6 +25,13 @@ L.Marker.mergeOptions({
      */
     rotateWithView: false,
 
+    /**
+     * Flip a rotated marker when needed to keep it upright
+     *
+     * @type {Boolean}
+     */
+    keepUpright: false,
+
     /**
      * Scale of the marker icon
      * 
@@ -34,23 +41,23 @@ L.Marker.mergeOptions({
 
 });
 
-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,
+    _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
@@ -63,7 +70,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;
@@ -79,7 +86,7 @@ var MarkerDrag = {
             .fire('drag', e);
     },
 
-    _onDragEnd: function(e) {
+    _onDragEnd(e) {
         if (this._marker._map._rotate) {
             this._marker.update();
         }
@@ -96,12 +103,12 @@ L.Marker.include({
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-        return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
+    getEvents() {
+        return Object.assign(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
     },
 
-    _initInteraction: function() {
-        var ret = markerProto._initInteraction.apply(this, arguments);
+    _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);
@@ -116,7 +123,7 @@ L.Marker.include({
         return ret;
     },
 
-    _setPos: function(pos) {
+    _setPos(pos) {
 
         /** @TODO use markerProto._setPos */
         if (this._map._rotate) {
@@ -124,10 +131,17 @@ 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;
         }
+        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;
+        }
 
         /** @TODO use markerProto._setPos */
         if (this._icon) {
@@ -144,14 +158,14 @@ 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) {
+    setRotation(rotation) {
         this.options.rotation = rotation;
         this.update();
     },