Fix shifted rotated marker. Fix #38

bbecquet · Sep 29, 2015 · 812d0ac · 812d0ac
1 parent 1455166
commit 812d0ac
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/leaflet.polylineDecorator.js b/leaflet.polylineDecorator.js
@@ -298,8 +298,6 @@ L.PolylineDecorator = L.LayerGroup.extend({
             pattern.isRepeatInPixels = (pattern.repeat > 0);
         }
 
-        // TODO: 0 => not pixel dependant => 0%
-
         return(pattern);
     },
 
@@ -439,9 +437,20 @@ L.RotatedMarker = L.Marker.extend({
         angle: 0
     },
 
+    statics: {
+        TRANSFORM_ORIGIN: L.DomUtil.testProp(
+            ['transformOrigin', 'WebkitTransformOrigin', 'OTransformOrigin', 'MozTransformOrigin', 'msTransformOrigin'])
+    },
+
+    _initIcon: function() {
+        L.Marker.prototype._initIcon.call(this);
+
+        this._icon.style[L.RotatedMarker.TRANSFORM_ORIGIN] = '50% 50%';
+    },
+
     _setPos: function (pos) {
         L.Marker.prototype._setPos.call(this, pos);
-        
+
         if (L.DomUtil.TRANSFORM) {
             // use the CSS transform rule if available
             this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
@@ -450,10 +459,11 @@ L.RotatedMarker = L.Marker.extend({
             var rad = this.options.angle * (Math.PI / 180),
                 costheta = Math.cos(rad),
                 sintheta = Math.sin(rad);
-            this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' + 
-                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';                
+            this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
+                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
         }
     },
+
     setAngle: function (ang) {
         this.options.angle = ang;
     }

diff --git a/src/L.RotatedMarker.js b/src/L.RotatedMarker.js
@@ -3,9 +3,20 @@ L.RotatedMarker = L.Marker.extend({
         angle: 0
     },
 
+    statics: {
+        TRANSFORM_ORIGIN: L.DomUtil.testProp(
+            ['transformOrigin', 'WebkitTransformOrigin', 'OTransformOrigin', 'MozTransformOrigin', 'msTransformOrigin'])
+    },
+
+    _initIcon: function() {
+        L.Marker.prototype._initIcon.call(this);
+
+        this._icon.style[L.RotatedMarker.TRANSFORM_ORIGIN] = '50% 50%';
+    },
+
     _setPos: function (pos) {
         L.Marker.prototype._setPos.call(this, pos);
-        
+
         if (L.DomUtil.TRANSFORM) {
             // use the CSS transform rule if available
             this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
@@ -14,10 +25,11 @@ L.RotatedMarker = L.Marker.extend({
             var rad = this.options.angle * (Math.PI / 180),
                 costheta = Math.cos(rad),
                 sintheta = Math.sin(rad);
-            this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' + 
-                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';                
+            this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
+                costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
         }
     },
+
     setAngle: function (ang) {
         this.options.angle = ang;
     }