feat(routing): add routing on osrm (#166)

demo/src/app/app.component.html

@@ -29,6 +29,7 @@ <h1>{{title}}</h1>
         <a mat-list-item routerLink="catalog">Catalog</a>
         <a mat-list-item routerLink="search">Search</a>
         <a mat-list-item routerLink="print">Print</a>
+        <a mat-list-item routerLink="directions">Directions</a>
         <a mat-list-item routerLink="time-filter">Time filter</a>
         <a mat-list-item routerLink="ogc-filter">OGC filter</a>
 

demo/src/app/app.module.ts

@@ -26,6 +26,7 @@ import { AppQueryModule } from './geo/query/query.module';
 import { AppCatalogModule } from './geo/catalog/catalog.module';
 import { AppSearchModule } from './geo/search/search.module';
 import { AppPrintModule } from './geo/print/print.module';
+import { AppDirectionsModule } from './geo/directions/directions.module';
 import { AppTimeFilterModule } from './geo/time-filter/time-filter.module';
 import { AppOgcFilterModule } from './geo/ogc-filter/ogc-filter.module';
 
@@ -62,6 +63,7 @@ import { AppComponent } from './app.component';
     AppCatalogModule,
     AppSearchModule,
     AppPrintModule,
+    AppDirectionsModule,
     AppTimeFilterModule,
     AppOgcFilterModule,
 

demo/src/app/geo/directions/directions-routing.module.ts

@@ -0,0 +1,15 @@
+import { Routes, RouterModule } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+
+import { AppDirectionsComponent } from './directions.component';
+
+const routes: Routes = [
+  {
+    path: 'directions',
+    component: AppDirectionsComponent
+  }
+];
+
+export const AppDirectionsRoutingModule: ModuleWithProviders = RouterModule.forChild(
+  routes
+);

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

@@ -0,0 +1,19 @@
+<mat-card>
+  <mat-card-subtitle>Geo</mat-card-subtitle>
+  <mat-card-title>Directions</mat-card-title>
+  <mat-card-content>
+    <li>Dependencies: LanguageService</li>
+
+    <br>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/directions">code of this example</a>
+    <hr>
+  </mat-card-content>
+
+  <igo-map-browser [map]="map" [view]="view">
+    <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
+    <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+  </igo-map-browser>
+
+  <igo-routing-form [map]="map"></igo-routing-form>
+
+</mat-card>

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

@@ -0,0 +1,4 @@
+igo-map-browser {
+  width: 800px;
+  height: 300px;
+}

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+import { LanguageService } from '@igo2/core';
+import { IgoMap, LayerService } from '@igo2/geo';
+
+@Component({
+  selector: 'app-directions',
+  templateUrl: './directions.component.html',
+  styleUrls: ['./directions.component.scss']
+})
+export class AppDirectionsComponent {
+  public map = new IgoMap({
+    controls: {
+      attribution: {
+        collapsed: true
+      }
+    }
+  });
+
+  public view = {
+    center: [-73, 47.2],
+    zoom: 9
+  };
+
+  constructor(
+    private languageService: LanguageService,
+    private layerService: LayerService
+  ) {
+    this.layerService
+      .createAsyncLayer({
+        title: 'Quebec Base Map',
+        sourceOptions: {
+          type: 'wmts',
+          url: '/carto/wmts/1.0.0/wmts',
+          layer: 'carte_gouv_qc_ro',
+          matrixSet: 'EPSG_3857',
+          version: '1.3.0'
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+  }
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { MatCardModule, MatButtonModule } from '@angular/material';
+
+import { IgoMessageModule } from '@igo2/core';
+import {
+  IgoMapModule,
+  IgoRoutingModule,
+  provideOsrmRoutingSource
+} from '@igo2/geo';
+
+import { AppDirectionsComponent } from './directions.component';
+import { AppDirectionsRoutingModule } from './directions-routing.module';
+
+@NgModule({
+  declarations: [AppDirectionsComponent],
+  imports: [
+    AppDirectionsRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    IgoMessageModule,
+    IgoMapModule,
+    IgoRoutingModule
+  ],
+  exports: [AppDirectionsComponent],
+  providers: [provideOsrmRoutingSource()]
+})
+export class AppDirectionsModule {}

demo/src/app/geo/print/print.component.html

@@ -1,6 +1,6 @@
 <mat-card>
   <mat-card-subtitle>Geo</mat-card-subtitle>
-  <mat-card-title>Simple Map</mat-card-title>
+  <mat-card-title>Print</mat-card-title>
   <mat-card-content>
     <li>npm install --save html2canvas@1.0.0-alpha.12</li>
     <li>npm install --save jspdf@1.4.1</li>

projects/context/src/lib/share-map/shared/share-map.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, Optional } from '@angular/core';
 
 import { RouteService, ConfigService, MessageService } from '@igo2/core';
-import { IgoMap } from '@igo2/geo';
+import { IgoMap, RoutingFormService } from '@igo2/geo';
 
 import { ContextService } from '../../context-manager/shared/context.service';
 
@@ -15,6 +15,7 @@ export class ShareMapService {
     private config: ConfigService,
     private contextService: ContextService,
     private messageService: MessageService,
+    @Optional() private routingFormService: RoutingFormService,
     @Optional() private route: RouteService
   ) {
     this.urlApi = this.config.getConfig('context.url');
@@ -56,6 +57,22 @@ export class ShareMapService {
     const invisibleKey = this.route.options.visibleOffLayersKey;
     const layers = map.layers;
 
+    const routingKey = this.route.options.routingCoordKey;
+    const stopsCoordinates = [];
+    if (
+      this.routingFormService &&
+      this.routingFormService.getStopsCoordinates() &&
+      this.routingFormService.getStopsCoordinates().length !== 0
+    ) {
+      this.routingFormService.getStopsCoordinates().forEach(coord => {
+        stopsCoordinates.push(coord);
+      });
+    }
+    let routingUrl: string = '';
+    if (stopsCoordinates.length >= 2) {
+      routingUrl = `${routingKey}=${stopsCoordinates.join(';')}`;
+    }
+
     const visibleLayers = layers.filter(lay => lay.visible);
     const invisibleLayers = layers.filter(lay => !lay.visible);
 
@@ -83,7 +100,9 @@ export class ShareMapService {
     if (this.contextService.context$.value) {
       context = 'context=' + this.contextService.context$.value.uri;
     }
-    return `${location.origin +
-      location.pathname}?${context}&${zoom}&${center}&${layersUrl}`;
+
+    return `${location.origin}${
+      location.pathname
+    }?${context}&${zoom}&${center}&${layersUrl}&${routingUrl}`;
   }
 }

projects/core/src/lib/route/route.interface.ts

@@ -1,9 +1,10 @@
 export interface RouteServiceOptions {
-  centerKey?: boolean | string;
-  zoomKey?: boolean | string;
-  projectionKey?: boolean | string;
-  contextKey?: boolean | string;
-  searchKey?: boolean | string;
-  visibleOnLayersKey?: boolean | string;
-  visibleOffLayersKey?: boolean | string;
+  centerKey?: boolean | string;
+  zoomKey?: boolean | string;
+  projectionKey?: boolean | string;
+  contextKey?: boolean | string;
+  searchKey?: boolean | string;
+  visibleOnLayersKey?: boolean | string;
+  visibleOffLayersKey?: boolean | string;
+  routingCoordKey?: boolean | string;
 }

projects/core/src/lib/route/route.service.ts

@@ -34,7 +34,8 @@ export class RouteService {
       contextKey: 'context',
       searchKey: 'search',
       visibleOnLayersKey: 'visiblelayers',
-      visibleOffLayersKey: 'invisiblelayers'
+      visibleOffLayersKey: 'invisiblelayers',
+      routingCoordKey: 'routing'
     };
     this.options = Object.assign({}, defaultOptions, options);
   }