fix(routing): fix icone, padding, recherche textuelle, label (#388)

demo/src/app/geo/directions/directions.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 import { LanguageService } from '@igo2/core';
-import { IgoMap, LayerService } from '@igo2/geo';
+import { IgoMap, LayerService, MapService } from '@igo2/geo';
 
 @Component({
   selector: 'app-directions',
@@ -25,8 +25,10 @@ export class AppDirectionsComponent {
 
   constructor(
     private languageService: LanguageService,
-    private layerService: LayerService
+    private layerService: LayerService,
+    private mapService: MapService
   ) {
+    this.mapService.setMap(this.map);
     this.layerService
       .createAsyncLayer({
         title: 'Quebec Base Map',

packages/geo/src/lib/overlay/shared/overlay.utils.ts

@@ -70,7 +70,7 @@ function createOverlayDefaultStyle(): olstyle.Style {
  * Create a marker style for points
  * @returns Style
  */
-export function createOverlayMarkerStyle(color = 'blue'): olstyle.Style {
+export function createOverlayMarkerStyle(color = 'blue', text?): olstyle.Style {
   let iconColor;
   switch (color) {
     case 'blue':
@@ -90,6 +90,7 @@ export function createOverlayMarkerStyle(color = 'blue'): olstyle.Style {
       anchor: [0.5, 1]
     }),
     text: new olstyle.Text({
+      text,
       font: '12px Calibri,sans-serif',
       fill: new olstyle.Fill({ color: '#000' }),
       stroke: new olstyle.Stroke({ color: '#fff', width: 3 }),

packages/geo/src/lib/routing/routing-form/routing-form.component.html

@@ -14,14 +14,14 @@
             (focus)="focus(i)" (keyup)="keyup(i,$event)">
 
           <mat-autocomplete #auto="matAutocomplete">
-            <mat-optgroup *ngFor="let source of stop.value.stopProposals" [label]="source.source" [disabled]="source.disabled">
-              <mat-option *ngFor="let result of source.results" [value]="result.title" (onSelectionChange)="chooseProposal(result,i)">
-                {{ result.title }}
+            <mat-optgroup *ngFor="let source of stop.value.stopProposals" [label]="source.source.title" [disabled]="source.source.enabled === false">
+              <mat-option *ngFor="let result of source.results" [value]="result.meta ? result.meta.title : ''" (onSelectionChange)="chooseProposal(result,i)">
+                {{ result.meta ? result.meta.title : '' }}
               </mat-option>
             </mat-optgroup>
           </mat-autocomplete>
         </mat-form-field>
-        <button mat-button *ngIf="stop.value && (stop.value.stopPoint.length>0 || stop.value.stopProposals.length>0)" matSuffix mat-icon-button
+        <button mat-button *ngIf="stop.value && (stop.value.stopPoint.length > 0 || stop.value.stopProposals.length > 0)" matSuffix mat-icon-button
           aria-label="Clear" (click)="clearStop(i)">
           <mat-icon svgIcon="close"></mat-icon>
         </button>
@@ -50,15 +50,15 @@
     <button mat-icon-button tooltip-position="below" matTooltipShowDelay="500"
       [matTooltip]="'igo.geo.routingForm.zoomRoute' | translate"
       *ngIf="routesResults" color="primary" (click)="zoomRoute()">
-      <mat-icon svgIcon="zoom-in"></mat-icon>
+      <mat-icon svgIcon="magnify-plus-outline"></mat-icon>
     </button>
       <button mat-icon-button tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.geo.routingForm.addStop' | translate"
       color="primary" (click)="addStop()">
       <mat-icon svgIcon="map-marker-plus"></mat-icon>
     </button>
     <button mat-icon-button tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.geo.routingForm.resetRoutingBtn' | translate"
       *ngIf="routesResults" color="warn" (click)="resetForm()">
-      <mat-icon svgIcon="restore-page"></mat-icon>
+      <mat-icon svgIcon="file-restore"></mat-icon>
     </button>
     <button mat-icon-button *ngIf="routesResults" tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.geo.routingForm.copy' | translate"
       color="primary" (click)="copyDirectionsToClipboard()">
@@ -76,7 +76,7 @@
   <mat-form-field *ngIf="routesResults && routesResults.length > 1">
     <mat-select placeholder="{{'igo.geo.routingForm.drivingOptions' | translate}}" (selectionChange)="changeRoute($event)" [(ngModel)]="activeRoute">
       <mat-option *ngFor="let pathRouting of routesResults; let cnt = index;" [value]="pathRouting">
-        Option {{cnt + 1}} : {{this.formatDistance(pathRouting.distance)}} ({{this.formatDuration(pathRouting.duration)}})
+        Option {{cnt + 1}} : {{formatDistance(pathRouting.distance)}} ({{formatDuration(pathRouting.duration)}})
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -85,14 +85,14 @@
 
   <mat-list>
     <h3 mat-header>{{activeRoute.title}}</h3>
-    <h3 mat-subheader>{{this.formatDistance(activeRoute.distance)}}, {{this.formatDuration(activeRoute.duration)}}</h3>
+    <h3 mat-subheader>{{formatDistance(activeRoute.distance)}}, {{formatDuration(activeRoute.duration)}}</h3>
 
     <mat-list-item (mouseenter)="showSegment(step)" (click)="showSegment(step,true)" *ngFor="let step of activeRoute.steps; let cnt = index;"
       igoListItem>
-      <mat-icon [ngClass]="this.formatStep(step,cnt).cssClass" mat-list-icon svgIcon="{{this.formatStep(step,cnt).image}}"></mat-icon>
+      <mat-icon [ngClass]="formatStep(step,cnt).cssClass" mat-list-icon svgIcon="{{formatStep(step,cnt).image}}"></mat-icon>
 
-      <h4 mat-line (click)="showSegment(step,true)">{{cnt +1}}. {{this.formatStep(step,cnt).instruction}}</h4>
-      <h4 mat-line class="right">{{this.formatDistance(step.distance)}}</h4>
+      <h4 mat-line (click)="showSegment(step,true)">{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>
+      <h4 mat-line class="right">{{formatDistance(step.distance)}}</h4>
     </mat-list-item>
 
     <mat-divider></mat-divider>

packages/geo/src/lib/routing/routing-form/routing-form.component.scss

@@ -6,6 +6,18 @@ mat-form-field {
   height: auto;
 }
 
+form {
+  padding-top:  10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom:  10px;
+}
+
+h3 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .mat-line {
   word-wrap: break-word !important;
   white-space: pre-wrap !important;

packages/geo/src/lib/routing/routing-form/routing-form.component.ts

@@ -472,7 +472,7 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
   ) {
     let directiveFr;
     let directiveEn;
-    let image = 'arrow_forward';
+    let image = 'forward';
     let cssClass = 'rotate-270';
     const translatedDirection = this.translateBearing(direction);
     const translatedModifier = this.translateModifier(modifier);
@@ -487,27 +487,27 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     if (modifier === 'uturn') {
-      image = 'fast_forward';
+      image = 'forward';
       cssClass = 'rotate-90';
     } else if (modifier === 'sharp right') {
-      image = 'subdirectory_arrow_right';
+      image = 'subdirectory-arrow-right';
       cssClass = 'icon-flipped';
     } else if (modifier === 'right') {
-      image = 'subdirectory_arrow_right';
+      image = 'subdirectory-arrow-right';
       cssClass = 'icon-flipped';
     } else if (modifier === 'slight right') {
-      image = 'arrow_forward';
+      image = 'forward';
       cssClass = 'rotate-290';
     } else if (modifier === 'straight') {
-      image = 'arrow_forward';
+      image = 'forward';
     } else if (modifier === 'slight left') {
-      image = 'arrow_forward';
+      image = 'forward';
       cssClass = 'rotate-250';
     } else if (modifier === 'left') {
-      image = 'subdirectory_arrow_left';
+      image = 'subdirectory-arrow-left';
       cssClass = 'icon-flipped';
     } else if (modifier === 'sharp left') {
-      image = 'subdirectory_arrow_left';
+      image = 'subdirectory-arrow-left';
       cssClass = 'icon-flipped';
     }
 
@@ -526,13 +526,13 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
       directiveFr =
         'Continuer en direction ' + translatedDirection + ' sur ' + route;
       directiveEn = 'Head ' + translatedDirection + ' on ' + route;
-      image = 'explore';
+      image = 'compass';
       cssClass = '';
     } else if (type === 'depart') {
       directiveFr =
         'Aller en direction ' + translatedDirection + ' sur ' + route;
       directiveEn = 'Head ' + translatedDirection + ' on ' + route;
-      image = 'explore';
+      image = 'compass';
       cssClass = '';
     } else if (type === 'arrive') {
       if (lastStep) {
@@ -548,13 +548,13 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
       } else {
         directiveFr = 'Vous atteignez le point intermédiare sur ' + route;
         directiveEn = 'You have reached the intermediate stop onto ' + route;
-        image = 'location_on';
+        image = 'map-marker';
         cssClass = '';
       }
     } else if (type === 'merge') {
       directiveFr = 'Continuer sur ' + route;
       directiveEn = 'Continue on ' + route;
-      image = 'arrow_forward';
+      image = 'forward';
       cssClass = 'rotate-270';
     } else if (type === 'on ramp') {
       directiveFr = "Prendre l'entrée d'autoroute " + frAggregatedDirection;
@@ -584,7 +584,7 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
     } else if (type === 'continue' && modifier !== 'uturn') {
       directiveFr = 'Continuer sur ' + route;
       directiveEn = 'Continue on ' + route;
-      image = 'arrow_forward';
+      image = 'forward';
       cssClass = 'rotate-270';
     } else if (type === 'roundabout') {
       directiveFr = 'Au rond-point, prendre la ' + exit;
@@ -593,22 +593,22 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
       directiveEn = 'At the roundabout, take the ' + exit;
       directiveEn += exit === 1 ? 'st' : 'rd';
       directiveEn += ' exit towards ' + route;
-      image = 'donut_large';
+      image = 'chart-donut';
       cssClass = '';
     } else if (type === 'rotary') {
       directiveFr = 'Rond-point rotary....';
       directiveEn = 'Roundabout rotary....';
-      image = 'donut_large';
+      image = 'chart-donut';
       cssClass = '';
     } else if (type === 'roundabout turn') {
       directiveFr = 'Rond-point, prendre la ...';
       directiveEn = 'Roundabout, take the ...';
-      image = 'donut_large';
+      image = 'chart-donut';
       cssClass = '';
     } else if (type === 'exit roundabout') {
       directiveFr = 'Poursuivre vers ' + route;
       directiveEn = 'Continue to ' + route;
-      image = 'arrow_forward';
+      image = 'forward';
       cssClass = 'rotate-270';
     } else if (type === 'notification') {
       directiveFr = 'notification ....';
@@ -627,11 +627,11 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     if (lastStep) {
-      image = 'flag';
+      image = 'flag-variant';
       cssClass = '';
     }
     if (stepPosition === 0) {
-      image = 'explore';
+      image = 'compass';
       cssClass = '';
     }
 
@@ -936,6 +936,7 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
                 ) {
                   searchProposals.push({
                     source: element.source,
+                    meta: element.meta,
                     results: results.map(r => r.data)
                   });
                 }
@@ -1100,8 +1101,7 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
     if (geometry.getType() === 'Point') {
-      const olStyle = createOverlayMarkerStyle(stopColor);
-      // stopText
+      const olStyle = createOverlayMarkerStyle(stopColor, stopText);
       feature.setStyle(olStyle);
     }
     this.routingStopsOverlayDataSource.ol.addFeature(feature);