feat(layers): Enhanced table of content for layers management (#625)

Co-authored-by: Pierre-Étienne Lord <[email protected]> Co-authored-by: Philippe <[email protected]> Co-authored-by: PhilippeL <[email protected]> Co-authored-by: Marc-André Barbeau <[email protected]>
infra-geo-ouverte · May 11, 2020 · 31c75a7 · 31c75a7
1 parent 20253a4
commit 31c75a7
Show file tree

Hide file tree

Showing 95 changed files with 2,459 additions and 538 deletions.
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -38,6 +38,7 @@ <h5>{{version.lib}}</h5>
 
         <a mat-list-item routerLink="simple-map">Simple map</a>
         <a mat-list-item routerLink="layer">Layer</a>
+        <a mat-list-item routerLink="legend">Legend</a>
         <a mat-list-item routerLink="overlay">Overlay</a>
         <a mat-list-item routerLink="geometry">Geometry</a>
         <a mat-list-item routerLink="feature">Feature</a>

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { AppAuthFormModule } from './auth/auth-form/auth-form.module';
 
 import { AppSimpleMapModule } from './geo/simple-map/simple-map.module';
 import { AppLayerModule } from './geo/layer/layer.module';
+import { AppLegendModule } from './geo/legend/legend.module';
 import { AppOverlayModule } from './geo/overlay/overlay.module';
 import { AppGeometryModule } from './geo/geometry/geometry.module';
 import { AppFeatureModule } from './geo/feature/feature.module';
@@ -83,6 +84,7 @@ import { AppComponent } from './app.component';
 
     AppSimpleMapModule,
     AppLayerModule,
+    AppLegendModule,
     AppOverlayModule,
     AppGeometryModule,
     AppFeatureModule,

diff --git a/demo/src/app/context/context/context.component.html b/demo/src/app/context/context/context.component.html
@@ -24,7 +24,7 @@
   </igo-panel>
 
   <igo-panel title="Layers">
-    <igo-layer-list igoLayerListBinding>
+    <igo-layer-list igoLayerListBinding [map]="map">
       <ng-template #igoLayerItemToolbar let-layer="layer">
         <igo-metadata-button [layer]="layer"></igo-metadata-button>
       </ng-template>

diff --git a/demo/src/app/geo/layer/layer.component.html b/demo/src/app/geo/layer/layer.component.html
@@ -15,6 +15,7 @@
 
   <igo-panel title="Layers">
     <igo-layer-list
+    [map]="map"
     [layers]="map.layers"
     [expandLegendOfVisibleLayers]="false"
     floatLabel="never"

diff --git a/demo/src/app/geo/layer/layer.component.ts b/demo/src/app/geo/layer/layer.component.ts
@@ -63,7 +63,7 @@ export class AppLayerComponent {
         fieldNameGeometry: 'geometry',
         maxFeatures: 10000,
         version: '2.0.0',
-        outputFormat: 'geojson_utf8',
+        outputFormat: undefined,
         outputFormatDownload: 'shp'
       },
       ogcFilters: {

diff --git a/demo/src/app/geo/legend/legend-routing.module.ts b/demo/src/app/geo/legend/legend-routing.module.ts
@@ -0,0 +1,15 @@
+import { Routes, RouterModule } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+
+import { AppLegendComponent } from './legend.component';
+
+const routes: Routes = [
+  {
+    path: 'legend',
+    component: AppLegendComponent
+  }
+];
+
+export const AppLegendRoutingModule: ModuleWithProviders = RouterModule.forChild(
+  routes
+);
diff --git a/demo/src/app/geo/legend/legend.component.html b/demo/src/app/geo/legend/legend.component.html
@@ -0,0 +1,27 @@
+<mat-card>
+  <mat-card-subtitle>Geo</mat-card-subtitle>
+  <mat-card-title>Simple Map with a legend list</mat-card-title>
+  <mat-card-content>
+    <li>Dependencies: LanguageService</li>
+
+    <br>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/layer">code of this
+      example</a>
+    <hr>
+  </mat-card-content>
+
+  <igo-map-browser [map]="map" [view]="view">
+    <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
+  </igo-map-browser>
+
+  <igo-panel title="Legends">
+    <igo-layer-legend-list [layers]="map.layers"
+    [excludeBaseLayers]="true"
+    [allowShowAllLegends]="true"
+    [updateLegendOnResolutionChange]="false"
+    [showAllLegendsValue]="false">
+  </igo-layer-legend-list>
+
+  </igo-panel>
+
+</mat-card>
diff --git a/demo/src/app/geo/legend/legend.component.scss b/demo/src/app/geo/legend/legend.component.scss
@@ -0,0 +1,9 @@
+igo-map-browser {
+  width: 100%;
+  height: 300px;
+}
+
+igo-panel {
+  width: 100%;
+  padding-top: 10px;
+}
diff --git a/demo/src/app/geo/legend/legend.component.ts b/demo/src/app/geo/legend/legend.component.ts
@@ -0,0 +1,221 @@
+import { Component } from '@angular/core';
+
+import { LanguageService } from '@igo2/core';
+import {
+  IgoMap,
+  DataSourceService,
+  LayerService,
+  WMSDataSourceOptions,
+  LayerOptions,
+  WFSDataSourceOptions,
+  OgcFilterableDataSourceOptions,
+  MetadataLayerOptions
+} from '@igo2/geo';
+
+@Component({
+  selector: 'app-legend',
+  templateUrl: './legend.component.html',
+  styleUrls: ['./legend.component.scss']
+})
+export class AppLegendComponent {
+  public map = new IgoMap({
+    controls: {
+      attribution: {
+        collapsed: true
+      }
+    }
+  });
+
+  public view = {
+    center: [-73, 47.2],
+    zoom: 7
+  };
+
+  constructor(
+    private languageService: LanguageService,
+    private dataSourceService: DataSourceService,
+    private layerService: LayerService
+  ) {
+    this.dataSourceService
+      .createAsyncDataSource({
+        type: 'osm'
+      })
+      .subscribe(dataSource => {
+        this.map.addLayer(
+          this.layerService.createLayer({
+            title: 'OSM',
+            visible: true,
+            baseLayer: true,
+            source: dataSource
+          })
+        );
+      });
+
+    interface WFSoptions
+      extends WFSDataSourceOptions,
+        OgcFilterableDataSourceOptions {}
+
+    const wfsDatasource: WFSoptions = {
+      type: 'wfs',
+      url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
+      params: {
+        featureTypes: 'vg_observation_v_autre_wmst',
+        fieldNameGeometry: 'geometry',
+        maxFeatures: 10000,
+        version: '2.0.0',
+        outputFormat: undefined,
+        outputFormatDownload: 'shp'
+      },
+      ogcFilters: {
+        enabled: true,
+        editable: true,
+        filters: {
+          operator: 'PropertyIsEqualTo',
+          propertyName: 'code_municipalite',
+          expression: '10043'
+        }
+      }
+    };
+
+    this.dataSourceService
+      .createAsyncDataSource(wfsDatasource)
+      .subscribe(dataSource => {
+        const layer: LayerOptions = {
+          title: 'WFS ',
+          visible: true,
+          source: dataSource
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+
+    this.layerService
+      .createAsyncLayer({
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
+          optionsFromCapabilities: true,
+          params: {
+            LAYERS: 'MELS_CS_ANGLO_S',
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'Réseau routier',
+        visible: false,
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
+          params: {
+            LAYERS: 'bgr_v_sous_route_res_sup_act',
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'lieu habité',
+        visible: false,
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
+          optionsFromCapabilities: true,
+          params: {
+            LAYERS: 'lieuhabite',
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'sh_dis_eco',
+        visible: false,
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/mffpecofor.fcgi',
+          optionsFromCapabilities: true,
+          params: {
+            LAYERS: 'sh_dis_eco',
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'nurc:Arc_Sample_Parent',
+        visible: false,
+        legendOptions: {
+          // collapsed: false,
+          display: true,
+          // url: 'https://v.seloger.com/s/width/1144/visuels/0/m/l/4/0ml42xbt1n3itaboek3qec5dtskdgw6nlscu7j69k.jpg',
+          stylesAvailable: [
+            { name: 'rain', title: 'Pluie' },
+            { name: 'raster', title: 'Défaut' }
+          ] //
+        },
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://demo.geo-solutions.it/geoserver/ows',
+          optionsFromCapabilities: true,
+          params: {
+            LAYERS: 'nurc:Arc_Sample', // , test:Linea_costa
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'Avertissements routier',
+        visible: false,
+        sourceOptions: {
+          type: 'wms',
+          url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
+          params: {
+            LAYERS: 'evenements',
+            VERSION: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
+
+    const datasource: WMSDataSourceOptions = {
+      type: 'wms',
+      url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
+      refreshIntervalSec: 15,
+      params: {
+        LAYERS: 'vg_observation_v_inondation_embacle_wmst',
+        VERSION: '1.3.0'
+      }
+    };
+
+    interface LayerOptionsWithMetadata
+      extends LayerOptions,
+        MetadataLayerOptions {}
+
+    this.dataSourceService
+      .createAsyncDataSource(datasource)
+      .subscribe(dataSource => {
+        const layer: LayerOptionsWithMetadata = {
+          title: 'Embâcle',
+          source: dataSource,
+          metadata: {
+            url:
+              'https://www.donneesquebec.ca/recherche/fr/dataset/historique-publique-d-embacles-repertories-au-msp',
+            extern: true
+          }
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+  }
+}
diff --git a/demo/src/app/geo/legend/legend.module.ts b/demo/src/app/geo/legend/legend.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import {
+  MatCardModule,
+  MatButtonModule,
+  MatIconModule
+} from '@angular/material';
+
+import { IgoPanelModule } from '@igo2/common';
+import {
+  IgoMapModule,
+  IgoLayerModule,
+  IgoFilterModule,
+  IgoMetadataModule,
+  IgoDownloadModule
+} from '@igo2/geo';
+
+import { AppLegendComponent } from './legend.component';
+import { AppLegendRoutingModule } from './legend-routing.module';
+
+@NgModule({
+  declarations: [AppLegendComponent],
+  imports: [
+    AppLegendRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    IgoPanelModule,
+    IgoMapModule,
+    IgoLayerModule,
+    IgoFilterModule,
+    IgoMetadataModule,
+    IgoDownloadModule
+  ],
+  exports: [AppLegendComponent]
+})
+export class AppLegendModule {}
diff --git a/demo/src/app/geo/ogc-filter/ogc-filter.component.ts b/demo/src/app/geo/ogc-filter/ogc-filter.component.ts
@@ -62,7 +62,7 @@ export class AppOgcFilterComponent {
         fieldNameGeometry: 'geometry',
         maxFeatures: 10000,
         version: '2.0.0',
-        outputFormat: 'geojson',
+        outputFormat: undefined,
         outputFormatDownload: 'SHP' // based on service capabilities
       },
       sourceFields: [

diff --git a/packages/context/src/lib/share-map/index.ts b/packages/context/src/lib/share-map/index.ts
@@ -1,3 +1,2 @@
 export * from './shared';
 export * from './share-map/share-map.component';
-export * from './share-map/share-map-binding.directive';
diff --git a/packages/context/src/lib/share-map/share-map.module.ts b/packages/context/src/lib/share-map/share-map.module.ts
@@ -12,7 +12,6 @@ import {
 import { IgoLanguageModule } from '@igo2/core';
 
 import { ShareMapComponent } from './share-map/share-map.component';
-import { ShareMapBindingDirective } from './share-map/share-map-binding.directive';
 
 @NgModule({
   imports: [
@@ -26,8 +25,8 @@ import { ShareMapBindingDirective } from './share-map/share-map-binding.directiv
     MatButtonModule,
     IgoLanguageModule
   ],
-  exports: [ShareMapComponent, ShareMapBindingDirective],
-  declarations: [ShareMapComponent, ShareMapBindingDirective]
+  exports: [ShareMapComponent],
+  declarations: [ShareMapComponent]
 })
 export class IgoShareMapModule {
   static forRoot(): ModuleWithProviders {