feat(Polyline): add IconSequences to Polylines

add icon sequences to AgmPolyline as child directives

fixes #721

Author: doom777

packages/core/core.module.ts

@@ -14,6 +14,7 @@ import {LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral} from './services/m
 import {MapsAPILoader} from './services/maps-api-loader/maps-api-loader';
 import {BROWSER_GLOBALS_PROVIDERS} from './utils/browser-globals';
 import {AgmFitBounds} from './directives/fit-bounds';
+import { AgmPolylineIcon } from './directives/polyline-icon';
 
 /**
  * @internal
@@ -22,7 +23,7 @@ export function coreDirectives() {
   return [
     AgmMap, AgmMarker, AgmInfoWindow, AgmCircle, AgmRectangle,
     AgmPolygon, AgmPolyline, AgmPolylinePoint, AgmKmlLayer,
-    AgmDataLayer, AgmFitBounds
+    AgmDataLayer, AgmFitBounds, AgmPolylineIcon
   ];
 }
 

packages/core/directives.ts

@@ -9,3 +9,4 @@ export {AgmPolygon} from './directives/polygon';
 export {AgmPolyline} from './directives/polyline';
 export {AgmPolylinePoint} from './directives/polyline-point';
 export {AgmFitBounds} from './directives/fit-bounds';
+export {AgmPolylineIcon} from './directives/polyline-icon';

packages/core/directives/polyline-icon.ts

@@ -0,0 +1,151 @@
+import { Directive, Input, OnInit } from '@angular/core';
+import { SymbolPath } from '../services/google-maps-types';
+
+/**
+ * AgmPolylineIcon enables to add polyline sequences to add arrows, circle,
+ * or custom icons either along the entire line, or in a specific part of it.
+ * See https://developers.google.com/maps/documentation/javascript/shapes#polyline_customize
+ *
+ * ### Example
+ * ```html
+ *    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+ *      <agm-polyline>
+ *          <agm-icon-sequence [fixedRotation]="true" [path]="'FORWARD_OPEN_ARROW'">
+ *          </agm-icon-sequence>
+ *      </agm-polyline>
+ *    </agm-map>
+ * ```
+ *
+ * @export
+ * @class AgmPolylineIcon
+ */
+@Directive({selector: 'agm-polyline agm-icon-sequence'})
+export class AgmPolylineIcon implements OnInit{
+
+  /**
+   * If `true`, each icon in the sequence has the same fixed rotation regardless of the
+   * angle of the edge on which it lies. Defaults to `false`, in which case each icon
+   * in the sequence is rotated to align with its edge.
+   *
+   * @type {boolean}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() fixedRotation: boolean;
+
+  /**
+   * The distance from the start of the line at which an icon is to be rendered. This
+   * distance may be expressed as a percentage of line's length (e.g. '50%') or in pixels
+   * (e.g. '50px'). Defaults to '100%'.
+   *
+   * @type {string}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() offset: string;
+
+  /**
+   * The distance between consecutive icons on the line. This distance may be expressed as
+   * a percentage of the line's length (e.g. '50%') or in pixels (e.g. '50px'). To disable
+   * repeating of the icon, specify '0'. Defaults to '0'.
+   *
+   * @type {string}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() repeat: string;
+
+  /**
+   * The x coordinate of the position of the symbol relative to the polyline. The coordinate
+   * of the symbol's path is translated _left_ by the anchor's x coordinate. By default, a
+   * symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the
+   * symbol's path.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() anchorX: number;
+
+  /**
+   * The y coordinate of the position of the symbol relative to the polyline. The coordinate
+   * of the symbol's path is translated _up_ by the anchor's y coordinate. By default, a
+   * symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the
+   * symbol's path.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() anchorY: number;
+
+  /**
+   * The symbol's fill color. All CSS3 colors are supported except for extended named
+   * colors. Defaults to the stroke color of the corresponding polyline.
+   *
+   * @type {string}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() fillColor: string;
+
+  /**
+   * The symbol's fill opacity. Defaults to 0.
+   */
+  @Input() fillOpacity: number;
+
+  /**
+   * The symbol's path, which is a built-in symbol path, or a custom path expressed using
+   * SVG path notation. Required.
+   *
+   * @type {SymbolPath}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() path: 'CIRCLE'|'BACKWARD_CLOSED_ARROW'|'BACKWARD_OPEN_ARROW'|'FORWARD_CLOSED_ARROW'|
+        'FORWARD_OPEN_ARROW' | string;
+
+  /**
+   * The angle by which to rotate the symbol, expressed clockwise in degrees.
+   * Defaults to 0. A symbol where `fixedRotation` is `false` is rotated relative to
+   * the angle of the edge on which it lies.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() rotation: number;
+
+  /**
+   * The amount by which the symbol is scaled in size. Defaults to the stroke weight
+   * of the polyline; after scaling, the symbol must lie inside a square 22 pixels in
+   * size centered at the symbol's anchor.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() scale: number;
+
+  /**
+   * The symbol's stroke color. All CSS3 colors are supported except for extended named
+   * colors. Defaults to the stroke color of the polyline.
+   *
+   * @type {string}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() strokeColor: string;
+
+  /**
+   * The symbol's stroke opacity. Defaults to the stroke opacity of the polyline.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() strokeOpacity: number;
+
+  /**
+   * The symbol's stroke weight. Defaults to the scale of the symbol.
+   *
+   * @type {number}
+   * @memberof AgmPolylineIcon
+   */
+  @Input() strokeWeight: number;
+
+  ngOnInit(): void {
+    if (this.path == null) {
+      throw new Error('Icon Sequence path is required');
+    }
+  }
+}

packages/core/directives/polyline-point.ts

@@ -3,7 +3,7 @@ import {LatLngLiteral} from '../../core/services/google-maps-types';
 
 /**
  * AgmPolylinePoint represents one element of a polyline within a  {@link
- * SembGoogleMapPolyline}
+ * AgmPolyline}
  */
 @Directive({selector: 'agm-polyline-point'})
 export class AgmPolylinePoint implements OnChanges {

packages/core/directives/polyline.ts

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs';
 import { PolyMouseEvent, LatLng } from '../services/google-maps-types';
 import { PolylineManager } from '../services/managers/polyline-manager';
 import { AgmPolylinePoint } from './polyline-point';
+import { AgmPolylineIcon } from './polyline-icon';
 
 let polylineId = 0;
 /**
@@ -153,6 +154,8 @@ export class AgmPolyline implements OnDestroy, OnChanges, AfterContentInit {
    */
   @ContentChildren(AgmPolylinePoint) points: QueryList<AgmPolylinePoint>;
 
+  @ContentChildren(AgmPolylineIcon) iconSequences: QueryList<AgmPolylineIcon>;
+
   private static _polylineOptionsAttributes: Array<string> = [
     'draggable', 'editable', 'visible', 'geodesic', 'strokeColor', 'strokeOpacity', 'strokeWeight',
     'zIndex'
@@ -176,9 +179,12 @@ export class AgmPolyline implements OnDestroy, OnChanges, AfterContentInit {
     if (!this._polylineAddedToManager) {
       this._init();
     }
-    const s = this.points.changes.subscribe(() => this._polylineManager.updatePolylinePoints(this));
-    this._subscriptions.push(s);
+    const pointSub = this.points.changes.subscribe(() => this._polylineManager.updatePolylinePoints(this));
+    this._subscriptions.push(pointSub);
     this._polylineManager.updatePolylinePoints(this);
+
+    const iconSub = this.iconSequences.changes.subscribe(() => this._polylineManager.updateIconSequences(this));
+    this._subscriptions.push(iconSub);
   }
 
   ngOnChanges(changes: SimpleChanges): any {
@@ -237,6 +243,13 @@ export class AgmPolyline implements OnDestroy, OnChanges, AfterContentInit {
     return [];
   }
 
+  _getIcons(): Array<AgmPolylineIcon> {
+    if (this.iconSequences) {
+      return this.iconSequences.toArray();
+    }
+    return [];
+  }
+
   /** @internal */
   id(): string { return this._id; }
 

packages/core/map-types.ts

@@ -8,7 +8,7 @@ export {
   LatLngBoundsLiteral,
   LatLngLiteral,
   PolyMouseEvent,
-  MarkerLabel
+  MarkerLabel,
 } from './services/google-maps-types';
 
 /**

packages/core/services/google-maps-types.ts

@@ -278,9 +278,9 @@ export interface Point {
 export interface GoogleSymbol {
   anchor?: Point;
   fillColor?: string;
-  fillOpacity?: string;
+  fillOpacity?: number;
   labelOrigin?: Point;
-  path?: string;
+  path?: string | SymbolPath;
   rotation?: number;
   scale?: number;
   strokeColor?: string;
@@ -295,6 +295,14 @@ export interface IconSequence {
   repeat?: string;
 }
 
+export enum SymbolPath {
+  BACKWARD_CLOSED_ARROW = 3,
+  BACKWARD_OPEN_ARROW = 4,
+  CIRCLE = 0,
+  FORWARD_CLOSED_ARROW = 1,
+  FORWARD_OPEN_ARROW = 2,
+}
+
 export interface PolylineOptions {
   clickable?: boolean;
   draggable?: boolean;