Prototyping a rotate map

[julien-deramond]

Linked to #113

How to test this branch

git clone [email protected]:Orange-OpenSource/IOT-Map-Component.git
cd IOT-Map-Component
git checkout rotateMap
nvm use 14
npm i

git clone [email protected]:Leaflet/Leaflet.git
git checkout rotate
npm i
npm run build

Go back to IOT-Map-Component directory

mkdir node_modules/leaflet-rotate
cp -R {leaflet-repo-directory}/* node_modules/leaflet-rotate/

⚠️ Then modify some files otherwise it won't compile and/or run:

diff --git a/src/iotMapManager/src/iot-map-icons.ts b/src/iotMapManager/src/iot-map-icons.ts
index ad5d5b2..3acc2de 100644
--- a/src/iotMapManager/src/iot-map-icons.ts
+++ b/src/iotMapManager/src/iot-map-icons.ts
@@ -18,15 +18,6 @@ import { IotMapConfig } from './iot-map-config'
 import * as commonSvg from './iot-map-common-svg'
 import { IotMapMarker } from './iot-map-marker'
 
-import cluShadow from '../img/CLU_Shadow.png'
-import mobCirShadow from '../img/MOB_CIR_Shadow.png'
-import mobCirSelShadow from '../img/MOB_CIR_SEL_Shadow.png'
-import mobCirPinShadow from '../img/MOB_CIR_PIN_Shadow.png'
-import poiSqrShadow from '../img/POI_SQR_Shadow.png'
-import poiSqrSelShadow from '../img/POI_SQR_SEL_Shadow.png'
-import poiSqrPinShadow from '../img/POI_SQR_PIN_Shadow.png'
-import usrShadow from '../img/USR_Shadow.png'
-
 /* eslint-disable quotes */
 /**
  * Returns a DivIcon compatible with leaflet, representing all marker information (shape, tab, popup, size...)
@@ -55,7 +46,7 @@ export function getManualClusterIcon (cluster: IotCluster, config: IotMapConfig)
   const svgGauge = computeClusterGauge(cluster, config)
 
   // shadow
-  const imgShadow = `<img class='iotmap-clusterShadow' src='${cluShadow}'/>`
+  const imgShadow = `<img class='iotmap-clusterShadow' src='../img/CLU_Shadow.png'/>`
 
   // label
   let innerLabel: string
@@ -179,7 +170,7 @@ export function getUserMarkerIcon (userMarker: IotUserMarker, config: IotMapConf
   const arrowConfig = config.userMarker.arrow
 
   // shadow file
-  const imgShadow = `<img class='iotmap-usermarkershadow' src='${usrShadow}'/>`
+  const imgShadow = `<img class='iotmap-usermarkershadow' src='../img/USR_Shadow.png'/>`
 
   let html = `<div class='iotmap-usermarkericon'>`
   if (userMarker.direction !== undefined) {
@@ -414,22 +405,22 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
       svgBG = svg.selFunBg
     }
     if (marker.shape.type === ShapeType.circle) {
-      shadowFile = mobCirSelShadow
+      shadowFile = '../img/MOB_CIR_SEL_Shadow.png'
       shadowClass = 'iotmap-selected-circle-shadow'
     } else {
-      shadowFile = poiSqrSelShadow
+      shadowFile = '../img/POI_SQR_SEL_Shadow.png'
       shadowClass = 'iotmap-selected-square-shadow'
     }
   } else if (marker.shape.type === ShapeType.circle) {
     if (marker.shape.anchored) {
       svgBorder = svg.pinBorder
       svgShape = `<path ${svg.pinStdColour} fill='${funColor}'/>`
-      shadowFile = mobCirPinShadow
+      shadowFile = '../img/MOB_CIR_PIN_Shadow.png'
       shadowClass = 'iotmap-circle-pin-shadow'
     } else {
       svgBorder = svg.border
       svgShape = `<circle ${svg.stdColour} fill='${funColor}'/>`
-      shadowFile = mobCirShadow
+      shadowFile = '../img/MOB_CIR_Shadow.png'
       shadowClass = 'iotmap-circle-shadow'
     }
   } else if (marker.shape.type === ShapeType.square) {
@@ -442,7 +433,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
         svgShape = `<path ${svg.pinFunColour} fill='${funColor}'/>`
         svgBG = svg.pinFunBg
       }
-      shadowFile = poiSqrPinShadow
+      shadowFile = '../img/POI_SQR_PIN_Shadow.png'
       shadowClass = 'iotmap-square-pin-shadow'
     } else {
       if (marker.shape.plain) {
@@ -453,7 +444,7 @@ function getMarkerDivIcon (marker: IotMarker, config: IotMapConfig, selected: bo
         svgShape = `<rect ${svg.funColour} fill='${funColor}'/>`
         svgBG = svg.funBg
       }
-      shadowFile = poiSqrShadow
+      shadowFile = '../img/POI_SQR_Shadow.png'
       shadowClass = 'iotmap-square-shadow'
     }
   }
diff --git a/src/iotMapManager/src/iot-map-manager.ts b/src/iotMapManager/src/iot-map-manager.ts
index 36d8789..6bf4330 100644
--- a/src/iotMapManager/src/iot-map-manager.ts
+++ b/src/iotMapManager/src/iot-map-manager.ts
@@ -12,7 +12,7 @@
 * Software description: provide markers, tabs, clusters and paths dedicated to iot projects using mapping
 */
 
-import * as L from 'leaflet'
+import * as L from 'leaflet-rotate'
 import 'leaflet.markercluster'
 
 import { IotMapConfig } from './iot-map-config'
diff --git a/src/styles.css b/src/styles.css
index fe2920f..4cacf07 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,7 +2,6 @@
 @import '~iotmapmanager/iot-map-manager.css';
 @import "~boosted/dist/css/boosted.min.css";
 
-@import 'assets/fonts/iotmap-icons.css';

[julien-deramond]

Note: Rotation there is but it is a simple rotation of the <div> so the texts are also rotated.
It can gives things like that:

[julien-deramond]

Closing it as the prototype won't end up as a real PR