*** Version 2.6.4 ***

package.json

@@ -59,7 +59,7 @@
     "@types/leaflet": "^1.5.19",
     "@types/leaflet.markercluster": "^1.4.3",
     "boosted": "^4.6.0",
-    "iotmapmanager": "^2.6.3",
+    "iotmapmanager": "^2.6.4",
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
     "zone.js": "^0.11.3"

src/iotMapManager/css/map.css

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/css/markers.css

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/css/popup.css

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/css/tabs.css

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/import_png.d.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/index.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/iot-map-manager.css

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iotmapmanager",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "Manage markers, clusters, user marker or paths on IotMaps",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

src/iotMapManager/readme.md

@@ -1,4 +1,4 @@
-# IotMapManager V2.6.3
+# IotMapManager V2.6.4
 
 This library provides management of markers dedicated to projects using mapping.
 ## use

src/iotMapManager/src/iot-map-area-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-area.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-cluster-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-cluster.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *
@@ -95,4 +95,8 @@ export class IotMapCluster extends IotMapDisplay {
       this.map.getIotMap().flyTo(this.getData().location, (zoomLevel !== 18 ? zoomLevel + 1 : 18))
     }
   }
+
+  public isCluster (): boolean {
+    return true
+  }
 }

src/iotMapManager/src/iot-map-common-svg.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name: IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-config.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-icons.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *
@@ -92,8 +92,8 @@ export class IotMapManager {
     if (this.config.map.externalClustering) { // manual clustering
       layer = new L.FeatureGroup()
       layer.on('click', this.onElementClick.bind(this))
-        .on('mouseover', this.onMarkerMouseOver)
-        .on('mouseout', this.onMarkerMouseOut)
+        .on('mouseover', this.onElementMouseOver.bind(this))
+        .on('mouseout', this.onElementMouseOut)
     } else if (layerName === this.config.accuracyCircle.layerName ||
       layerName === this.config.userMarker.layerName ||
       layerName === this.config.path.layerName) { // accuracy area, user marker or path = no clustering
@@ -106,7 +106,7 @@ export class IotMapManager {
       })
 
       layer.on('animationend', this.onZoom.bind(this))
-        .on('clustermouseover', this.onClusterMouseOver)
+        .on('clustermouseover', this.onClusterMouseOver.bind(this))
         .on('clustermouseout', this.onClusterMouseOut)
         .on('click', this.onElementClick.bind(this))
     }
@@ -249,12 +249,20 @@ export class IotMapManager {
    * @param event - event data
    */
   private onElementClick (event) {
-    const element = event.layer
-    element.elementClicked() // informe cluster to open
-    if (this.selectedElement === element) {
-      this.unselectElement(element)
+    const element: IotMapDisplay = event.layer
+    if (this.config.map.externalClustering === true) {
+      if (element.isCluster()) {
+        element.elementClicked() // inform cluster to open
+      }
     } else {
-      this.selectElement(element)
+      if (this.selectedElement === element) {
+        this.unselectElement(element)
+      } else {
+        this.selectElement(element)
+        if (element.hasPopup()) {
+          this.shiftMap(element.getData().location)
+        }
+      }
     }
   }
 
@@ -264,6 +272,7 @@ export class IotMapManager {
    */
   private onClusterMouseOver (event) {
     event.layer.setZIndexOffset(100)
+    this.shiftMap(event.latlng)
   }
 
   /**
@@ -278,15 +287,19 @@ export class IotMapManager {
    * Called on marker mouse over (to brind manual cluster in front)
    * @param event - event data
    */
-  private onMarkerMouseOver (event) {
+  private onElementMouseOver (event) {
     event.layer.setZIndexOffset(100)
+
+    if (event.layer.isCluster()) {
+      this.shiftMap(event.layer.getData().location)
+    }
   }
 
   /**
    * Called on marker mouse out (to brind manual cluster in background)
    * @param event - event data
    */
-  private onMarkerMouseOut (event) {
+  private onElementMouseOut (event) {
     event.layer.setZIndexOffset(0)
   }
 
@@ -340,4 +353,36 @@ export class IotMapManager {
       elt.updateAccuracyDisplay(this.currentDisplayedLayers, this.accuracyDisplayed)
     }
   }
+
+  private shiftMap (currentPos: L.LatLngExpression): void {
+    const eltPos = this.map.latLngToLayerPoint(currentPos)
+    const mapBounds = this.map.getBounds()
+    const northEastPos = this.map.latLngToLayerPoint(mapBounds.getNorthEast())
+    const southWestPos = this.map.latLngToLayerPoint(mapBounds.getSouthWest())
+
+    // top
+    if (eltPos.y - northEastPos.y < 200) {
+      const shift = 200 - (eltPos.y - northEastPos.y)
+      northEastPos.y -= shift
+      southWestPos.y -= shift
+    }
+
+    // left
+    if (eltPos.x - southWestPos.x < 150) {
+      const shift = 150 - (eltPos.x - southWestPos.x)
+      northEastPos.x -= shift
+      southWestPos.x -= shift
+    }
+
+    // bottom - no need to shift
+    // right
+    if (northEastPos.x - eltPos.x < 150) {
+      const shift = 150 - (northEastPos.x - eltPos.x)
+      northEastPos.x += shift
+      southWestPos.x += shift
+    }
+
+    const newMapBounds = L.latLngBounds(this.map.layerPointToLatLng(southWestPos), this.map.layerPointToLatLng(northEastPos))
+    this.map.flyToBounds(newMapBounds)
+  }
 }

src/iotMapManager/src/iot-map-marker-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-marker.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *
@@ -51,6 +51,11 @@ export class IotMapMarker extends IotMapDisplay {
     this.selected = selected
     this.setIcon(getMarkerIcon(this.data, this.config, selected))
     this.setZIndexOffset((selected) ? 100 : 0)
+
+    // if (this.selected && this.data.popup !== undefined) {
+    //   // move map if marker is too close to the edge
+    //   this.shiftMap()
+    // }
   }
 
   public getData (): IotMarker {
@@ -109,4 +114,12 @@ export class IotMapMarker extends IotMapDisplay {
       this.map.getLayer(this.config.accuracyCircle.layerName).removeLayer(this.accuracyCircle)
     }
   }
+
+  public isCluster (): boolean {
+    return false
+  }
+
+  public hasPopup (): boolean {
+    return this.data.popup !== undefined
+  }
 }

src/iotMapManager/src/iot-map-path-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-path.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-types.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *
@@ -52,6 +52,12 @@ export abstract class IotMapDisplay extends L.Marker {
     // By default: Nothing to do
   }
 
+  hasPopup (): boolean {
+    return false
+  }
+
+  abstract isCluster (): boolean
+
   updateAccuracyDisplay (selectedLayers: string[], display: boolean): void { // eslint-disable-line @typescript-eslint/no-unused-vars
     // By default: Nothing to do
   }

src/iotMapManager/src/iot-map-user-marker-manager.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *

src/iotMapManager/src/iot-map-user-marker.ts

@@ -1,6 +1,6 @@
 /*
 * Software Name : IotMapManager
-* Version: 2.6.3
+* Version: 2.6.4
 * SPDX-FileCopyrightText: Copyright (c) 2020 Orange
 * SPDX-License-Identifier: MIT
 *
@@ -68,6 +68,10 @@ export class IotMapUserMarker extends IotMapDisplay {
     this.accuracyCircle.setLatLng(newLatLng)
   }
 
+  public isCluster (): boolean {
+    return false
+  }
+
   public updateAccuracyDisplay (selectedLayers: string[], display: boolean): void {
     this.layerDisplayed = selectedLayers.includes(this.config.userMarker.layerName)
     this.accuracityDisplayed = display