cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed leaflet canvas layer issues with resizing

Browse Source
This commit is contained in:
javi 2014-03-21 15:56:13 +01:00
parent 2d22276bfd
commit bc97babd53
1 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
lib/torque/leaflet/canvas_layer.js
View File

@ -18,7 +18,8 @@ L.CanvasLayer = L.Class.extend({
opacity: 1,
unloadInvisibleTiles: L.Browser.mobile,
updateWhenIdle: L.Browser.mobile,
tileLoader: false // installs tile loading events
tileLoader: false, // installs tile loading events
zoomAnimation: true
},
initialize: function (options) {
@ -29,7 +30,9 @@ L.CanvasLayer = L.Class.extend({
L.Util.setOptions(this, options);
this._canvas = this._createCanvas();
// backCanvas for zoom animation
this._backCanvas = this._createCanvas();
if (this.options.zoomAnimation) {
this._backCanvas = this._createCanvas();
}
this._ctx = this._canvas.getContext('2d');
this.currentAnimationFrame = -1;
this.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
@ -48,7 +51,10 @@ L.CanvasLayer = L.Class.extend({
canvas.style.left = 0;
canvas.style.pointerEvents = "none";
canvas.style.zIndex = this.options.zIndex || 0;
var className = 'leaflet-tile-container leaflet-zoom-animated';
var className = 'leaflet-tile-container';
if (this.options.zoomAnimation) {
className += ' leaflet-zoom-animated';
}
canvas.setAttribute('class', className);
return canvas;
},
@ -62,8 +68,10 @@ L.CanvasLayer = L.Class.extend({
var tilePane = this._map._panes.tilePane;
var _container = L.DomUtil.create('div', 'leaflet-layer');
_container.appendChild(this._canvas);
_container.appendChild(this._backCanvas);
this._backCanvas.style.display = 'none';
if (this.options.zoomAnimation) {
_container.appendChild(this._backCanvas);
this._backCanvas.style.display = 'none';
}
tilePane.appendChild(_container);
this._container = _container;
@ -78,10 +86,13 @@ L.CanvasLayer = L.Class.extend({
map.on({ 'viewreset': this._reset }, this);
map.on('move', this.render, this);
map.on('resize', this._reset, this);
map.on({
if (this.options.zoomAnimation) {
map.on({
'zoomanim': this._animateZoom,
'zoomend': this._endZoomAnim
}, this);
}, this);
}
if(this.options.tileLoader) {
this._initTileLoader();
@ -91,40 +102,40 @@ L.CanvasLayer = L.Class.extend({
},
_animateZoom: function (e) {
if (!this._animating) {
this._animating = true;
}
var back = this._backCanvas;
if (!this._animating) {
this._animating = true;
}
var back = this._backCanvas;
back.width = this._canvas.width;
back.height = this._canvas.height;
back.width = this._canvas.width;
back.height = this._canvas.height;
// paint current canvas in back canvas with trasnformation
var pos = this._canvas._leaflet_pos || { x: 0, y: 0 };
back.getContext('2d').drawImage(this._canvas, 0, 0);
// paint current canvas in back canvas with trasnformation
var pos = this._canvas._leaflet_pos || { x: 0, y: 0 };
back.getContext('2d').drawImage(this._canvas, 0, 0);
// hide original
this._canvas.style.display = 'none';
back.style.display = 'block';
var map = this._map;
var scale = map.getZoomScale(e.zoom);
var newCenter = map._latLngToNewLayerPoint(map.getCenter(), e.zoom, e.center);
var oldCenter = map._latLngToNewLayerPoint(e.center, e.zoom, e.center);
// hide original
this._canvas.style.display = 'none';
back.style.display = 'block';
var map = this._map;
var scale = map.getZoomScale(e.zoom);
var newCenter = map._latLngToNewLayerPoint(map.getCenter(), e.zoom, e.center);
var oldCenter = map._latLngToNewLayerPoint(e.center, e.zoom, e.center);
var origin = {
x: newCenter.x - oldCenter.x,
y: newCenter.y - oldCenter.y
};
var origin = {
x: newCenter.x - oldCenter.x + pos.x,
y: newCenter.y - oldCenter.y + pos.y,
};
var bg = back;
var transform = L.DomUtil.TRANSFORM;
bg.style[transform] = L.DomUtil.getTranslateString(origin) + ' scale(' + e.scale + ') ';
var bg = back;
var transform = L.DomUtil.TRANSFORM;
bg.style[transform] = L.DomUtil.getTranslateString(origin) + ' scale(' + e.scale + ') ';
},
_endZoomAnim: function () {
this._animating = false;
this._canvas.style.display = 'block';
this._backCanvas.style.display = 'none';
this._animating = false;
this._canvas.style.display = 'block';
this._backCanvas.style.display = 'none';
},
getCanvas: function() {
@ -163,6 +174,9 @@ L.CanvasLayer = L.Class.extend({
setZIndex: function(zIndex) {
this._canvas.style.zIndex = zIndex;
if (this.options.zoomAnimation) {
this._backCanvas.style.zIndex = zIndex;
}
},
bringToFront: function () {
@ -177,6 +191,12 @@ L.CanvasLayer = L.Class.extend({
var size = this._map.getSize();
this._canvas.width = size.x;
this._canvas.height = size.y;
// fix position
var pos = L.DomUtil.getPosition(this._map.getPanes().mapPane);
if (pos) {
L.DomUtil.setPosition(this._canvas, { x: -pos.x, y: -pos.y });
}
this.onResize();
this._render();
},