@abi-software/flatmap-viewer 2.2.0-beta.3 → 2.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.0-beta.3",
+  "version": "2.2.0-beta.4",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/ABI-Software/flatmap-viewer.git",
   "main": "src/main.js",

package/src/flatmap-viewer.js

@@ -22,7 +22,7 @@ limitations under the License.
 
 //==============================================================================
 
-import maplibre from 'maplibre-gl';
+import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 //==============================================================================
@@ -131,7 +131,7 @@ class FlatMap
 
         // Create the map
 
-        this._map = new maplibre.Map(mapOptions);
+        this._map = new maplibregl.Map(mapOptions);
 
         // Show tile boundaries if debugging
 
@@ -146,7 +146,7 @@ class FlatMap
         // Do we want a fullscreen control?
 
         if (mapDescription.options.fullscreenControl === true) {
-            this._map.addControl(new maplibre.FullscreenControl(), 'top-right');
+            this._map.addControl(new maplibregl.FullscreenControl(), 'top-right');
         }
 
         // Disable map rotation
@@ -176,7 +176,11 @@ class FlatMap
                 this.setupUserInteractions_();
             } else if (this._initialState === null) {
                 this._bounds = this._map.getBounds();
-
+                this._map.setMaxBounds(this._bounds);
+                const sw = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[0]);
+                const ne = maplibregl.MercatorCoordinate.fromLngLat(this._bounds.toArray()[1]);
+                this.__normalised_origin = [sw.x, ne.y];
+                this.__normalised_size = [ne.x - sw.x, sw.y - ne.y];
                 if ('state' in this._options) {
                     this._userInteractions.setState(this._options.state);
                 }
@@ -559,7 +563,7 @@ class FlatMap
     //==================
     {
         if ('bounds' in this._options) {
-            this._map.fitBounds(this._options['bounds']);
+            this._map.fitBounds(this._options['bounds'], {animate: false});
         }
         if ('center' in this._options) {
             this._map.setCenter(this._options['center']);
@@ -822,6 +826,52 @@ class FlatMap
         });
     }
 
+    /**
+     * Generate a callback as a result of panning/zooming the map.
+     *
+     * @param {string}         type    The event type, ``pan`` or ``zoom``.
+     * @param {Array.<float>}  origin  The map's normalised top-left corner
+     * @param {Array.<float>}  size    The map's normalised size
+     */
+    panZoomEvent(type)
+    //================
+    {
+        const bounds = this._map.getBounds();
+        if (this.__normalised_origin !== undefined) {
+            const sw = maplibregl.MercatorCoordinate.fromLngLat(bounds.toArray()[0]);
+            const ne = maplibregl.MercatorCoordinate.fromLngLat(bounds.toArray()[1]);
+            const top_left = [(sw.x - this.__normalised_origin[0])/this.__normalised_size[0],
+                              (ne.y - this.__normalised_origin[1])/this.__normalised_size[1]];
+            const size = [(ne.x - sw.x)/this.__normalised_size[0],
+                          (sw.y - ne.y)/this.__normalised_size[1]];
+            this.callback('pan-zoom', {
+                type: type,
+                origin: top_left,
+                size: size
+            });
+        }
+    }
+
+    /**
+     * Pan/zoom the map to a new view
+     *
+     * @param {Array.<float>}  origin  The map's normalised top-left corner
+     * @param {Array.<float>}  size    The map's normalised size
+     */
+    panZoomTo(origin, size)
+    //=====================
+    {
+        if (this.__normalised_origin !== undefined) {
+            const sw_x = origin[0]*this.__normalised_size[0] + this.__normalised_origin[0];
+            const ne_y = origin[1]*this.__normalised_size[1] + this.__normalised_origin[1];
+            const ne_x = sw_x + size[0]*this.__normalised_size[0];
+            const sw_y = ne_y + size[1]*this.__normalised_size[1];
+            const sw = (new maplibregl.MercatorCoordinate(sw_x, sw_y, 0)).toLngLat();
+            const ne = (new maplibregl.MercatorCoordinate(ne_x, ne_y, 0)).toLngLat();
+            this._map.fitBounds([sw, ne], {animate: false});
+        }
+    }
+
     //==========================================================================
 
     search(text)

package/src/interactions.js

@@ -224,6 +224,10 @@ export class UserInteractions
         this._map.on('mousemove', this.mouseMoveEvent_.bind(this));
         this._lastFeatureMouseEntered = null;
         this._lastFeatureModelsMouse = null;
+
+        // Handle pan/zoom events
+        this._map.on('move', this.panZoomEvent_.bind(this, 'pan'));
+        this._map.on('zoom', this.panZoomEvent_.bind(this, 'zoom'));
     }
 
     getState()
@@ -1103,6 +1107,12 @@ export class UserInteractions
 
         return true;
     }
+
+    panZoomEvent_(type)
+    //=================
+    {
+        this._flatmap.panZoomEvent(type);
+    }
 }
 
 //==============================================================================