feat(Marker): add pitch/rotation alignment options to the Marker comp…

…onent. (#226)

projects/ngx-mapbox-gl/src/lib/map/map.service.ts

@@ -3,6 +3,7 @@ import * as MapboxGl from 'mapbox-gl';
 import { AsyncSubject, Observable, Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { MapEvent, MapImageData, MapImageOptions } from './map.types';
+import { Alignment } from 'mapbox-gl';
 
 export const MAPBOX_API_KEY = new InjectionToken('MapboxApiKey');
 
@@ -37,6 +38,8 @@ export interface SetupPopup {
 
 export interface SetupMarker {
   markersOptions: {
+    pitchAlignment?: Alignment;
+    rotationAlignment?: Alignment;
     offset?: MapboxGl.PointLike;
     anchor?: MapboxGl.Anchor;
     draggable?: boolean;
@@ -257,7 +260,9 @@ export class MapService {
     const options: MapboxGl.MarkerOptions = {
       offset: marker.markersOptions.offset,
       anchor: marker.markersOptions.anchor,
-      draggable: !!marker.markersOptions.draggable
+      draggable: !!marker.markersOptions.draggable,
+      rotationAlignment: marker.markersOptions.rotationAlignment,
+      pitchAlignment: marker.markersOptions.pitchAlignment
     };
     if (marker.markersOptions.element.childNodes.length > 0) {
       options.element = marker.markersOptions.element;

projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts

@@ -13,7 +13,7 @@ import {
   ViewEncapsulation,
   EventEmitter
 } from '@angular/core';
-import { LngLatLike, Marker, PointLike, Anchor } from 'mapbox-gl';
+import { LngLatLike, Marker, PointLike, Anchor, Alignment } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 
 @Component({
@@ -33,6 +33,8 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
   @Input() draggable?: boolean;
   @Input() popupShown?: boolean;
   @Input() className: string;
+  @Input() pitchAlignment?: Alignment;
+  @Input() rotationAlignment?: Alignment;
 
   @Output() dragStart = new EventEmitter<Marker>();
   @Output() drag = new EventEmitter<Marker>();
@@ -65,6 +67,12 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
         ? this.markerInstance!.getPopup().addTo(this.MapService.mapInstance)
         : this.markerInstance!.getPopup().remove();
     }
+    if (changes.pitchAlignment && !changes.pitchAlignment.isFirstChange()) {
+      this.markerInstance!.setPitchAlignment(changes.pitchAlignment.currentValue);
+    }
+    if (changes.rotationAlignment && !changes.rotationAlignment.isFirstChange()) {
+      this.markerInstance!.setRotationAlignment(changes.rotationAlignment.currentValue);
+    }
   }
 
   ngAfterViewInit() {
@@ -73,6 +81,8 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
         markersOptions: {
           offset: this.offset,
           anchor: this.anchor,
+          pitchAlignment: this.pitchAlignment,
+          rotationAlignment: this.rotationAlignment,
           draggable: !!this.draggable,
           element: this.content.nativeElement,
           feature: this.feature,

projects/showcase/src/app/demo/demo.module.ts

@@ -49,6 +49,7 @@ import { ToggleLayersComponent } from './examples/toggle-layers.component';
 import { ZoomtoLinestringComponent } from './examples/zoomto-linestring.component';
 import { StackblitzEditGuard } from './stackblitz-edit/stackblitz-edit-guard.service';
 import { StackblitzEditComponent } from './stackblitz-edit/stackblitz-edit.component';
+import { MarkerAlignmentComponent } from './examples/marker-alignment.component';
 
 export enum Category {
   STYLES = 'Styles',
@@ -253,6 +254,11 @@ export const DEMO_ROUTES: Routes = [
         component: CustomLocaleComponent,
         data: { label: 'Add custom localization for controls', cat: Category.CONTROLS_AND_OVERLAYS }
       },
+      {
+        path: 'marker-alignment',
+        component: MarkerAlignmentComponent,
+        data: { label: 'Marker alignment options', cat: Category.CAMERA }
+      },
       { path: '**', redirectTo: 'display-map' }
     ]
   }
@@ -313,7 +319,8 @@ export const DEMO_ROUTES: Routes = [
     ClusterPopupComponent,
     AddImageMissingGeneratedComponent,
     CustomAttributionComponent,
-    CustomLocaleComponent
+    CustomLocaleComponent,
+    MarkerAlignmentComponent
   ]
 })
 export class DemoModule {}

projects/showcase/src/app/demo/examples/marker-alignment.component.css

@@ -0,0 +1,5 @@
+.arrow {
+  width: 50px;
+  height: 50px;
+  transform: rotate(-97deg);
+}

projects/showcase/src/app/demo/examples/marker-alignment.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'showcase-demo',
+  template: `
+    <mgl-map
+      [interactive]="false"
+      movingMethod="jumpTo"
+      [style]="'mapbox://styles/mapbox/streets-v9'"
+      [pitch]="[pitch]"
+      [bearing]="[bearing]"
+      [zoom]="[17]"
+      [center]="[4.577979, 51.038189]"
+    >
+      <mgl-marker [lngLat]="[4.577979, 51.03816]" rotationAlignment="map" pitchAlignment="map">
+        <div class="arrow">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434 437">
+            <polygon points="37.5 437.18 218 350.75 217.49 -0.37 37.5 437.18" style="fill:#579120" />
+            <polygon points="397.55 437.13 218 350.75 217.49 -0.37 397.55 437.13" style="fill:#6fad2d" />
+            <polygon points="217.22 391.46 397.55 437.13 218 350.75 37.5 437.18 217.22 391.46" style="fill:#315112" />
+          </svg>
+        </div>
+      </mgl-marker>
+    </mgl-map>
+  `,
+  styleUrls: ['./examples.css', './marker-alignment.component.css']
+})
+export class MarkerAlignmentComponent implements OnInit {
+  pitch = 50;
+  bearing = -97;
+  ngOnInit(): void {
+    let angle = 0;
+    setInterval(() => {
+      angle += 0.01;
+      if (angle === 1) {
+        angle = 0;
+      }
+      this.pitch = 45 + 15 * Math.cos(angle);
+      this.bearing = -103 + 20 * Math.sin(angle);
+    }, 20);
+  }
+}