Récupération data sur Redis via le serveur ExpressJs(k8).

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { RouterLinkWithHref } from '@angular/router';
 import {VttTraceComponent} from './vtt-trace/vtt-trace/vtt-trace.component';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import {HttpClientModule} from "@angular/common/http";
+import {FormsModule} from '@angular/forms';
 
 const routes: Routes = [
   {path: 'home', component: HomeComponent},
@@ -44,7 +45,9 @@ const routes: Routes = [
     MatListModule,
     RouterModule.forRoot(routes),
     LeafletModule.forRoot(),
-    HttpClientModule
+    HttpClientModule,
+    LeafletModule.forRoot(),
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/vtt-trace/vtt-trace/core-demo.model.ts

@@ -0,0 +1,10 @@
+export class LeafletCoreDemoModel {
+
+	constructor(
+		public latitude: number = 0,
+		public longitude: number = 0,
+		public zoom: number = 4,
+		public zoomLevels: number[] = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]
+	) { }
+
+}

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

@@ -0,0 +1,673 @@
+import {Injectable} from '@angular/core';
+import {Feature, FeatureCollection, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
+import {GeoJSON, LatLngExpression} from 'leaflet';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from "rxjs/Observable";
+import {getInitializer} from 'codelyzer/util/astQuery';
+
+@Injectable()
+export class VttTraceWsServiceMock {
+
+  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.json'
+          }
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [47.387996, 0.912467]
+          },
+          properties: {
+            name: 'Rando Azayroise',
+            description: 'blabla',
+            fichier: ''
+          }
+        }, {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [43.12359813, 6.35863452]
+          },
+          properties: {
+            name: 'Bormes Mimosa - Printemps 2017',
+            description: 'blabla',
+            fichier: '2017-04-16_BormesMimosa.json'
+          }
+        }
+      ]
+    };
+    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);
+  }
+
+  getMockRoute3(): LatLngExpression[] {
+// const featureCollection: GeoJSON.FeatureCollection <Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon | GeometryCollection> = {
+    const featureCollection: GeoJSON.FeatureCollection<Point | LineString | MultiLineString> = {
+      "type": "FeatureCollection",
+      "features": [
+        {
+          "type": "Feature",
+          "geometry": {
+            "type": "Point",
+            "coordinates": [
+              -122.3473413,
+              47.651119
+            ]
+          },
+          "properties": {
+            "name": "Fremont Troll",
+            "description": "The Fremont Troll is a large concrete sculpture of the mythical troll ..."
+          }
+        },
+        {
+          "type": "Feature",
+          "properties": {
+            "time": "2012-03-18T07:47:14Z"
+          },
+          "geometry": {
+            "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
+              ]
+            ]
+          }
+        }
+      ]
+    }
+    const g = featureCollection.features[1].geometry.coordinates;
+    console.log(g);
+    console.log(featureCollection.features[1].geometry.coordinates[0]);
+    // return featureCollection.features[0].geometry.coordinates[0];
+    return GeoJSON.coordsToLatLngs(g, 0);
+  }
+
+}

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

@@ -3,76 +3,23 @@ import {Feature, FeatureCollection, GeometryObject, LineString, MultiLineString,
 import {GeoJSON, LatLngExpression} from 'leaflet';
 import {HttpClient} from '@angular/common/http';
 import {Observable} from "rxjs/Observable";
+import {getInitializer} from 'codelyzer/util/astQuery';
 
 @Injectable()
 export class VttTraceWsService {
+  baseUrl: string;
+  redisApi: string;
 
   constructor(private http: HttpClient) {
+    this.baseUrl = 'http://localhost:3000';
+    this.redisApi = 'redisapi';
   }
 
-  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.json'
-          }
-        },
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [47.387996, 0.912467]
-          },
-          properties: {
-            name: 'Rando Azayroise',
-            description: 'blabla',
-            fichier: ''
-          }
-        }, {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [43.12359813, 6.35863452]
-          },
-          properties: {
-            name: 'Bormes Mimosa - Printemps 2017',
-            description: 'blabla',
-            fichier: '2017-04-16_BormesMimosa.json'
-          }
-        }
-      ]
-    };
-    return (featureCollection);
+  gettVttRandosDescFromServerObs(): Observable<Object> {
+    // http.get(`${baseUrl}/api/races`)
+    return(this.http.get(`${this.baseUrl}/${this.redisApi}`));
   }
 
-  getVttRandosDesc(): GeoJSON.FeatureCollection<Point> {
-    return this.getMockRandosDesc();
-  }
 
   getVttRandosRoute(): GeoJSON.LineString {
     return this.getMockRoute();
@@ -672,19 +619,19 @@ export class VttTraceWsService {
   }
 
   getMockRoute4() {
-    return this.getJsonFile('/assets/2012-03-18_StAvertin.json')
+    return this.getJsonFile('/assets/2012-03-18_StAvertin.json');
   }
 
   getMockRoute5() {
-    return this.getJsonFile('/assets/2018-05-09_PlanDelaTour.json')
+    return this.getJsonFile('/assets/2018-05-09_PlanDelaTour.json');
   }
 
   getMockRoute6() {
-    return this.getJsonFile('/assets/2017-04-16_BormesMimosa.json')
+    return this.getJsonFile('/assets/2017-04-16_BormesMimosa.json');
   }
 
 
-  getJsonFile(fileName: string): Observable<any>{
-    return this.http.get(fileName)
+  getJsonFile(fileName: string): Observable<any> {
+    return this.http.get(fileName);
   }
 }

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

@@ -25,4 +25,60 @@
        [leafletLayersControlOptions]="layersControlOptions">
 
   </div>
+
+
+  <div class="row">
+
+    <!-- Control Form -->
+    <div class="col-sm-12 col-md-6 col-lg-4">
+
+      <form>
+
+        <div class="form-group">
+          <label class="col-form-label">Options:</label>
+          <small class="form-text">{{ optionsSpec | json }}</small>
+        </div>
+
+        <!-- Zoom Levels -->
+        <div class="form-group row">
+          <div class="col-4">
+            <label class="col-form-label float-right">
+              Zoom
+            </label>
+          </div>
+          <div class="col">
+            <select class="form-control" name="zoom" [(ngModel)]="zoom" required>
+              <option *ngFor="let z of zoomLevels" [value]="z">{{z}}</option>
+            </select>
+          </div>
+
+          <div class="col-4">
+            <label class="col-form-label float-right">
+              Latitude
+            </label>
+          </div>
+          <div class="col">
+            <input type="text" class="form-control" name="latitude" [(ngModel)]="latitude" required>
+          </div>
+        </div>
+
+
+        <div class="form-group row">
+          <div class="col-4">
+            <label class="col-form-label float-right">
+              Longitude
+            </label>
+          </div>
+          <div class="col">
+            <input type="text" class="form-control" name="longitude" [(ngModel)]="longitude" required>
+          </div>
+        </div>
+
+        <button type="button"
+                class="btn btn-primary float-right"
+                (click)="onApply()">Apply</button>
+
+      </form>
+      {{zoom}}
+    </div>
 </div>

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

@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import {ApplicationRef, ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {circle, icon, latLng, LatLng, Marker, marker, point, polygon, polyline, Polyline, tileLayer} from 'leaflet';
 import {GeoJSON, LatLngExpression} from 'leaflet';
 import {VttTraceWsService} from './vtt-trace-ws.service';
 import {Feature, GeometryObject, LineString, MultiLineString, Point} from 'geojson';
+import {LeafletCoreDemoModel} from './core-demo.model';
+import {Observable} from 'rxjs/Observable';
 
 
 // Utilise la librairie ngx-leaflet
@@ -47,45 +49,74 @@ export class VttTraceComponent implements OnInit {
     '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 = [];
 
-  options = {
+  /*
+   * This is a specification of the leaflet options
+   * The reason to duplicate this object is so we can easily render it to the template
+   */
+  optionsSpec: {
+    layers: any[],
+    zoom: number,
+    center: number[]
+  } = {
     layers: [
-      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+      {
+        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        maxZoom: 18,
+        attribution: 'Open Street Map'
+      }
     ],
     zoom: 5,
-    center: latLng(46, 2)
+    center: [ 46, 2 ]
   };
 
+  // Fields for managing the form inputs and binding to leaflet zoom/center
+/*
+  model = new LeafletCoreDemoModel(
+    this.optionsSpec.center[0],
+    this.optionsSpec.center[1],
+    this.optionsSpec.zoom
+  );
+*/
   zoom: number;
   center: LatLng;
+  latitude: number;
+  longitude: number;
+  zoomLevels: number[] = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ];
+
+  layers = [];
+  options = {
+    layers: this.optionsSpec.layers.map((l) => {
+      return tileLayer(l.url, { maxZoom: l.maxZoom, attribution: l.attribution });
+    }),
+    zoom: this.optionsSpec.zoom,
+    center: latLng(this.optionsSpec.center[0], this.optionsSpec.center[1])
+  };
+
+  featuresCollection: Array<GeoJSON.Feature<Point>> = [];
+
+  onApply() {
+    this.zoom = this.zoom;
+    this.center = latLng(this.latitude, this.longitude);
+
+    return false;
+  }
 
   constructor(private vttTraceWs: VttTraceWsService) { }
 
   ngOnInit() {
-    this.getMarkers();
-    //this.addRoute();
-    //this.addRoute2();
-    this.addRoute4();
-    this.addRoute5();
-    this.addRoute6();
+    this.getMarkersObs();
   }
 
-  private getMarkers() {
-    const randosDesc: GeoJSON.FeatureCollection<Point> = this.vttTraceWs.getVttRandosDesc();
-    randosDesc.features.forEach(x => this.addMarker(x));
+  private getMarkersObs() {
+    this.vttTraceWs.gettVttRandosDescFromServerObs()
+      .subscribe((response: Array<string>) => {
+        response.forEach(x => {
+          const json = JSON.parse(x);
+          this.addMarker(json);
+          this.featuresCollection.push(json);
+        });
+      });
   }
 
   addMarker(feature: Feature<Point>) {
@@ -102,29 +133,24 @@ export class VttTraceComponent implements OnInit {
     );
 
     console.log(feature.properties.name);
-    //newMarker.bindPopup(feature.properties.name).openPopup();
-    newMarker.on('click', this.markerOnClick)
+    console.log('here' + this);
+    newMarker.bindPopup(feature.properties.name).openPopup();
+    newMarker.on('click', this.markerOnClick, newMarker);
     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
-    };
-*/
+    const window: Window = self;
+    console.log('parent' + this);
     this.zoom = 15;
-    this.center = e.latlng;
+    console.log(this.zoom);
+    this.center = latLng(this.latitude, this.longitude);
+    //this.options.center = e.latlng;
 
     console.log(this.center);
-
-    //const attributes = e.layer.properties;
-    //console.log(attributes.name, attributes);
+    const attributes = e.layer.properties;
+    console.log(attributes.name, attributes);
     // do some stuff…
     return false;
   }
@@ -139,11 +165,11 @@ export class VttTraceComponent implements OnInit {
     this.layers.push(polyline(this.vttTraceWs.getMockRoute2()));
   }
 
-  addRoute3(){
+  addRoute3() {
     this.layers.push(polyline(this.vttTraceWs.getMockRoute3()));
   }
 
-  addRoute4(){
+  addRoute4() {
     this.vttTraceWs.getMockRoute4()
       .subscribe(data => {
         console.log(data)
@@ -154,10 +180,10 @@ export class VttTraceComponent implements OnInit {
         //     // return featureCollection.features[0].geometry.coordinates[0];
         //     resul =  GeoJSON.coordsToLatLngs(g, 0);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 0)));
-      })
+      });
   }
 
-  addRoute5(){
+  addRoute5() {
     this.vttTraceWs.getMockRoute5()
       .subscribe(data => {
         console.log(data)
@@ -165,10 +191,10 @@ export class VttTraceComponent implements OnInit {
         const g = featureCollection.features[0].geometry.coordinates;
         console.log(featureCollection.features[0].geometry.coordinates[0]);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));
-      })
+      });
   }
 
-  addRoute6(){
+  addRoute6() {
     this.vttTraceWs.getMockRoute6()
       .subscribe(data => {
         console.log(data)
@@ -176,11 +202,10 @@ export class VttTraceComponent implements OnInit {
         const g = featureCollection.features[0].geometry.coordinates;
         console.log(featureCollection.features[0].geometry.coordinates[0]);
         this.layers.push(polyline(GeoJSON.coordsToLatLngs(g, 1)));
-      })
+      });
   }
 
 
-
   /*  private showRoute() {
         this.fitBounds(this.layers.getBounds(), {
           padding: point(24, 24),
@@ -190,3 +215,5 @@ export class VttTraceComponent implements OnInit {
     }*/
 
 }
+
+