Add ign layer in the map.service (instead of style file).

src/app/core/services/app-config.service.ts

@@ -14,8 +14,7 @@ export class AppConfig {
     catalogue: string;
     reuses: string;
     geocoder: string;
-    wms: string;
-    mvt: string;
+    proxyMap: string;
     seo: string;
   };
   theFunctionalitiesInterruptor: {

src/app/dataset-detail/components/dataset-map/dataset-map.component.ts

@@ -75,7 +75,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
     if (this.metadata && !this.mapOptions) {
       this.mapOptions = {} as MapOptions;
       this.mapOptions.isMVT = true;
-      this.mapOptions.mvtUrl = APP_CONFIG.backendUrls.mvt;
+      this.mapOptions.mvtUrl = `${APP_CONFIG.backendUrls.proxyMap}/mvt`;
       this.mapOptions.vectorService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wfs; }) };
       this.mapOptions.rasterService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wms; }) };
       const dataType = {
@@ -101,7 +101,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
       // If download data, use config url.
       if (this.mapOptions.rasterService.url.includes('download.data')) {
         const domain = this.mapOptions.rasterService.url.split('wms')[1];
-        this.mapOptions.rasterService.url = APP_CONFIG.backendUrls.wms + domain;
+        this.mapOptions.rasterService.url = `${APP_CONFIG.backendUrls.proxyMap}/wms${domain}`;
       }
 
       // If the data are just a sample, we will use this sample as geojson to display the interaction layer on the map.

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

@@ -127,7 +127,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
     });
 
     // Add the data layer only if it comes from the Lyon Metropole
-    if (this.mapOptions.rasterService.url.includes(APP_CONFIG.backendUrls.wms)) {
+    if (this.mapOptions.rasterService.url.includes(`${APP_CONFIG.backendUrls.proxyMap}/wms`)) {
       // There is two ways to add tha data layers: from a geojson or from a MVT url
       if (!this.mapOptions.isMVT) {
         if (this.mapOptions.geojson) {
@@ -158,9 +158,35 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
     // between Métropole and IGN view images
     if (this.selectedBaseLayer.fileName === 'satellite.json') {
       this.addSeparationTerritoryLayer();
+      this.addIgnBaseLayer();
     }
   }
 
+  addIgnBaseLayer() {
+
+    // Add this layer below all the other layers (as first in the stack)
+    const firstLayer = this._map.getStyle().layers[0];
+
+    this._map.addSource('raster-tiles-ign', {
+      type: 'raster',
+      tiles: [
+        `${APP_CONFIG.backendUrls.proxyMap}/ign?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1` +
+        '&request=GetMap&srs=EPSG:3857&width=512&height=512&transparent=true&layers=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&styles=normal',
+      ],
+      maxzoom: 21,
+    });
+
+    this._map.addLayer({
+      id: 'satellite-tiles-ign',
+      type: 'raster',
+      source: 'raster-tiles-ign',
+      paint: {
+        'raster-saturation': -0.5,
+      },
+    // tslint:disable-next-line: align
+    }, firstLayer.id);
+  }
+
   addSeparationTerritoryLayer() {
     // Add the Metropole polygon layer
     this._map.addSource('polygon-metropole', {
@@ -202,6 +228,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
         'line-width': 3,
         'line-offset': -1,
       },
+      minzoom: 9,
     });
 
     this._map.on('mouseenter', 'polygon-metropole', (e) => {
@@ -217,10 +244,10 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
         const popupText = this.lang === 'fr' ?
           '<p>Deux orthophotographies constituent la vue aérienne du territoire :</p>' +
           '<ul><li>À grande échelle : vue aérienne à très haute résolution réalisée par la Métropole de Lyon en 2018</li>' +
-          '<li>À petite échelle : vue aérienne à haute résolution réalisée par l’IGN en 2017</ul></p>' :
+          '<li>À moyenne échelle : vue aérienne à haute résolution réalisée par l’IGN en 2017</ul></p>' :
           '<p> Two orthophotographs constitute the aerial view of the territory: </p> ' +
           '<ul> <li> On a large scale: very high resolution aerial view taken by the Métropole de Lyon in 2018 </li>' +
-          '<li> On a small scale: high-resolution aerial view produced by IGN in 2017 </ul> </p>';
+          '<li> On a middle scale: high-resolution aerial view produced by IGN in 2017 </ul> </p>';
 
         const coordinates = e.lngLat;
         // Populate the popup and set its coordinates

src/assets/config/config.json

@@ -11,8 +11,7 @@
     "elasticsearch": "https://data-reloaded-dev.alpha.grandlyon.com/api/es-consumer-aware",
     "catalogue": "https://data-reloaded-dev.alpha.grandlyon.com/api/catalogue",
     "reuses": "https://data-reloaded-dev.alpha.grandlyon.com/api/reuses/reuses",
-    "wms": "https://data-reloaded-dev.alpha.grandlyon.com/api/services/wms",
-    "mvt": "https://data-reloaded-dev.alpha.grandlyon.com/api/services/mvt",
+    "proxyMap": "https://data-reloaded-dev.alpha.grandlyon.com/api/services",
     "geocoder": "https://download.data.grandlyon.com/geocoding/photon",
     "seo": "/share"
   },

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

@@ -6,16 +6,9 @@
       "tiles": [
         "https://ortho.data.grandlyon.com/?bbox={bbox-epsg-3857}&format=image/jpeg&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&transparent=true&layers=ortho2018"
       ],
-      "minzoom": 9,
-      "maxzoom": 21
-    },
-    "raster-tiles-ign": {
-      "type": "raster",
-      "tiles": [
-        "http://localhost:9000/ign?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=512&height=512&transparent=true&layers=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&styles=normal"
-      ],
       "maxzoom": 21,
-      "attribution": " © <a href='https://openmaptiles.org/'>OpenMapTiles</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
+      "attribution":
+      " © <a href='https://openmaptiles.org/'>OpenMapTiles</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
     },
     "openmaptiles": {
       "type": "vector",
@@ -28,18 +21,11 @@
   },
   "glyphs": "https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf",
   "layers": [
-     {
-       "id": "satellite-tiles-ign",
-       "type": "raster",
-       "source": "raster-tiles-ign",
-       "paint": {
-         "raster-saturation": -0.5
-       }
-     },
     {
       "id": "satellite-tiles",
       "type": "raster",
-      "source": "raster-tiles"
+      "source": "raster-tiles",
+      "minzoom": 9
     },
     {
       "id": "road_major_label",