Initialisation de la carte des randos avec ngx-leaflet

.angular-cli.json

@@ -9,7 +9,12 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        {
+          "glob": "**/*",
+          "input": "../node_modules/leaflet/dist/images",
+          "output": "./assets/"
+        }
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -19,7 +24,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "stylesPerso.scss"
+        "stylesPerso.scss",
+        "../node_modules/leaflet/dist/leaflet.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

package.json

@@ -23,7 +23,9 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "@asymmetrik/ngx-leaflet": "^3.0.2",
     "core-js": "^2.4.1",
+    "leaflet": "^1.3.1",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
@@ -33,6 +35,7 @@
     "@angular/language-service": "^5.0.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
+    "@types/leaflet": "^1.2.5",
     "@types/node": "~6.0.60",
     "codelyzer": "~3.2.0",
     "jasmine-core": "~2.6.2",

src/app/app.module.ts

@@ -1,18 +1,19 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import {
   MatButtonModule, MatCardModule, MatGridListModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule,
   MatToolbarModule
-} from "@angular/material";
-import {RouterModule, Routes} from "@angular/router";
+} from '@angular/material';
+import {RouterModule, Routes} from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { RouterLinkWithHref } from '@angular/router';
-import {VttTraceComponent} from "./vtt-trace/vtt-trace/vtt-trace.component";
+import {VttTraceComponent} from './vtt-trace/vtt-trace/vtt-trace.component';
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 
-const routes: Routes =[
+const routes: Routes = [
   {path: 'home', component: HomeComponent},
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
   {path: 'vtt', component: VttTraceComponent}
@@ -21,7 +22,7 @@ const routes: Routes =[
   {path: 'todolist', component: TodoDashboardComponent},
   { path: '',   redirectTo: '/dashboard', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }*/
-]
+];
 
 @NgModule({
   declarations: [
@@ -40,7 +41,8 @@ const routes: Routes =[
     MatIconModule,
     MatSidenavModule,
     MatListModule,
-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes),
+    LeafletModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/home.component.html

@@ -186,7 +186,7 @@ Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
         <img mat-card-lg-image src="/assets/images/vtt.png">
       </mat-card-content>
       <mat-card-actions>
-        <button mat-button><i class="material-icons">open_in_new</i></button>
+        <button mat-button routerLink="/vtt"><i class="material-icons">open_in_new</i></button>
       </mat-card-actions>
     </mat-card>
 

src/app/vtt-trace/vtt-trace/vtt-trace-ws.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { VttTraceWsService } from './vtt-trace-ws.service';
+
+describe('VttTraceWsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [VttTraceWsService]
+    });
+  });
+
+  it('should be created', inject([VttTraceWsService], (service: VttTraceWsService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/vtt-trace/vtt-trace/vtt-trace-ws.service.ts

@@ -0,0 +1,596 @@
+import {Injectable} from '@angular/core';
+import {Feature, FeatureCollection, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
+import {GeoJSON, LatLngExpression} from 'leaflet';
+
+@Injectable()
+export class VttTraceWsService {
+
+  constructor() {
+  }
+
+  getMockRandosDesc() {
+    const jsonDescRandos: string = '{\n' +
+      '  "type": "FeatureCollection",\n' +
+      '  "features": [\n' +
+      '      {\n' +
+      '      "type": "Feature",\n' +
+      '      "geometry": {\n' +
+      '        "type": "Point",\n' +
+      '        "coordinates": [ -122.3473413, 47.651119 ]\n' +
+      '      },\n' +
+      '      "properties": {\n' +
+      '        "name": "Fremont Troll",\n' +
+      '        "description": "The Fremont Troll is a large concrete sculpture of the mythical troll ..."\n' +
+      '      }\n' +
+      '    },\n';
+
+    // it's necessary to tell variable type
+    const featureCollection: GeoJSON.FeatureCollection<Point> = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [ 43.272578333333001, 6.52412 ]
+          },
+          properties: {
+            name: 'Grimaud - Le Plan de la Tour - Grimaud',
+            description: 'blabla',
+            fichier: '2018-05-09_PlanDelaTour.geojson'
+          }
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [47.387996, 0.912467]
+          },
+          properties: {
+            name: 'Rando Azayroise',
+            description: 'blabla',
+            fichier: ''
+          }
+        }, {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [44.387996, 0.912467]
+          },
+          properties: {
+            name: 'Rando Azayroise 2',
+            description: 'blabla',
+            fichier: ''
+          }
+        }
+      ]
+    };
+    return (featureCollection);
+  }
+
+  getVttRandosDesc(): GeoJSON.FeatureCollection<Point> {
+    return this.getMockRandosDesc();
+  }
+
+  getVttRandosRoute(): GeoJSON.LineString {
+    return this.getMockRoute();
+
+  }
+
+  getMockRoute(): GeoJSON.LineString {
+    const resul: GeoJSON.LineString = {
+      type: 'LineString',
+      coordinates: [
+        [
+          0.75167499,
+          47.36106326,
+          68.559997
+        ],
+        [
+          0.75167164,
+          47.36103326,
+          70.7
+        ],
+        [
+          0.75167817,
+          47.36106829,
+          71.2
+        ],
+        [
+          0.7517982,
+          47.3610465,
+          71
+        ],
+        [
+          0.75179485,
+          47.36095329,
+          71.3
+        ],
+        [
+          0.75161162,
+          47.3607999,
+          72.2
+        ],
+        [
+          0.75119487,
+          47.36060662,
+          73.2
+        ],
+        [
+          0.75091324,
+          47.36057493,
+          73.3
+        ],
+        [
+          0.75061166,
+          47.36059321,
+          73.5
+        ],
+        [
+          0.75035987,
+          47.36056823,
+          74.4
+        ],
+        [
+          0.75011495,
+          47.36075665,
+          75.8
+        ],
+        [
+          0.75002828,
+          47.36074324,
+          77
+        ],
+        [
+          0.7500365,
+          47.36044652,
+          78.4
+        ],
+        [
+          0.74990993,
+          47.36026983,
+          79.1
+        ],
+        [
+          0.74985494,
+          47.36006665,
+          80
+        ],
+        [
+          0.74999157,
+          47.35895823,
+          79.9
+        ],
+        [
+          0.74995821,
+          47.35868163,
+          80.3
+        ],
+        [
+          0.74982997,
+          47.35828332,
+          81.8
+        ],
+        [
+          0.74949821,
+          47.3576416,
+          83.5
+        ],
+        [
+          0.74916495,
+          47.35720155,
+          84.2
+        ],
+        [
+          0.74834486,
+          47.35646998,
+          84.8
+        ],
+        [
+          0.7481566,
+          47.35625658,
+          84.4
+        ],
+        [
+          0.7480349,
+          47.35604988,
+          84.3
+        ],
+        [
+          0.74806323,
+          47.35596321,
+          84.2
+        ],
+        [
+          0.74842985,
+          47.35548829,
+          87.1
+        ],
+        [
+          0.74854485,
+          47.35545493,
+          87.6
+        ],
+        [
+          0.74917986,
+          47.35557328,
+          89.6
+        ],
+        [
+          0.74948497,
+          47.3555882,
+          89.9
+        ],
+        [
+          0.74981488,
+          47.35556323,
+          91.3
+        ]]};
+      return resul;
+  }
+
+  getMockRoute1(): LatLngExpression[] {
+    return GeoJSON.coordsToLatLngs([
+      [
+        0.75167499,
+        47.36106326,
+        68.559997
+      ],
+      [
+        0.75167164,
+        47.36103326,
+        70.7
+      ],
+      [
+        0.75167817,
+        47.36106829,
+        71.2
+      ],
+      [
+        0.7517982,
+        47.3610465,
+        71
+      ],
+      [
+        0.75179485,
+        47.36095329,
+        71.3
+      ],
+      [
+        0.75161162,
+        47.3607999,
+        72.2
+      ],
+      [
+        0.75119487,
+        47.36060662,
+        73.2
+      ],
+      [
+        0.75091324,
+        47.36057493,
+        73.3
+      ],
+      [
+        0.75061166,
+        47.36059321,
+        73.5
+      ],
+      [
+        0.75035987,
+        47.36056823,
+        74.4
+      ],
+      [
+        0.75011495,
+        47.36075665,
+        75.8
+      ],
+      [
+        0.75002828,
+        47.36074324,
+        77
+      ],
+      [
+        0.7500365,
+        47.36044652,
+        78.4
+      ],
+      [
+        0.74990993,
+        47.36026983,
+        79.1
+      ],
+      [
+        0.74985494,
+        47.36006665,
+        80
+      ],
+      [
+        0.74999157,
+        47.35895823,
+        79.9
+      ],
+      [
+        0.74995821,
+        47.35868163,
+        80.3
+      ],
+      [
+        0.74982997,
+        47.35828332,
+        81.8
+      ],
+      [
+        0.74949821,
+        47.3576416,
+        83.5
+      ],
+      [
+        0.74916495,
+        47.35720155,
+        84.2
+      ],
+      [
+        0.74834486,
+        47.35646998,
+        84.8
+      ],
+      [
+        0.7481566,
+        47.35625658,
+        84.4
+      ],
+      [
+        0.7480349,
+        47.35604988,
+        84.3
+      ],
+      [
+        0.74806323,
+        47.35596321,
+        84.2
+      ],
+      [
+        0.74842985,
+        47.35548829,
+        87.1
+      ],
+      [
+        0.74854485,
+        47.35545493,
+        87.6
+      ],
+      [
+        0.74917986,
+        47.35557328,
+        89.6
+      ],
+      [
+        0.74948497,
+        47.3555882,
+        89.9
+      ],
+      [
+        0.74981488,
+        47.35556323,
+        91.3
+      ]]);
+  }
+
+  getMockRoute2(): LatLngExpression[]  {
+// const featureCollection: GeoJSON.FeatureCollection <Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon | GeometryCollection> = {
+    const featureCollection: GeoJSON.FeatureCollection <Point | LineString | MultiLineString  > = {
+      'type': 'FeatureCollection',
+      // 'crs': { 'type': 'name', 'properties': { 'name': 'urn:ogc:def:crs:OGC:1.3:CRS84' } },
+      'features': [
+        {'type': 'Feature',
+          'properties': {
+            'name': 'jeje',
+            'cmt': null,
+            'desc': null,
+            'src': null,
+            'link1_href': null,
+            'link1_text': null,
+            'link1_type': null,
+            'link2_href': null,
+            'link2_text': null,
+            'link2_type': null,
+            'number': null,
+            'type': null
+          },
+          'geometry': {
+            'type': 'MultiLineString',
+            'coordinates': [ [ [ 6.52412, 43.272578333333001 ],
+              [ 6.5241116666667, 43.27254 ],
+              [ 6.5241116666667, 43.27254 ],
+              [ 6.5243516666667, 43.273026666667 ],
+              [ 6.5241733333333, 43.272646666667001 ],
+              [ 6.52432, 43.272605 ],
+              [ 6.5240816666667, 43.272416666666999 ],
+              [ 6.524085, 43.272421666667 ],
+              [ 6.5241383333333, 43.272451666667003 ],
+              [ 6.5241383333333, 43.272451666667003 ],
+              [ 6.5241316666667, 43.272433333332998 ],
+              [ 6.5257416666667, 43.272863333333 ],
+              [ 6.5275366666667, 43.27175 ],
+              [ 6.533625, 43.27083 ],
+              [ 6.53767, 43.273263333332999 ],
+              [ 6.5385833333333, 43.273845 ],
+              [ 6.5421733333333, 43.273913333332999 ],
+              [ 6.5453766666667, 43.273238333332998 ],
+              [ 6.5492416666667, 43.272071666667003 ],
+              [ 6.55363, 43.271273333332999 ],
+              [ 6.5561883333333, 43.271811666666999 ],
+              [ 6.56077, 43.272446666667001 ],
+              [ 6.564575, 43.274188333333001 ],
+              [ 6.5678483333333, 43.275513333333002 ],
+              [ 6.570835, 43.276701666667002 ],
+              [ 6.5733233333333, 43.278161666667003 ],
+              [ 6.5747466666667, 43.279291666667 ],
+              [ 6.5775566666667, 43.279858333333003 ],
+              [ 6.5820433333333, 43.281015 ],
+              [ 6.5819766666667, 43.28118 ],
+              [ 6.57895, 43.280408333333 ],
+              [ 6.577875, 43.281426666667002 ],
+              [ 6.5762433333333, 43.283525 ],
+              [ 6.5754116666667, 43.286451666666999 ],
+              [ 6.572925, 43.287808333332997 ],
+              [ 6.5746166666667, 43.2889 ],
+              [ 6.5738383333333, 43.290695 ],
+              [ 6.5746383333333, 43.29237 ],
+              [ 6.575135, 43.294495 ],
+              [ 6.5744266666667, 43.296065 ],
+              [ 6.5718066666667, 43.301541666666999 ],
+              [ 6.572115, 43.30233 ],
+              [ 6.5720766666667, 43.302928333333 ],
+              [ 6.5721233333333, 43.302953333333001 ],
+              [ 6.5721183333333, 43.302946666666998 ],
+              [ 6.5721183333333, 43.302948333332999 ],
+              [ 6.5727483333333, 43.303815 ],
+              [ 6.57283, 43.304525 ],
+              [ 6.5737066666667, 43.304993333333002 ],
+              [ 6.5744333333333, 43.30544 ],
+              [ 6.57524, 43.305876666666997 ],
+              [ 6.575725, 43.30669 ],
+              [ 6.5758916666667, 43.30753 ],
+              [ 6.5770516666667, 43.307445 ],
+              [ 6.578095, 43.307368333333002 ],
+              [ 6.5784666666667, 43.307466666666997 ],
+              [ 6.5784666666667, 43.307466666666997 ],
+              [ 6.5784683333333, 43.307466666666997 ],
+              [ 6.5784683333333, 43.307466666666997 ],
+              [ 6.57847, 43.307466666666997 ],
+              [ 6.5787533333333, 43.30822 ],
+              [ 6.57846, 43.308973333333 ],
+              [ 6.57864, 43.309063333333 ],
+              [ 6.5786433333333, 43.309066666667 ],
+              [ 6.5784016666667, 43.31036 ],
+              [ 6.576955, 43.309845 ],
+              [ 6.5759116666667, 43.310046666666999 ],
+              [ 6.5754383333333, 43.309605 ],
+              [ 6.575445, 43.309593333332998 ],
+              [ 6.5741316666667, 43.309155 ],
+              [ 6.5727766666667, 43.30906 ],
+              [ 6.57106, 43.309283333332999 ],
+              [ 6.5706116666667, 43.309116666667002 ],
+              [ 6.570785, 43.309051666667003 ],
+              [ 6.5704483333333, 43.309681666666997 ],
+              [ 6.5679266666667, 43.310928333333003 ],
+              [ 6.5674066666667, 43.311448333332997 ],
+              [ 6.5649933333333, 43.313808333333 ],
+              [ 6.5642433333333, 43.316858333333002 ],
+              [ 6.5638216666667, 43.318493333333002 ],
+              [ 6.5635683333333, 43.320898333332998 ],
+              [ 6.5620816666667, 43.32326 ],
+              [ 6.5610283333333, 43.325878333333002 ],
+              [ 6.5605116666667, 43.327375 ],
+              [ 6.55703, 43.32894 ],
+              [ 6.554355, 43.329435 ],
+              [ 6.55183, 43.329081666667001 ],
+              [ 6.5484516666667, 43.328893333332999 ],
+              [ 6.5473966666667, 43.328501666667002 ],
+              [ 6.54406, 43.330038333333 ],
+              [ 6.543885, 43.331676666667001 ],
+              [ 6.5413883333333, 43.331838333333003 ],
+              [ 6.53969, 43.331446666666999 ],
+              [ 6.5383066666667, 43.332295 ],
+              [ 6.5371883333333, 43.333473333333004 ],
+              [ 6.53653, 43.334535 ],
+              [ 6.5344933333333, 43.335378333332997 ],
+              [ 6.5325816666667, 43.33499 ],
+              [ 6.5307133333333, 43.334718333333001 ],
+              [ 6.52962, 43.333843333333 ],
+              [ 6.5274216666667, 43.33337 ],
+              [ 6.5246433333333, 43.334651666667 ],
+              [ 6.522885, 43.334153333332999 ],
+              [ 6.5208066666667, 43.334905 ],
+              [ 6.51866, 43.334256666667002 ],
+              [ 6.51752, 43.333601666667001 ],
+              [ 6.51751, 43.333425 ],
+              [ 6.5175, 43.333426666667002 ],
+              [ 6.517515, 43.333431666667003 ],
+              [ 6.5175433333333, 43.333476666667003 ],
+              [ 6.5175083333333, 43.333373333333 ],
+              [ 6.5175133333333, 43.333371666666999 ],
+              [ 6.5175166666667, 43.333371666666999 ],
+              [ 6.5156483333333, 43.33355 ],
+              [ 6.5151983333333, 43.333773333332999 ],
+              [ 6.5134083333333, 43.333813333332998 ],
+              [ 6.5119766666667, 43.333676666667003 ],
+              [ 6.5111666666667, 43.333706666666998 ],
+              [ 6.509915, 43.334166666667002 ],
+              [ 6.5091033333333, 43.333663333333 ],
+              [ 6.50912, 43.333646666667001 ],
+              [ 6.508985, 43.333698333332997 ],
+              [ 6.509075, 43.333726666666998 ],
+              [ 6.502335, 43.334 ],
+              [ 6.5023433333333, 43.333773333332999 ],
+              [ 6.5023716666667, 43.333823333333001 ],
+              [ 6.5023583333333, 43.333833333332997 ],
+              [ 6.4992383333333, 43.333551666666999 ],
+              [ 6.4972316666667, 43.331708333332998 ],
+              [ 6.4960533333333, 43.330151666667 ],
+              [ 6.4926683333333, 43.326791666666999 ],
+              [ 6.4929783333333, 43.326848333332997 ],
+              [ 6.4934183333333, 43.32684 ],
+              [ 6.49697, 43.326938333332997 ],
+              [ 6.4983966666667, 43.325863333332997 ],
+              [ 6.499335, 43.324661666666998 ],
+              [ 6.50053, 43.324933333333 ],
+              [ 6.5015183333333, 43.325501666667002 ],
+              [ 6.5014233333333, 43.321378333333001 ],
+              [ 6.50269, 43.318003333333003 ],
+              [ 6.5025283333333, 43.315903333332997 ],
+              [ 6.5020216666667, 43.312243333333001 ],
+              [ 6.5049516666667, 43.315775 ],
+              [ 6.5070333333333, 43.318591666666997 ],
+              [ 6.50617, 43.313963333333 ],
+              [ 6.5066583333333, 43.311115 ],
+              [ 6.5084533333333, 43.31076 ],
+              [ 6.5100183333333, 43.311841666667 ],
+              [ 6.5115566666667, 43.312153333333001 ],
+              [ 6.51297, 43.313035 ],
+              [ 6.5149466666667, 43.3127 ],
+              [ 6.5185183333333, 43.31375 ],
+              [ 6.51993, 43.314766666666998 ],
+              [ 6.5226666666667, 43.31431 ],
+              [ 6.523265, 43.31327 ],
+              [ 6.5262383333333, 43.313863333333003 ],
+              [ 6.526555, 43.313846666666997 ],
+              [ 6.526555, 43.313846666666997 ],
+              [ 6.5258316666667, 43.311245 ],
+              [ 6.5258316666667, 43.311245 ],
+              [ 6.52419, 43.31091 ],
+              [ 6.5229133333333, 43.310816666667002 ],
+              [ 6.5223683333333, 43.309811666667002 ],
+              [ 6.5223216666667, 43.308083333333002 ],
+              [ 6.5213933333333, 43.306123333332998 ],
+              [ 6.5208483333333, 43.304231666667 ],
+              [ 6.5200733333333, 43.302541666666997 ],
+              [ 6.517905, 43.298378333332998 ],
+              [ 6.5180583333333, 43.295166666667001 ],
+              [ 6.5178966666667, 43.293058333333001 ],
+              [ 6.5179, 43.293058333333001 ],
+              [ 6.5169283333333, 43.289928333333002 ],
+              [ 6.5172766666667, 43.285685 ],
+              [ 6.5166666666667, 43.281166666666998 ],
+              [ 6.51584, 43.277973333333001 ],
+              [ 6.515905, 43.27793 ],
+              [ 6.516935, 43.274518333332999 ],
+              [ 6.5188533333333, 43.273098333333003 ],
+              [ 6.5215266666667, 43.272603333333002 ],
+              [ 6.52414, 43.27251 ],
+              [ 6.5240016666667, 43.272528333333 ] ] ]
+            }
+        }
+    ]
+    };
+    const g = featureCollection.features[0].geometry.coordinates;
+    // console.log(g);
+    // console.log(featureCollection.features[0].geometry.coordinates[0]);
+    // return featureCollection.features[0].geometry.coordinates[0];
+    return GeoJSON.coordsToLatLngs(g, 1);
+  }
+
+}

src/app/vtt-trace/vtt-trace/vtt-trace.component.html

@@ -1,6 +1,28 @@
 <div style="min-height: 1000px;">
   <p  style="height: 100%;">
     Coming soon: my GPS traces referenced on a map.
-
   </p>
+  <div class="row">
+    <form class="col">
+
+      <button type="button"
+              class="btn btn-primary"
+              (click)="addMarker()">Add Marker</button>
+
+      <!--button type="button"
+              class="btn btn-primary"
+              (click)="removeMarker()">Remove Marker</button-->
+
+    </form>
+  </div>
+  <div leaflet
+       style="height: 500px;"
+       [leafletOptions]="options"
+       [leafletLayers]="layers"
+       [leafletBaseLayers]="baseLayers"
+       [leafletZoom]="zoom"
+       [leafletCenter]="center"
+       [leafletLayersControlOptions]="layersControlOptions">
+
+  </div>
 </div>

src/app/vtt-trace/vtt-trace/vtt-trace.component.ts

@@ -1,15 +1,146 @@
 import { Component, OnInit } from '@angular/core';
+import {circle, icon, latLng, LatLng, Marker, marker, point, polygon, polyline, Polyline, tileLayer} from 'leaflet';
+import {VttTraceWsService} from './vtt-trace-ws.service';
+import {Feature, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
+
+
+// Utilise la librairie ngx-leaflet
+// https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
+// https://github.com/Asymmetrik/ngx-leaflet
+// Voir aussi la doc de Leaflet
+// https://leafletjs.com/reference-1.3.0.html
+// et le projet exemple ngx-leaflet
 
 @Component({
   selector: 'app-vtt-trace',
   templateUrl: './vtt-trace.component.html',
-  styleUrls: ['./vtt-trace.component.css']
+  styleUrls: ['./vtt-trace.component.css'],
+  providers: [VttTraceWsService]
 })
+
 export class VttTraceComponent implements OnInit {
+  // Open Street Map and Open Cycle Map definitions
+  LAYER_OCM = {
+    id: 'opencyclemap',
+    name: 'Open Cycle Map',
+    enabled: true,
+    layer: tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      attribution: 'Open Cycle Map'
+    })
+  };
+  LAYER_OSM = {
+    id: 'openstreetmap',
+    name: 'Open Street Map',
+    enabled: false,
+    layer: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      attribution: 'Open Street Map'
+    })
+  };
+
+  // Values to bind to Leaflet Directive
+  layersControlOptions = { position: 'bottomright' };
+  baseLayers = {
+    'Open Street Map': this.LAYER_OSM.layer,
+    'Open Cycle Map': this.LAYER_OCM.layer
+  };
+
+  markers:  Marker[] = [];
+
+  /*layers = [
+    circle([ 46.95, -122 ], { radius: 5000 }),
+    polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),
+    marker([ 46.879966, -121.726909 ]),
+    polyline([
+      [45.51, -122.68],
+      [37.77, -122.43],
+      [34.04, -118.2]
+    ])
+  ];*/
+  layers = [];
 
-  constructor() { }
+  options = {
+    layers: [
+      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+    ],
+    zoom: 5,
+    center: latLng(46, 2)
+  };
+
+  zoom: number;
+  center: LatLng;
+
+  constructor(private vttTraceWs: VttTraceWsService) { }
 
   ngOnInit() {
+    this.getMarkers();
+    this.addRoute();
+    this.addRoute2();
+  }
+
+  private getMarkers() {
+    const randosDesc: GeoJSON.FeatureCollection<Point> = this.vttTraceWs.getVttRandosDesc();
+    randosDesc.features.forEach(x => this.addMarker(x));
+  }
+
+  addMarker(feature: Feature<Point>) {
+    const newMarker = marker(
+      [feature.geometry.coordinates[0], feature.geometry.coordinates[1]],
+      {
+        icon: icon({
+          iconSize: [ 25, 41 ],
+          iconAnchor: [ 13, 41 ],
+          iconUrl: 'assets/marker-icon.png',
+          shadowUrl: 'assets/marker-shadow.png'
+        })
+      }
+    );
+
+    console.log(feature.properties.name);
+    //newMarker.bindPopup(feature.properties.name).openPopup();
+    newMarker.on('click', this.markerOnClick)
+    this.layers.push(newMarker);
+  }
+
+  markerOnClick(e) {
+    console.log(e);
+/*
+    this.options = {
+      layers: [
+        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+      ],
+      zoom: 15,
+      center: e.latlng
+    };
+*/
+    this.zoom = 15;
+    this.center = e.latlng;
+
+    console.log(this.center);
+
+    //const attributes = e.layer.properties;
+    //console.log(attributes.name, attributes);
+    // do some stuff…
+    return false;
   }
 
+  addRoute() {
+    // create a red polyline from an array of LatLng points
+    const route = polyline(this.vttTraceWs.getMockRoute1());
+    this.layers.push(route);
+  }
+
+  addRoute2() {
+    this.layers.push(polyline(this.vttTraceWs.getMockRoute2()));
+  }
+
+/*  private showRoute() {
+      this.fitBounds(this.layers.getBounds(), {
+        padding: point(24, 24),
+        maxZoom: 12,
+        animate: true
+      });
+  }*/
+
 }