Orange-OpenSource / Orange-OpenSource/IOT-Map-Component

Bounds are not valid

Open
#18 3 comments 0 reactions 1 assignee View on GitHub

@MewenLeHo is already working on this.

Since Feb 22, 2022.

bug
Dominant language
TypeScript
Stars
24
Forks
8
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.