hallahan / LeafletPlayback

This is a Leaflet plug-in that plays back points that have a time stamp synchronized to a clock.
http://leafletplayback.theoutpost.io
Other
482 stars 165 forks source link

Icons wrongly translated when 'orientIcons' set #60

Closed SFSailor closed 6 years ago

SFSailor commented 6 years ago

I noticed, when adding a track for the marker to move along that if I set the 'orientIcons' option to true, the marker rotates as advertised, but it's translated away from the actual path.

This is true for the default marker as well as the svg icons I would like to be using.

It appears that the icon manipulation takes place in this chunk of code at around line 161: _updateImg: function (i, a, s) { a = L.point(s).divideBy(2)._subtract(L.point(a)); var transform = ''; transform += ' translate(' + -a.x + 'px, ' + -a.y + 'px)'; transform += ' rotate(' + this.options.iconAngle + 'deg)'; transform += ' translate(' + a.x + 'px, ' + a.y + 'px)'; i.style[L.DomUtil.TRANSFORM] += transform; },

I wonder if there is an easy fix to this.

SFSailor commented 6 years ago

Okay, I found a solution, at least in my installation. Replace the line which sets a (the iconAnchor) to a calculated value with a line that takes it as is. I think we were the victim of some double-application of variables.

I did this in my main app code by adding the following:

**L.Playback.MoveableMarker.include({ _updateImg: function (i, a, s) {

    a=L.point(a);
    var transform = '';
    transform += ' translate(' + a.x + 'px, ' + a.y + 'px)';
    transform += ' rotate(' + this.options.iconAngle + 'deg)';
    transform += ' translate(' + -a.x + 'px, ' + -a.y + 'px)';
    i.style[L.DomUtil.TRANSFORM] += transform;  
}
  });**