L.HeatLayer doesn't rotate

[hamster0020]

When the map is rotated, markers will rotate follow the base map, but the heatmap spots cannot rotate follow the base map.

 var map = L.map('map',{
  center:[48.86379600793516, 2.3269692413908345],
  zoom: 18.45, 
  attributionControl: false, 
  rotate: true,
  drawControl: true,
  preferCanvas: true,
  bearing: 334
});  

var heatmapData = [
  [48.866174490164184, 2.323482369671423, 1], 
  [48.86383835578438, 2.3215404503446937, 1],
  [48.861128021004475, 2.330037688503814, 1],
  [48.863697196137785, 2.331775759945452, 1],
];

var heatLayer = L.heatLayer(heatmapData, {           
  radius: 25,  
  blur: 15,    
  maxZoom: 16, 
}).addTo(map);

[Raruto]

Hi @hamster0020,

that plugin makes use of a custom renderer:

Leaflet.heat/src/HeatLayer.js#L88-L103

_initCanvas: function () {
  var canvas = this._canvas = L.DomUtil.create('canvas', 'leaflet-heatmap-layer leaflet-layer');

  var originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
  canvas.style[originProp] = '50% 50%';

  var size = this._map.getSize();
  canvas.width  = size.x;
  canvas.height = size.y;

  var animated = this._map.options.zoomAnimation && L.Browser.any3d;
  L.DomUtil.addClass(canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));

  this._heat = simpleheat(canvas);
  this._updateOptions();
}

It's up to you as a developer(s) to tweak them to make them work together (related to: #47).

👋 Raruto