Bounds are not valid

[julien-deramond]

I'm observing something strange when I try to use fitBounds Leaflet function.

Within our project

When I use the following code

import * as L from 'leaflet';
// [...]
this.commonIotMap.getIotMap().fitBounds(L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125)));

I got the following error

Error: Bounds are not valid.

I added logs in node_modules/iotmapmanager/dist/index.js in toLatLngBounds(a, b) (which is used by fitBounds) and I see the execution doesn't enter in if (a instanceof LatLngBounds) which causes an empty object returned which causes the exception Bounds are not valid.

On the other hand, if I rather use this code without the types, it works as expected

import * as L from 'leaflet';
// [...]
this.commonIotMap.getIotMap().fitBounds([[40.712, -74.227], [40.774, -74.125]]);

Within IoT Map Component

If I modify the code of map.component.ts within Iot Map Component project

diff --git a/src/map/map.component.ts b/src/map/map.component.ts
index 786643c..08c5777 100644
--- a/src/map/map.component.ts
+++ b/src/map/map.component.ts
@@ -15,6 +15,8 @@ import {
   IotMapPathManager
 } from 'iotmapmanager'

+import * as L from 'leaflet';
+
 @Component({
   selector: 'map-component',
   templateUrl: './map.component.html',
@@ -518,6 +520,8 @@ export class MapComponent implements AfterViewInit {
     this.iotMapUserMarkerManager.addUserMarker(this.userMarker)
     this.iotMapPathManager.addPath(this.chemin)

+    this.commonIotMap.getIotMap().fitBounds(L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125)));
+
     setTimeout(() => { this.iotMapMarkerManager.updateMarker('s1', {shape: {accuracy: 600}})}, 3000)
     setTimeout(() => { this.iotMapMarkerManager.removeMarker('s1')}, 5000)
     setTimeout(() => { this.iotMapMarkerManager.updateMarker('s5', {shape : { accuracy: undefined}})}, 5000)

it works!

But the package.json uses "iotmapmanager": "^2.0.0". If I change it to 2.0.1, I have this error

ERROR TypeError: L.MarkerClusterGroup is not a constructor
    markerClusterGroup leaflet.markercluster-src.js:1385
    initLayer iot-map-manager.ts:94
    getLayer iot-map-manager.ts:132
    addElement iot-map-manager.ts:176
    addMarker iot-map-marker-manager.ts:45
    addMarkers iot-map-marker-manager.ts:60
    addMarkers iot-map-marker-manager.ts:59
    ngAfterViewInit map.component.ts:518

Note: I have this same error if try to use fitBounds in Storybook.

[sandrinegateau]

This issue seems to be due to simultaneous uses of 2 instances of leaflet (one for iotmapmanager and one for map component).
Looks like this issue on Vue-Leaflet : vue-leaflet/vue-leaflet#48

Temporary workaround is to replace :

const southWest = L.latLng(40.712, -74.227)
const northEast = L.latLng(40.774, -74.125)
const bounds: L.LatLngBounds = L.latLngBounds(southWest, northEast)
this.commonIotMap.getIotMap().fitBounds(bounds)

by

const southWest = L.latLng(40.712, -74.227)
const northEast = L.latLng(40.774, -74.125)
const bounds: L.LatLngBounds = L.latLngBounds(southWest, northEast)
this.commonIotMap.getIotMap().fitBounds([bounds.getSouthWest(), bounds.getNorthEast()])

Or put coord in a simple array form as following:
this.commonIotMap.getIotMap().fitBounds([[40.712, -74.22], [40.774, -74.125]])

Looking for a more suitable solution...

[julien-deramond]

Maybe it can help: DefinitelyTyped/DefinitelyTyped#55426

[julien-deramond]

FYI bumping leaflet to 1.8.0 doesn't seem to fix this issue.