Add the WMS layer for the style + the MVT layer for the interaction. Resize...

Add the WMS layer for the style + the MVT layer for the interaction. Resize the map on container size change

src/app/editorialisation/components/reuse-detail/reuse-detail.component.ts

@@ -53,7 +53,6 @@ export class ReuseDetailComponent implements OnInit {
               if (!(metadata.image && metadata.image.url)) {
                 this.setBackupImage(metadata);
               }
-              console.log(metadata)
               return metadata;
             }
           });

src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html

-<app-map></app-map>
\ No newline at end of file
+<div>
+  <ng-container *ngIf="metadata">
+    <app-map [metadata]="metadata"></app-map>
+  </ng-container>
+</div>
\ No newline at end of file

src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss

 @import "../../../../../scss/variables";
 
+div {
+  height: 100%;
+}
+
+.mapboxgl-canvas {
+  height: 100%;
+  width: 100%;
+}
+
 // .restricted-access-container {
 //   margin-top: -2rem;
 //   margin-left: -1.25rem;

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

-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { MapService } from '../../../../map/services/map.service';
 import { DatasetDetailService } from '../../../services';
+import { Subscription } from 'rxjs';
+import { Metadata } from '../../../models';
+import { MapComponent } from '../../../../map/components';
 
 @Component({
   selector: 'app-dataset-map',
@@ -10,8 +13,12 @@ import { DatasetDetailService } from '../../../services';
 
 export class DatasetMapComponent implements OnInit {
 
+  @ViewChild(MapComponent) mapComponent: MapComponent;
+
   mapLoaded: boolean;
   isSample = false;
+  datasetSub: Subscription; // Subscription to dataset change
+  metadata: Metadata;
 
   constructor(
     private _mapService: MapService,
@@ -19,12 +26,24 @@ export class DatasetMapComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.metadata = this._datasetDetailService.datasetMetadata;
+
+    // Subcribe to the dataset changes in the service. When the dataset is loaded
+    // (with the metadata), we construct the map and display the features
+    this.datasetSub = this._datasetDetailService.dataset$.subscribe(() => {
+      this.metadata = this._datasetDetailService.datasetMetadata;
+    });
+
     this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
     this._mapService.map$.subscribe(() => {
       this.mapLoaded = true;
     });
   }
 
+  reDraw() {
+    this.mapComponent.reDraw();
+  }
+
   // Generate the url with map options
   // http://hostName#zoom/latitude/longitude/bearing/pitch
   // getPermalinkUrl() {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { DatasetDetailService } from '../../../services';
 import { linkFormats } from '../../../models/metadata.model';
+import { DatasetMapComponent } from '../dataset-map/dataset-map.component';
 
 @Component({
   selector: 'app-dataset-table-map',
   templateUrl: './dataset-table-map.component.html',
-  styleUrls: ['./dataset-table-map.component.scss']
+  styleUrls: ['./dataset-table-map.component.scss'],
 })
 export class DatasetTableMapComponent implements OnInit {
 
+  @ViewChild(DatasetMapComponent) datasetMapComponent: DatasetMapComponent;
+
   // Component state
   fullscreen = false;
   displayColumnsMenu = false;
@@ -29,18 +32,30 @@ export class DatasetTableMapComponent implements OnInit {
 
   toogleFullscreen() {
     this.fullscreen = !this.fullscreen;
-    // setTimeout(() => { this.map.resize(); }, 1);
+    // Redraw the map
+    setTimeout(() => {
+      this.datasetMapComponent.reDraw();
+    // tslint:disable-next-line: align
+    }, 1);
   }
 
   toogleMap() {
     if (this.hasTable && this.tableIsEnabled) {
       this.mapIsEnabled = !this.mapIsEnabled;
+      setTimeout(() => {
+        this.datasetMapComponent.reDraw();
+      // tslint:disable-next-line: align
+      }, 1);
     }
   }
 
   toogleTable() {
     if (this.hasMap && this.mapIsEnabled) {
       this.tableIsEnabled = !this.tableIsEnabled;
+      setTimeout(() => {
+        this.datasetMapComponent.reDraw();
+      // tslint:disable-next-line: align
+      }, 1);
     }
   }
 

src/app/map/components/map.component.ts

-import { Component, OnInit, OnDestroy, Input, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import * as mapboxgl from 'mapbox-gl';
 import { Subscription } from 'rxjs';
 import { Metadata } from '../../geosource/models';
-import { DatasetDetailService } from '../../geosource/services';
 import { MapService } from '../services/map.service';
 import { settings } from '../settings';
 import { geosource } from '../../../i18n/traductions';
 import { linkFormats } from '../../geosource/models/metadata.model';
-import { FormControl } from '@angular/forms';
-import { debounceTime } from 'rxjs/operators';
 import { GeocoderService } from '../services/geocoder.service';
 
 @Component({
@@ -19,12 +16,12 @@ import { GeocoderService } from '../services/geocoder.service';
 
 export class MapComponent implements OnInit, OnDestroy {
 
+  @Input() metadata: Metadata;
+
   settings = settings;
   linkFormats = linkFormats;
   lang: string; // (fr or en)
 
-  metadata: Metadata;
-  sub: Subscription; // Subscription to dataset change
   featuresToChange: Subscription;
 
   map: mapboxgl.Map;
@@ -45,6 +42,7 @@ export class MapComponent implements OnInit, OnDestroy {
 
   previousDatasetId: string;
   currentLayerType: string;
+  availableLayers: string[];
 
   baseLayer3d = 1;
   displayControls = false;
@@ -54,22 +52,21 @@ export class MapComponent implements OnInit, OnDestroy {
 
   searchLocationResult = [];
   markerLocation: mapboxgl.Marker;
-  // markerLocation: HTMLDivElement;
 
   constructor(
-    private _datasetDetailService: DatasetDetailService,
     private _mapService: MapService,
     private _geocoderService: GeocoderService,
   ) { }
 
   ngOnInit() {
-    this.initilizeLanguage();
 
     // Geolocation availability in the browser
     if ('geolocation' in navigator) {
       this.geolocation = true;
     }
 
+    this.initilizeLanguage();
+    this.initAvailableLayers();
     this.constructMap();
 
     // Events received here contain a state (if the data-detail panel has to be displayed or not)
@@ -81,41 +78,33 @@ export class MapComponent implements OnInit, OnDestroy {
       }
     });
 
-    // Subcribe to the dataset changes in the service. When the dataset is loaded
-    // (with the metadata), we construct the map and display the features
-    this.sub = this._datasetDetailService.dataset$.subscribe(() => {
-      this.constructMap();
-    });
-
-    // Display the update button when the service tell us the need
-    // to update the features (after and zoom interaction)
-    this._mapService.featuresToUpdate$.subscribe(() => {
-      if (this._datasetDetailService.datasetDataNumber > this.settings.maxDisplayFeatures) {
-        this.displayUpdateFeatures = true;
-      }
-      this.displayMessageLimitedFeatures = false;
-    });
-
-    // When features have been loaded, we hide the update button
-    this._mapService.mapUpdated$.subscribe((totalData) => {
-      this.displayUpdateFeatures = false;
-      this.displaySpinner = false;
-      if (totalData > this.settings.maxDisplayFeatures && this._datasetDetailService.datasetDataNumber < 100000) {
-        this.displayMessageLimitedFeatures = true;
-        this.totalData = totalData;
-      }
-    });
+  }
 
+  reDraw() {
+    console.log('resize');
+    this.map.resize();
   }
 
   // To avoid call the constructMap when we left the component
   // (because this is a custom observable, this is not automatically unsubscribed
   // when the component is destroyed)
   ngOnDestroy() {
-    this.sub.unsubscribe();
     this._mapService.destroyMap();
   }
 
+  initAvailableLayers() {
+    this.availableLayers = [];
+    this.metadata.link.forEach((link) => {
+      this.availableLayers.push(link.service);
+    });
+    if (this.availableLayers.includes(linkFormats.wfs)) {
+      this.currentLayerType = linkFormats.wfs;
+    } else {
+      this.currentLayerType = linkFormats.wms;
+    }
+
+  }
+
   searchAdress(value: string) {
     // Subscribe to search location input
     const item = this.searchLocationResult.find(e => e.caption === value);
@@ -176,7 +165,6 @@ export class MapComponent implements OnInit, OnDestroy {
   // When we get a metadata, we display the following:
   // - load Mapbox style file to get the styles and the base layers (vector, plan, satellite)
   constructMap() {
-    this.metadata = this._datasetDetailService.datasetMetadata;
 
     if (this.metadata) {
 
@@ -233,20 +221,13 @@ export class MapComponent implements OnInit, OnDestroy {
 
       // Create the map with the associated style Mapbox file
       this.displayControls = true;
-      this.map = this._mapService.createMap(url, this.selectedBaseLayer, this.displayControls, options);
-
-      // We create and add the layers (WMS/WFS) when the base layer is loaded
-      // (and not on map loaded, because when the style is refreshed, it removes all the sources associated)
+      this.map = this._mapService.createMap(this.metadata, url, this.selectedBaseLayer, this.displayControls, options);
       this.map.on('style.load', () => {
         this._mapService.addLayers();
         this.currentLayerType = this._mapService.currentLayerType;
-        // When we come from a copy link, we need to update the features with the new bounding box
-        if (parameters.length === 6) {
-          this.updateFeatures();
-        }
-      });
 
-      this._mapService.previousDatasetId = this.metadata.dataset_id;
+        this._mapService.previousDatasetId = this.metadata.dataset_id;
+      });
     }
   }
 
@@ -255,11 +236,6 @@ export class MapComponent implements OnInit, OnDestroy {
     this._mapService.switchLayer(baseLayer);
   }
 
-  updateFeatures() {
-    this.displaySpinner = true;
-    this._mapService.updateFeatures();
-  }
-
   // Looks for the language to be used, if not indicated in the url takes the navigator default language
   initilizeLanguage() {
     let language = window.location.pathname.split('/')[1];

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

@@ -33,7 +33,7 @@ export class GeocoderService {
             caption = `${name}, ${city} ${postalCode}`;
           } else if (street) {
             caption = `${street}, ${city} ${postalCode}`;
-          } 
+          }
 
           if (!caption) {
             console.log("couldn't format caption");