Add a line layer for the frontier between Metropole and IGN satellite images.

package.json

@@ -32,6 +32,8 @@
     "@angular/router": "8.2.14",
     "@turf/centroid": "^5.1.5",
     "@turf/helpers": "^6.1.4",
+    "@turf/projection": "^6.0.1",
+    "@turf/turf": "^5.1.6",
     "angulartics2": "^7.5.2",
     "bulma": "^0.7.5",
     "bulma-checkradio": "^2.1.0",
@@ -43,7 +45,7 @@
     "hamburgers": "^1.1.3",
     "jwt-decode": "^2.2.0",
     "lodash.clonedeep": "^4.5.0",
-    "mapbox-gl": "^1.6.0",
+    "mapbox-gl": "^1.7.0",
     "ng-inline-svg": "^8.2.1",
     "ng-lazyload-image": "^5.1.2",
     "ngx-cookie-service": "^2.2.0",
@@ -62,7 +64,7 @@
     "@types/jasmine": "^2.8.12",
     "@types/jasminewd2": "^2.0.6",
     "@types/jwt-decode": "^2.2.1",
-    "@types/mapbox-gl": "^1.6.0",
+    "@types/mapbox-gl": "^1.7.0",
     "@types/node": "^6.14.2",
     "codelyzer": "^5.0.1",
     "jasmine-core": "~2.8.0",

src/app/map/services/map.service.ts

@@ -19,6 +19,7 @@ export class MapService {
 
   eventPopupAdded = false;
   mapIsConstructed: boolean = false;
+  popup: mapboxgl.Popup;
 
   // Map features colors
   featureColor: string = '#1d92ff';
@@ -130,7 +131,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
             type: 'geojson',
             data: this.mapOptions.geojson,
           });
-          this.addDataLayer();
+          // this.addDataLayer();
         }
       } else {
         if (this.mapOptions.vectorService && this.mapOptions.vectorService.url) {
@@ -143,7 +144,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
             tiles: [url],
           });
 
-          this.addDataLayer();
+          // this.addDataLayer();
         }
       }
     }
@@ -216,6 +217,90 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
 
   // Add the raster (WMS) layer
   addWMSLayer() {
+
+    // const polygonShape = polygon([[
+    //   [1647472.538427598774433, 3867539.236738075967878],
+    //   [1656149.591045931447297, 3925253.242399890907109], [1673432.08156061777845, 3922604.02275731228292],
+    //   [1672548.20371083682403, 3916819.587899864651263], [1678303.04124740511179, 3915930.268553881905973],
+    //   [1677416.643843154655769, 3910150.66299252351746], [1694663.155232969438657, 3907464.046523998957127],
+    //   [1691977.944659303408116, 3890157.666010212618858], [1697713.46819336945191, 3889258.274896244518459],
+    //   [1694134.930576886516064, 3866238.741810463834554], [1671244.189017552649602, 3869795.743182665668428],
+    //   [1670367.001061368035153, 3864045.317551260814071], [1647472.538427598774433, 3867539.236738075967878]
+    // ]]);
+    // console.log(polygonShape);
+
+    // const converted = projection.toWgs84(polygonShape);
+    // console.log(converted);
+
+    // Add the Metropole polygon layer
+    this._map.addSource('polygon-metropole', {
+      type: 'geojson',
+      lineMetrics: true,
+      data: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {
+              name: 'Métropole',
+            },
+            geometry: {
+              type: 'LineString',
+              coordinates: [[4.664889456606686, 45.546883237913455], [4.677293671678624, 45.96069089388331],
+              [4.844965771994277, 45.958104771794908], [4.843771328197183, 45.922124012308018],
+              [4.908214607359763, 45.921064482585919], [4.906980046164964, 45.885084194120161],
+              [5.113048045465636, 45.881451508470512], [5.107934333793898, 45.746532535709612],
+              [5.172169234171356, 45.745323877108788], [5.166227999823527, 45.592416594858285],
+              [4.884346903146746, 45.597449627708009], [4.882529381431865, 45.543477090694203],
+              [4.664889456606686, 45.546883237913455]],
+            },
+          },
+        ],
+      },
+    });
+
+    this._map.addLayer({
+      id: 'polygon-metropole',
+      type: 'line',
+      source: 'polygon-metropole',
+      layout: {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      paint: {
+        'line-color': 'black',
+        'line-width': 3,
+        'line-offset': -1,
+      },
+    });
+
+    const popup = new mapboxgl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      closeOnMove: true,
+    });
+
+    this._map.on('mouseenter', 'polygon-metropole', (e) => {
+      // Change the cursor style as a UI indicator.
+      this._map.getCanvas().style.cursor = 'pointer';
+
+      const coordinates = e.lngLat;
+      // Populate the popup and set its coordinates
+      // based on the feature found.
+      // Create a popup, but don't add it to the map yet.
+
+      popup
+        .setLngLat(coordinates)
+        .setHTML('<p>Deux couches ortho existent pour l\'affichage de la vue staellite:</br> ' +
+          '* la couche de la métropole de Lyon</br> * la couche IGN pour le reste du territoire.</p>')
+        .addTo(this._map);
+    });
+
+    this._map.on('mouseleave', 'polygon-metropole', () => {
+      this._map.getCanvas().style.cursor = '';
+      popup.remove();
+    });
+
     this._map.addSource('wms-source', {
       type: 'raster',
       tiles: [
@@ -225,12 +310,12 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
       tileSize: 256,
     });
 
-    this._map.addLayer({
-      id: 'wms-layer',
-      type: 'raster',
-      source: 'wms-source',
-      paint: {},
-    });
+    // this._map.addLayer({
+    //   id: 'wms-layer',
+    //   type: 'raster',
+    //   source: 'wms-source',
+    //   paint: {},
+    // });
 
   }
 

src/assets/mapbox-gl-styles/satellite.json

@@ -32,7 +32,10 @@
      {
        "id": "satellite-tiles-ign",
        "type": "raster",
-       "source": "raster-tiles-ign"
+       "source": "raster-tiles-ign",
+       "paint": {
+         "raster-saturation": -0.5
+       }
      },
     {
       "id": "satellite-tiles",