Prototyping a rotate map

package.json

@@ -56,12 +56,12 @@
     "@angular/platform-browser-dynamic": "^11.0.5",
     "@angular/router": "^11.0.5",
     "@storybook/addon-knobs": "^6.1.0",
-    "@types/leaflet": "^1.5.19",
-    "@types/leaflet.markercluster": "^1.4.3",
+    "@types/leaflet": "^1.7.6",
+    "@types/leaflet.markercluster": "^1.4.6",
     "boosted": "^4.6.0",
     "iotmapmanager": "^2.6.6",
-    "leaflet": "^1.6.0",
-    "leaflet.markercluster": "^1.4.1",
+    "leaflet": "^1.7.1",
+    "leaflet.markercluster": "^1.5.3",
     "zone.js": "^0.11.3"
   }
 }

src/iotMapManager/css/map.css

@@ -43,4 +43,3 @@
   color: black;
 }
 
-

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

@@ -27,6 +27,7 @@ export class IotMapConfig {
     externalClustering: false,
     layerControl: true,
     exclusiveLayers: false,
+    bearing: 0,
 
     // *** Private conf: not modified by SetConfig ***
     geoportailLayer: 'https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
@@ -391,6 +392,9 @@ export class IotMapConfig {
       if (newConfig.map.exclusiveLayers !== undefined) {
         this.map.exclusiveLayers = newConfig.map.exclusiveLayers
       }
+      if (newConfig.map.bearing !== undefined) {
+        this.map.bearing = newConfig.map.bearing
+      }
     }
 
     /*

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

@@ -14,9 +14,11 @@
 
 import * as L from 'leaflet'
 import 'leaflet.markercluster'
+
 import { IotMapConfig } from './iot-map-config'
 import { IotMapDisplay } from './iot-map-types'
 import { getAutomaticClusterIcon } from './iot-map-icons'
+import { TileLayer } from 'leaflet'
 
 export class IotMapManager {
   private map: L.Map
@@ -33,6 +35,10 @@ export class IotMapManager {
   private accuracyDisplayed = true
   private currentDisplayedLayers: string[] = []
 
+  private tile: TileLayer;
+
+  private pic: L.ImageOverlay
+
   /**
    * Constructor
    * @param config - config to use for map display
@@ -46,6 +52,7 @@ export class IotMapManager {
   // ------------------------------------------------------------------------------------------------------------------
   // handler for 'moveend'
   public onMove?: () => void
+  public onMoveStart?: (e) => void
 
   // handler for 'click' on markers
   public onEltClick?: (id: string) => void
@@ -57,24 +64,69 @@ export class IotMapManager {
    */
   public init (selector: string): void {
     // init map
-    this.map = L.map(selector).setView(L.latLng(this.config.map.defaultLat, this.config.map.defaultLng),
+    this.map = L.map(selector, { rotate: true, maxZoom: 22, maxNativeZoom: 19 }).setView(L.latLng(this.config.map.defaultLat, this.config.map.defaultLng),
       this.config.map.defaultZoomLevel)
 
     // init base layers
-    L.tileLayer(this.config.map.openStreetMapLayer,
+    this.tile = L.tileLayer(this.config.map.openStreetMapLayer,
       { attribution: '&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
-      .addTo(this.map)
+    this.tile.addTo(this.map)
+
     if (this.config.map.layerControl) {
       this.layerControl = L.control.layers(this.baseLayers, this.markersLayers).addTo(this.map)
     }
 
     this.map.on('moveend', this.onMove)
+      .on('movestart', this.onMoveStart)
       .on('baselayerchange', this.onBaseLayerChange.bind(this))
-      .on('overlayadd', this.onOverlayAdd.bind(this))
-      .on('overlayremove', this.onOverlayRemove.bind(this))
       .on('click', this.onClick.bind(this))
 
     this.selectedElement = undefined
+
+    // set bearing
+    this.map.setBearing(this.config.map.bearing)
+  }
+
+  public displayOverlayImage (image: string, bearing: number, bottomLeft: L.Point, topRight: L.Point): void {
+    const bl = this.map.project([bottomLeft.x, bottomLeft.y])
+    const tr = this.map.project([topRight.x, topRight.y])
+    const dLat = Math.abs(bl.x - tr.x)
+    const dLng = Math.abs(bl.y - tr.y)
+    const dCarte = Math.sqrt(Math.pow(dLat, 2) + Math.pow(dLng, 2))
+
+    // sur le plan
+    // getImagesize : l = 2808, L = 536
+    const imgLength = 2808
+    const imgWidth = 536
+    const dPlan = Math.sqrt(Math.pow(imgLength, 2) + Math.pow(imgWidth, 2))
+
+    // rapport
+    const ratio = dCarte / dPlan
+
+    // destination
+    const pxDest = new L.Point(tr.x + imgLength * ratio, tr.y - imgWidth * ratio)
+    const pxDestUnProject = this.map.unproject(pxDest)
+
+    const img = new Image()
+    img.src = '../assets/plan.png'
+    img.onload = function () {
+      const imageUrl = '../assets/plan.png'
+      const imageBounds = new L.LatLngBounds(
+        L.latLng(topRight.x, topRight.y),
+        pxDestUnProject
+      )
+
+      this.pic = L.imageOverlay(imageUrl, imageBounds).addTo(this.map)
+      this.pic.getElement().classList.add('iotmap-imgOverlay')
+      this.pic.getElement().style.transform = this.pic.getElement().style.transform.replace(/ rotate\(.+\)/, '')
+      this.pic.getElement().style.transform += ' rotate(' + (-bearing) + 'deg)'
+    }.bind(this)
+  }
+
+  public removeOverlayImage (): void {
+    if (this.pic) {
+      this.pic.removeFrom(this.map)
+    }
   }
 
   /**
@@ -258,7 +310,9 @@ export class IotMapManager {
     }
 
     element.elementClicked() // inform cluster to open
-    element.shiftMap()
+    // element.shiftMap()
+
+    this.map.fitBounds(this.map.getBounds())
   }
 
   /**
@@ -312,27 +366,6 @@ export class IotMapManager {
     }
   }
 
-  private onOverlayAdd (event) {
-    if (event.name === this.config.accuracyCircle.layerName) {
-      this.accuracyDisplayed = true
-    } else {
-      this.currentDisplayedLayers.push(event.name)
-    }
-    this.updateAccuracy()
-  }
-
-  private onOverlayRemove (event) {
-    if (event.name === this.config.accuracyCircle.layerName) {
-      this.accuracyDisplayed = false
-    } else {
-      const index = this.currentDisplayedLayers.indexOf(event.name, 0)
-      if (index > -1) {
-        this.currentDisplayedLayers.splice(index, 1)
-      }
-    }
-    this.updateAccuracy()
-  }
-
   private onClick () {
     this.changeSelectionStatus(this.selectedElement, false)
   }

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

@@ -122,18 +122,24 @@ export class IotMapMarker extends IotMapDisplay {
       const northEastPos = this.map.getIotMap().latLngToLayerPoint(mapBounds.getNorthEast())
       const southWestPos = this.map.getIotMap().latLngToLayerPoint(mapBounds.getSouthWest())
 
+      let needToshift = false
+
       // top
       if (eltPos.y - northEastPos.y < 200) {
         const shift = 200 - (eltPos.y - northEastPos.y)
         northEastPos.y -= shift
         southWestPos.y -= shift
+
+        needToshift = true
       }
 
       // left
       if (eltPos.x - southWestPos.x < 150) {
         const shift = 150 - (eltPos.x - southWestPos.x)
         northEastPos.x -= shift
         southWestPos.x -= shift
+
+        needToshift = true
       }
 
       // bottom - no need to shift
@@ -142,10 +148,14 @@ export class IotMapMarker extends IotMapDisplay {
         const shift = 150 - (northEastPos.x - eltPos.x)
         northEastPos.x += shift
         southWestPos.x += shift
+
+        needToshift = true
       }
 
-      const newMapBounds = L.latLngBounds(this.map.getIotMap().layerPointToLatLng(southWestPos), this.map.getIotMap().layerPointToLatLng(northEastPos))
-      this.map.getIotMap().flyToBounds(newMapBounds)
+      if (needToshift) {
+        const newMapBounds = L.latLngBounds(this.map.getIotMap().layerPointToLatLng(southWestPos), this.map.getIotMap().layerPointToLatLng(northEastPos))
+        this.map.getIotMap().flyToBounds(newMapBounds)
+      }
     }
   }
 }

src/map/map.component.css

@@ -1,6 +1,6 @@
 #iotMap {
   width: 1200px;
-  height: 700px;
+  height: 600px;
 }