Rd 1086 fix leaflet bounds issue (#31)

* RD-1086 Tie max bounds in leaflet instacne to max bounds in MapTiler map.

* RD-1086 Remove console.log and pass correct param to constructor

* 4.1.1

* RD-1086 Add GH issue to changelog

* RD-1086 Fix typo

---------

Co-authored-by: Les Moffat <les.moffat@maptiler.com>

Author: lesbaa

CHANGELOG.md

@@ -1,5 +1,8 @@
 # MapTiler Client Changelog
 
+## 4.1.1
+- Constrain maxbounds on Leaflet to those of MapLibre / Maptiler ensure layers are reconclied in terms of position properly. Fixes [30](https://github.com/maptiler/leaflet-maptilersdk/issues/30)
+
 ## 4.1.0
 - Update @maptiler/sdk to the latest version
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/leaflet-maptilersdk",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Vector tiles basemap plugin for Leaflet - multi-lingual basemaps using MapTiler SDK",
   "module": "dist/leaflet-maptilersdk.js",
   "type": "module",

package.json

@@ -268,7 +268,25 @@ export const MaptilerLayer = L.Layer.extend({
 
   _initMaptilerSDK: function () {
     const center = this._map.getCenter();
+    const maxBounds = (() => {
+      if (this.options.maxBounds) {
+        return this.options.maxBounds;
+      }
+
+      // Maplibre is LngLat
+      return [
+        [Number.NEGATIVE_INFINITY, -90],
+        [Number.POSITIVE_INFINITY, 90],
+      ];
+    })();
+
+    // Leaflet expects LatLng
+    this._map.setMaxBounds(
+      L.latLngBounds(L.latLng(maxBounds[0][1], maxBounds[0][0]), L.latLng(maxBounds[1][1], maxBounds[1][0])),
+    );
+
     const options = {
+      maxBounds,
       ...this.options,
       projection: "mercator",
       container: this._container,