nakarte

commit 8d8da7972b1cd7710c8a89a12ba593e6cdeb116b
parent 301a24043787cbf920ae8cc9605a22f5f36c67fc
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Mon, 26 Dec 2022 23:24:51 +0100

[wikimapia] Update highlighted area under cursor after zoom

Fixes: #1097

Diffstat:
M
src/lib/leaflet.layer.wikimapia/index.js
 | 
79
+++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------

1 file changed, 55 insertions(+), 24 deletions(-)
diff --git a/src/lib/leaflet.layer.wikimapia/index.js b/src/lib/leaflet.layer.wikimapia/index.js
@@ -38,8 +38,11 @@ L.Wikimapia = L.GridLayer.extend({
             }
             L.GridLayer.prototype.onAdd.call(this, map);
             this.on('tileunload', this.onTileUnload, this);
+            this.on('tileload', this.onTileLoad, this);
             map.on('mousemove', this.onMouseMove, this);
             map.on('click', this.onClick, this);
+            map.on('zoomend', this.onZoomEnd, this);
+            map.on('zoomstart', this.onZoomStart, this);
         },
 
         onRemove: function(map) {
@@ -52,6 +55,9 @@ L.Wikimapia = L.GridLayer.extend({
             }
             L.TileLayer.prototype.onRemove.call(this, map);
             this.off('tileunload', this.onTileUnload, this);
+            this.off('tileload', this.onTileLoad, this);
+            map.off('zoomend', this.onZoomEnd, this);
+            map.off('zoomstart', this.onZoomStart, this);
         },
 
         drawTile: function(canvas) {
@@ -132,8 +138,19 @@ L.Wikimapia = L.GridLayer.extend({
             delete tile._adjustment;
         },
 
-        _tileCoordsFromEvent: function(e) {
-            const layerPoint = this._map.getPixelOrigin().add(e.layerPoint);
+        onTileLoad: function() {
+            if (!this.lastMousePos) {
+                return;
+            }
+            if (this.mapZooming) {
+                return;
+            }
+            this.updateHighlight();
+        },
+
+        _tileCoordsFromLatlng: function(latlng) {
+            let layerPoint = this._map.latLngToLayerPoint(latlng);
+            layerPoint = layerPoint.add(this._map.getPixelOrigin());
             const tileSize = this.options.tileSize;
             let coords = {
                 x: Math.floor(layerPoint.x / tileSize),
@@ -144,8 +161,9 @@ L.Wikimapia = L.GridLayer.extend({
             return coords;
         },
 
-        getPlaceAtMousePos: function(e) {
-            const tileCoords = this._tileCoordsFromEvent(e);
+        getPlaceAtLatlng: function(latlng) {
+            latlng = latlng.wrap();
+            const tileCoords = this._tileCoordsFromLatlng(latlng);
             let tile = this._tiles[this._tileCoordsToKey(tileCoords)];
             if (!tile) {
                 return null;
@@ -154,11 +172,39 @@ L.Wikimapia = L.GridLayer.extend({
             if (!tileData) {
                 return null;
             }
-            return this.getPlaceAtLatlng(e.latlng.wrap(), tileData.places);
+
+            const places = tileData.places;
+            const {lat, lng} = latlng;
+            let bounds, place;
+            for (let i = places.length - 1; i >= 0; i--) {
+                place = places[i];
+                bounds = place.boundsWESN;
+                if (lng >= bounds[0] && lng <= bounds[1] && lat >= bounds[2] && lat <= bounds[3] &&
+                    isPointInPolygon(place.polygon, [lat, lng])) {
+                    return place;
+                }
+            }
+            return null;
         },
 
         onMouseMove: function(e) {
-            const place = this.getPlaceAtMousePos(e);
+            this.lastMousePos = e.latlng;
+            this.updateHighlight();
+        },
+
+        onZoomEnd: function() {
+            this.mapZooming = false;
+            this.updateHighlight();
+        },
+        onZoomStart: function() {
+            this.mapZooming = true;
+        },
+
+        updateHighlight: function() {
+            if (!this.lastMousePos) {
+                return;
+            }
+            const place = this.getPlaceAtLatlng(this.lastMousePos);
             if (this.highlightedPlace && (!place || this.highlightedPlace.id !== place.id)) {
                 this._map.removeLayer(this.highlightedPlace.polygon);
                 this._map.removeLayer(this.highlightedPlace.label);
@@ -175,13 +221,13 @@ L.Wikimapia = L.GridLayer.extend({
                     ),
                     label: L.tooltip({className: 'wikimapia-tooltip-wrapper'}, null)
                 };
-                this.highlightedPlace.label.setLatLng(e.latlng);
+                this.highlightedPlace.label.setLatLng(this.lastMousePos);
                 this.highlightedPlace.polygon.addTo(this._map).bringToBack();
                 this.highlightedPlace.label.setContent(`<div class="wikimapia-tooltip">${place.title}</div>`);
                 this._map.addLayer(this.highlightedPlace.label);
             }
             if (this.highlightedPlace) {
-                this.highlightedPlace.label.setLatLng(e.latlng);
+                this.highlightedPlace.label.setLatLng(this.lastMousePos);
             }
         },
 
@@ -189,26 +235,11 @@ L.Wikimapia = L.GridLayer.extend({
             if (this._map.clickLocked) {
                 return;
             }
-            const place = this.getPlaceAtMousePos(e);
+            const place = this.getPlaceAtLatlng(e.latlng);
             if (place) {
                 const url = `http://wikimapia.org/${place.id}/ru/`;
                 openPopupWindow(url, 564, 'wikimapia-details');
             }
         },
-
-        getPlaceAtLatlng: function(latlng, places) {
-            let {lat, lng} = latlng,
-                bounds, place;
-            for (let i = places.length - 1; i >= 0; i--) {
-                place = places[i];
-                bounds = place.boundsWESN;
-                if (lng >= bounds[0] && lng <= bounds[1] && lat >= bounds[2] && lat <= bounds[3] &&
-                    isPointInPolygon(place.polygon, [lat, lng])) {
-                    return place;
-                }
-            }
-            return null;
-        }
-
     }
 );