feat(layer): rewrite route param visiblelayers

src/lib/context/shared/layer-context.directive.ts

@@ -1,6 +1,7 @@
-import { Directive, Self, OnInit, OnDestroy } from '@angular/core';
+import { Directive, Self, OnInit, OnDestroy, Optional } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
+import { RouteService } from '../../core';
 import { IgoMap, MapBrowserComponent } from '../../map';
 import { DataSourceService } from '../../datasource/shared';
 import { LayerService } from '../../layer/shared';
@@ -15,6 +16,7 @@ import { DetailedContext, ContextLayer } from './context.interface';
 export class LayerContextDirective implements OnInit, OnDestroy {
 
   private context$$: Subscription;
+  private queryParams: any;
 
   get map(): IgoMap {
     return this.component.map;
@@ -23,12 +25,23 @@ export class LayerContextDirective implements OnInit, OnDestroy {
   constructor(@Self() private component: MapBrowserComponent,
               private contextService: ContextService,
               private dataSourceService: DataSourceService,
-              private layerService: LayerService) {}
+              private layerService: LayerService,
+              @Optional() private route: RouteService) {}
 
   ngOnInit() {
     this.context$$ = this.contextService.context$
       .filter(context => context !== undefined)
       .subscribe(context => this.handleContextChange(context));
+
+    if (this.route && this.route.options.visibleOnLayersKey &&
+        this.route.options.visibleOffLayersKey &&
+        this.route.options.contextKey ) {
+
+      const queryParams$$ = this.route.queryParams.skip(1).subscribe(params => {
+        this.queryParams = params;
+        queryParams$$.unsubscribe();
+      });
+    }
   }
 
   ngOnDestroy() {
@@ -55,9 +68,57 @@ export class LayerContextDirective implements OnInit, OnDestroy {
     this.dataSourceService
       .createAsyncDataSource(dataSourceContext)
       .subscribe(dataSource =>  {
+        this.getLayerParamVisibilityUrl(dataSource.id, layerContext);
         this.map.addLayer(
           this.layerService.createLayer(dataSource, layerContext));
       });
   }
 
+  private getLayerParamVisibilityUrl(id, layer) {
+    const params = this.queryParams;
+    const current_context = this.contextService.context$.value['uri'];
+    const current_layerid: string = id;
+
+    if (!params || !current_layerid) {
+      return;
+    }
+
+    const contextParams = params[this.route.options.contextKey as string];
+    if (contextParams === current_context || !contextParams) {
+       let visibleOnLayersParams = '';
+       let visibleOffLayersParams = '';
+       let visiblelayers: string[] = [];
+       let invisiblelayers: string[] = [];
+
+       if (this.route.options.visibleOnLayersKey &&
+         params[this.route.options.visibleOnLayersKey as string]) {
+         visibleOnLayersParams = params[this.route.options.visibleOnLayersKey as string];
+       }
+       if (this.route.options.visibleOffLayersKey &&
+         params[this.route.options.visibleOffLayersKey as string]) {
+         visibleOffLayersParams = params[this.route.options.visibleOffLayersKey as string];
+       }
+
+       /* This order is important because to control whichever
+       the order of * param. First whe open and close everything.*/
+       if (visibleOnLayersParams === '*') {
+         layer.visible = true;
+       }
+       if (visibleOffLayersParams === '*') {
+         layer.visible = false;
+       }
+
+       // After, managing named layer by id (context.json OR id from datasource)
+       visiblelayers =  visibleOnLayersParams.split(',');
+       invisiblelayers =  visibleOffLayersParams.split(',');
+       if (visiblelayers.indexOf(current_layerid) > -1) {
+         layer.visible = true;
+       }
+       if (invisiblelayers.indexOf(current_layerid) > -1) {
+         layer.visible = false;
+       }
+
+     }
+   }
+
 }

src/lib/datasource/shared/datasources/feature-datasource.ts

@@ -16,6 +16,7 @@ export class FeatureDataSource extends DataSource {
   }
 
   protected generateId() {
+    if (!this.options.url) { return; }
     const chain = 'feature' + this.options.url;
     return Md5.hashStr(chain) as string;
   }

src/lib/layer/layer-item/layer-item.component.html

@@ -7,7 +7,7 @@
     [collapsed]="layer.collapsed"
     (toggle)="toggleLegend($event)">
   </md-icon>
-  <h4 mdLine [md-tooltip]="layer.title +' ('+ this.getCurrentLayerId()+') '" mdTooltipShowDelay="500">{{layer.title}}</h4>
+  <h4 mdLine [md-tooltip]="layer.title +' ('+ id +') '" mdTooltipShowDelay="500">{{layer.title}}</h4>
 
   <button
     md-icon-button

src/lib/layer/layer-item/layer-item.component.ts

@@ -1,19 +1,17 @@
-import { Component, Input, OnDestroy, OnInit, ChangeDetectorRef,
-         ChangeDetectionStrategy, Optional } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectorRef,
+         ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
 import { MetadataService, MetadataOptions } from '../../metadata';
 import { Layer } from '../shared/layers/layer';
-import { ContextService } from '../../context/shared';
-import { RouteService } from '../../core';
 
 @Component({
   selector: 'igo-layer-item',
   templateUrl: './layer-item.component.html',
   styleUrls: ['./layer-item.component.styl'],
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class LayerItemComponent implements OnInit, OnDestroy {
+export class LayerItemComponent implements OnDestroy {
 
   @Input()
   get layer(): Layer { return this._layer; }
@@ -54,67 +52,19 @@ export class LayerItemComponent implements OnInit, OnDestroy {
     this.layer.opacity = opacity / 100;
   }
 
+  get id(): string {
+    return this.layer.dataSource.options['id'] ?
+    this.layer.dataSource.options['id'] : this.layer.id;
+  }
+
   private resolution$$: Subscription;
 
   constructor(private cdRef: ChangeDetectorRef,
-              private metadataService: MetadataService,
-              private contextService: ContextService,
-              @Optional() private route: RouteService) {}
+              private metadataService: MetadataService) {}
 
   ngOnDestroy() {
     this.resolution$$.unsubscribe();
   }
-  getCurrentLayerId(): any {
-    return this.layer.dataSource.options['id'] ?
-    this.layer.dataSource.options['id'] : this.layer.id;
-  }
-  ngOnInit() {
-    this.getLayerParamVisibilityUrl();
-   }
-
-   private getLayerParamVisibilityUrl() {
-    const current_context = this.contextService.context$.value['uri'];
-    const current_layerid: string = this.getCurrentLayerId();
-    if (this.route && this.route.options.visibleOnLayersKey &&
-      this.route.options.visibleOffLayersKey &&
-      this.route.options.contextKey ) {
-      this.route.queryParams.subscribe(params => {
-              const contextParams =  params[this.route.options.contextKey as string];
-              if (contextParams === current_context || current_context === '_default' ) {
-                let visibleOnLayersParams = '';
-                let visibleOffLayersParams = '';
-                let visiblelayers: string[] = [];
-                let invisiblelayers: string[] = [];
-
-                if (this.route.options.visibleOnLayersKey &&
-                  params[this.route.options.visibleOnLayersKey as string]) {
-                  visibleOnLayersParams = params[this.route.options.visibleOnLayersKey as string];
-                }
-                if (this.route.options.visibleOffLayersKey &&
-                  params[this.route.options.visibleOffLayersKey as string]) {
-                  visibleOffLayersParams = params[this.route.options.visibleOffLayersKey as string];
-                }
-                /* This order is important because to control whichever
-                the order of * param. First whe open and close everything.*/
-                if (visibleOnLayersParams === '*') {
-                  this.layer.visible = true;
-                }
-                if (visibleOffLayersParams === '*') {
-                  this.layer.visible = false;
-                }
-                // After, managing named layer by id (context.json OR id from datasource)
-                visiblelayers =  visibleOnLayersParams.split(',');
-                invisiblelayers =  visibleOffLayersParams.split(',');
-                if (visiblelayers.indexOf(current_layerid) > -1) {
-                  this.layer.visible = true;
-                }
-                if (invisiblelayers.indexOf(current_layerid) > -1) {
-                  this.layer.visible = false;
-                }
-              }
-      });
-    }
-  }
 
   toggleLegend(collapsed: boolean) {
     this.layer.collapsed = collapsed;