From 0d2d5d0b74d01be29d94d581ce62433621ed171c Mon Sep 17 00:00:00 2001 From: Oleg Podchashynskyi Date: Wed, 12 Sep 2018 16:23:01 +0100 Subject: [PATCH 1/3] Add zoom animation --- src/plugin/leaflet.canvas-markers.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/plugin/leaflet.canvas-markers.js b/src/plugin/leaflet.canvas-markers.js index 72d6853..aa3a44c 100644 --- a/src/plugin/leaflet.canvas-markers.js +++ b/src/plugin/leaflet.canvas-markers.js @@ -129,6 +129,10 @@ function layerFactory(L) { map.on('click', this._executeListeners, this); map.on('mousemove', this._executeListeners, this); + + if (map._zoomAnimated) { + map.on('zoomanim', this._animateZoom, this); + } }, onRemove: function (map) { @@ -141,6 +145,11 @@ function layerFactory(L) { map.off('moveend', this._reset, this); map.off('resize',this._reset,this); + + + if (map._zoomAnimated) { + map.of('zoomanim', this._animateZoom, this); + } }, addTo: function (map) { @@ -156,6 +165,13 @@ function layerFactory(L) { this._redraw(true); }, + _animateZoom: function(event) { + var scale = this._map.getZoomScale(event.zoom); + var offset = this._map._latLngBoundsToNewLayerBounds(this._map.getBounds(), event.zoom, event.center).min; + + L.DomUtil.setTransform(this._canvas, offset, scale); + }, + _addMarker: function(marker,latlng,isDisplaying) { var self = this; From 98476abdbd6d8d0480a60d254d4902aa2b4f8f92 Mon Sep 17 00:00:00 2001 From: Oleg Podchashynskyi Date: Wed, 12 Sep 2018 16:27:18 +0100 Subject: [PATCH 2/3] Remove transform-origin: it's not used and messed up zoom animation --- src/plugin/leaflet.canvas-markers.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/plugin/leaflet.canvas-markers.js b/src/plugin/leaflet.canvas-markers.js index aa3a44c..294d7b9 100644 --- a/src/plugin/leaflet.canvas-markers.js +++ b/src/plugin/leaflet.canvas-markers.js @@ -362,8 +362,6 @@ function layerFactory(L) { _initCanvas: function () { this._canvas = L.DomUtil.create('canvas', 'leaflet-canvas-icon-layer leaflet-layer'); - var originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']); - this._canvas.style[originProp] = '50% 50%'; var size = this._map.getSize(); this._canvas.width = size.x; From 465908b4fced7b3d77bb4c39ac673f4373aba9af Mon Sep 17 00:00:00 2001 From: Oleg Podchashynskyi Date: Fri, 14 Sep 2018 08:55:21 +0100 Subject: [PATCH 3/3] Fix typo: `map.of` -> `map.off` --- src/plugin/leaflet.canvas-markers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin/leaflet.canvas-markers.js b/src/plugin/leaflet.canvas-markers.js index 294d7b9..f3ca999 100644 --- a/src/plugin/leaflet.canvas-markers.js +++ b/src/plugin/leaflet.canvas-markers.js @@ -148,7 +148,7 @@ function layerFactory(L) { if (map._zoomAnimated) { - map.of('zoomanim', this._animateZoom, this); + map.off('zoomanim', this._animateZoom, this); } },