How to alternate color of polyline with angular 2 using agm-map & agm-polyline?

Question

I am using agm map in my angular 2 vehicle tracking application.And here i am using agm-map to display the map.I have a component named Playback Component which denotes, the user can view the vehicle travelled from particular date and time to another particular date and time.And everything works fine as of now.Here i need to give an option along with date and time called as Max speed, which means user can view in the map in which places of travel the vehicle gone above the user entered max speed (say user gives max speed as 50 and those travel point alone should be highlighted in red color).

I have tried with the following,

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeControl]="true">
        <agm-marker [latitude]="latlngMarker.latitude" [longitude]="latlngMarker.longitude">
        </agm-marker>
        <agm-polyline  [strokeColor]="'#2196f3'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed < maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
        <agm-polyline  [strokeColor]="'red'">
            <ng-container *ngFor="let i of latlng">
            <agm-polyline-point *ngIf = "i.speed > maxSpeed " [latitude]="i.latitude" [longitude]="i.longitude">
            </agm-polyline-point>
        </ng-container>
        </agm-polyline>
    </agm-map>

And the result is as like in the image.

But the thing i am want is like this image,

This image shows the red colored travel points along with blue color points, where the vehicle travelled more than max speed and i am also need the output as like in this second image.Kindly help me to achieve the desired result using agm map poly point.

Answer 1

to achieve this,I propose you 2 logics:

1)

first logic is to create polyline for every 2 points in your data and set its color depending the data speed property:

Poyline(array(0), array(1)) , Polyline(array(1), array(2)), ...Poyline(array(i), array(i+1)) 

and check the maxSpeed for array(i) to set the color:

code (I changed the item to point, and i for index):

<agm-polyline *ngFor="let point of latLng;let i = index;"  [strokeColor]="point.speed < 50 ? '#2196f3': 'red'">
      <agm-polyline-point [latitude]="point.latitude" [longitude]="point.longitude">
      </agm-polyline-point>
      <ng-container *ngIf="polyline[i+1]">
        <agm-polyline-point [latitude]="polyline[i+1].latitude" [longitude]="polyline[i+1].longitude">
        </agm-polyline-point>
      </ng-container>
  </agm-polyline>

plunker demonstring this: https://embed.plnkr.co/keExxn/

2)

second idea is to separate your polyline's array depending the speed, to multiple polyline's array. So the final array could looks like:

let polylines = [
    {path: [item1, item2], color: 'red'},
    {path: [item3, item4, item5, item6, item7], color: '#2196f3'},
    ...
]

So from your main data, just create a function to change the data to like this final data.

and in the html:

  <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
     <ng-container>
       <agm-polyline *ngFor="let polyline of polylines;let i = index;"  [strokeColor]="polyline.color">
          <agm-polyline-point *ngFor="let point of polyline.path" [latitude]="point.latitude" [longitude]="point.longitude">
          </agm-polyline-point>
      </agm-polyline>
    </ng-container>
  </agm-map>

You can take a look on this plnker to start: https://embed.plnkr.co/u82rKd/