Close #1235 markers: add "rotation" option

mistic100 · Feb 13, 2024 · f382d5f · f382d5f
1 parent a5da3a0
commit f382d5f
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 1 deletion.
diff --git a/docs/plugins/markers.md b/docs/plugins/markers.md
@@ -340,6 +340,14 @@ Size of the marker in pixels.
 
 _(This option is ignored for polygons and polylines)._
 
+#### `rotation`
+
+-   type: `string | number`
+
+Rotation applied to the marker, in degrees or radians.
+
+_(This option is ignored for polygons and polylines)._
+
 #### `orientation` (only for `imageLayer`, `videoLayer`)
 
 -   type: `'front' | 'horizontal' | 'vertical-left' | 'vertical-right'`

diff --git a/packages/markers-plugin/src/markers/AbstractStandardMarker.ts b/packages/markers-plugin/src/markers/AbstractStandardMarker.ts
@@ -101,6 +101,10 @@ export abstract class AbstractStandardMarker extends AbstractDomMarker {
                 ...this.config.hoverScale,
             };
         }
+
+        if (!utils.isNil(this.config.rotation)) {
+            element.style.rotate = MathUtils.radToDeg(this.config.rotation) + 'deg';
+        }
     }
 
     /**

diff --git a/packages/markers-plugin/src/markers/Marker.ts b/packages/markers-plugin/src/markers/Marker.ts
@@ -159,6 +159,9 @@ export abstract class Marker {
         if (utils.isNil(this.config.opacity)) {
             this.config.opacity = 1;
         }
+        if (!utils.isNil(this.config.rotation)) {
+            this.config.rotation = utils.parseAngle(this.config.rotation);
+        }
 
         this.state.anchor = utils.parsePoint(this.config.anchor);
     }

diff --git a/packages/markers-plugin/src/markers/Marker3D.ts b/packages/markers-plugin/src/markers/Marker3D.ts
@@ -106,6 +106,7 @@ export class Marker3D extends Marker {
             this.state.size = this.config.size;
 
             mesh.position.set(0.5 - this.state.anchor.x, this.state.anchor.y - 0.5, 0);
+            mesh.rotation.set(0, 0, -this.config.rotation ?? 0);
             this.viewer.dataHelper.sphericalCoordsToVector3(this.state.position, group.position);
 
             group.lookAt(0, group.position.y, 0);

diff --git a/packages/markers-plugin/src/model.ts b/packages/markers-plugin/src/model.ts
@@ -94,6 +94,10 @@ export type MarkerConfig = {
      * Size of the marker (required for `image`, recommended for `html`, ignored for others)
      */
     size?: Size;
+    /**
+     * Rotation applied to the marker (ignored for `polygon` and `polyline`)
+     */
+    rotation?: string | number;
     /**
      * Applies a perspective on the image to make it look like placed on the floor or on a wall (only for `imageLayer`)
      */
@@ -185,7 +189,8 @@ export type MarkerConfig = {
     data?: any;
 };
 
-export type ParsedMarkerConfig = Omit<MarkerConfig, 'scale' | 'tooltip' | 'hoverScale'> & {
+export type ParsedMarkerConfig = Omit<MarkerConfig, 'rotation' | 'scale' | 'tooltip' | 'hoverScale'> & {
+    rotation?: number;
     scale?:
         | { zoom?: [number, number]; yaw?: [number, number] }
         | ((zoomLevel: number, position: Position) => number);