diff --git a/packages/context/src/lib/context-manager/shared/layer-context.directive.ts b/packages/context/src/lib/context-manager/shared/layer-context.directive.ts
index c5f9916a61..a8a6f1302e 100644
--- a/packages/context/src/lib/context-manager/shared/layer-context.directive.ts
+++ b/packages/context/src/lib/context-manager/shared/layer-context.directive.ts
@@ -7,6 +7,7 @@ import { RouteService } from '@igo2/core';
 import {
   IgoMap,
   MapBrowserComponent,
+  Layer,
   LayerService,
   LayerOptions
 } from '@igo2/geo';
@@ -18,9 +19,12 @@ import { DetailedContext } from './context.interface';
   selector: '[igoLayerContext]'
 })
 export class LayerContextDirective implements OnInit, OnDestroy {
+
   private context$$: Subscription;
   private queryParams: any;
 
+  private contextLayers: Layer[] = [];
+
   get map(): IgoMap {
     return this.component.map;
   }
@@ -57,14 +61,13 @@ export class LayerContextDirective implements OnInit, OnDestroy {
   }
 
   private handleContextChange(context: DetailedContext) {
-    if (context.layers === undefined) {
-      return;
-    }
+    if (context.layers === undefined) { return; }
 
-    this.map.removeLayers();
+    this.map.removeLayers(this.contextLayers);
+    this.contextLayers = [];
 
-    context.layers.forEach(contextLayer => {
-      this.addLayerToMap(contextLayer);
+    context.layers.forEach((layerOptions: LayerOptions) => {
+      this.addLayerToMap(layerOptions);
     });
   }
 
@@ -87,7 +90,7 @@ export class LayerContextDirective implements OnInit, OnDestroy {
           layer.id,
           layer
         );
-
+        this.contextLayers.push(layer);
         this.map.addLayer(layer);
       });
   }
diff --git a/packages/geo/src/lib/feature/shared/strategies/selection.ts b/packages/geo/src/lib/feature/shared/strategies/selection.ts
index bb1a49d246..c9a905b27f 100644
--- a/packages/geo/src/lib/feature/shared/strategies/selection.ts
+++ b/packages/geo/src/lib/feature/shared/strategies/selection.ts
@@ -261,7 +261,8 @@ export class FeatureStoreSelectionStrategy extends FeatureStoreStrategy {
     const overlayLayer = new VectorLayer({
       zIndex: 200,
       source: new FeatureDataSource(),
-      style: this.options ? this.options.style : undefined
+      style: this.options ? this.options.style : undefined,
+      showInLayerList: false
     });
 
     return new FeatureStore([], {map: this.map}).bindLayer(overlayLayer);
@@ -272,8 +273,7 @@ export class FeatureStoreSelectionStrategy extends FeatureStoreStrategy {
    * features.
    */
   private addOverlayLayer() {
-    // TODO: why do we need to cast as any?
-    this.map.addLayer(this.overlayStore.layer as any, false);
+    this.map.ol.addLayer(this.overlayStore.layer.ol);
   }
 
   /**
@@ -281,8 +281,6 @@ export class FeatureStoreSelectionStrategy extends FeatureStoreStrategy {
    */
   private removeOverlayLayer() {
     this.overlayStore.source.ol.clear();
-    // Remove directly from the olMap because, for some reason,
-    // removing from the IgoMap doesn't remove the layer
     this.map.ol.removeLayer(this.overlayStore.layer.ol);
   }
 }
diff --git a/packages/geo/src/lib/import-export/shared/import-export.service.ts b/packages/geo/src/lib/import-export/shared/import-export.service.ts
index 7fe02b475e..b5aad6d2be 100644
--- a/packages/geo/src/lib/import-export/shared/import-export.service.ts
+++ b/packages/geo/src/lib/import-export/shared/import-export.service.ts
@@ -3,6 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import * as olformat from 'ol/format';
 import * as olstyle from 'ol/style';
+import OlFeature from 'ol/Feature';
 
 import { ConfigService, MessageService, LanguageService } from '@igo2/core';
 import { MapService } from '../../map/shared/map.service';
@@ -73,15 +74,24 @@ export class ImportExportService {
   public export(data: ExportOptions) {
     const map = this.mapService.getMap();
     const layer = map.getLayerById(data.layer);
-    const source: any = layer.ol.getSource();
+    const olSource = layer.ol.getSource();
 
-    const formatStr: any = data.format;
+    const formatStr = data.format;
     const format =
       data.format === 'shapefile'
         ? new olformat.GeoJSON()
         : new olformat[formatStr]();
 
-    const featuresText = format.writeFeatures(source.getFeatures(), {
+    const olFeatures = olSource.getFeatures().map((olFeature: OlFeature) => {
+      const keys = olFeature.getKeys().filter((key: string) => !key.startsWith('_'));
+      const properties = keys.reduce((acc: object, key: string) => {
+        acc[key] = olFeature.get(key);
+        return acc;
+      }, {geometry: olFeature.getGeometry()});
+      return new OlFeature(properties);
+    });
+
+    const featuresText = format.writeFeatures(olFeatures, {
       dataProjection: 'EPSG:4326',
       featureProjection: map.projection,
       featureType: 'feature',
diff --git a/packages/geo/src/lib/layer/layer-item/layer-item.component.html b/packages/geo/src/lib/layer/layer-item/layer-item.component.html
index fbc56bcd17..2a81aea535 100644
--- a/packages/geo/src/lib/layer/layer-item/layer-item.component.html
+++ b/packages/geo/src/lib/layer/layer-item/layer-item.component.html
@@ -57,9 +57,9 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
   </div>
 
   <div class="igo-col igo-col-100 igo-col-100-m">
-      <div class="igo-layer-button-group">
+    <div class="igo-layer-button-group">
       <button
-        *ngIf="isVectorLayer(layer)"
+        *ngIf="isVectorLayer(layer) && browsable === true"
         mat-icon-button
         tooltip-position="below"
         matTooltipShowDelay="500"
@@ -92,6 +92,7 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
       </button>
 
       <button
+        *ngIf="removable === true"
         mat-icon-button
         tooltip-position="below"
         matTooltipShowDelay="500"
diff --git a/packages/geo/src/lib/layer/layer-item/layer-item.component.ts b/packages/geo/src/lib/layer/layer-item/layer-item.component.ts
index 98c12f5a8f..af85e0b2e7 100644
--- a/packages/geo/src/lib/layer/layer-item/layer-item.component.ts
+++ b/packages/geo/src/lib/layer/layer-item/layer-item.component.ts
@@ -11,7 +11,7 @@ import olFormatGeoJSON from 'ol/format/GeoJSON';
 
 import { MapService } from '../../map/shared/map.service';
 // import { FeatureService } from '../../feature/shared/feature.service';
-import { Layer, VectorLayer } from '../shared/layers';
+import { Layer, VectorLayer, VectorLayerOptions } from '../shared/layers';
 
 @Component({
   selector: 'igo-layer-item',
@@ -20,10 +20,12 @@ import { Layer, VectorLayer } from '../shared/layers';
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class LayerItemComponent implements OnDestroy {
+
+  legendCollapsed = true;
+
+  private resolution$$: Subscription;
+
   @Input()
-  get layer(): Layer {
-    return this._layer;
-  }
   set layer(value: Layer) {
     this._layer = value;
     this.subscribeResolutionObserver();
@@ -32,60 +34,31 @@ export class LayerItemComponent implements OnDestroy {
       this.legendCollapsed = legend.collapsed;
     }
   }
+  get layer(): Layer { return this._layer; }
   private _layer: Layer;
 
-  @Input()
-  get edition() {
-    return this._edition;
-  }
-  set edition(value: boolean) {
-    this._edition = value;
-  }
-  private _edition = false;
+  @Input() edition: boolean = false;
 
-  @Input()
-  get color() {
-    return this._color;
-  }
-  set color(value: string) {
-    this._color = value;
-  }
-  private _color = 'primary';
+  @Input() color: string = 'primary';
 
-  @Input()
-  get toggleLegendOnVisibilityChange() {
-    return this._toggleLegendOnVisibilityChange;
-  }
-  set toggleLegendOnVisibilityChange(value: boolean) {
-    this._toggleLegendOnVisibilityChange = value;
-  }
-  private _toggleLegendOnVisibilityChange = false;
+  @Input() toggleLegendOnVisibilityChange: boolean = false;
 
-  @Input()
-  get disableReorderLayers() {
-    return this._disableReorderLayers;
-  }
-  set disableReorderLayers(value: boolean) {
-    this._disableReorderLayers = value;
-  }
-  private _disableReorderLayers = false;
+  @Input() disableReorderLayers: boolean = false;
 
-  get opacity() {
-    return this.layer.opacity * 100;
+  get id(): string {
+    const dataSourceOptions = this.layer.dataSource.options as any;
+    return dataSourceOptions.id ? dataSourceOptions.id : this.layer.id;
   }
 
-  set opacity(opacity: number) {
-    this.layer.opacity = opacity / 100;
-  }
+  get removable(): boolean { return this.layer.options.removable !== false; }
 
-  get id(): string {
-    return (this.layer.dataSource.options as any).id
-      ? (this.layer.dataSource.options as any).id
-      : this.layer.id;
+  get browsable(): boolean {
+    const options = this.layer.options as any as VectorLayerOptions;
+    return options.browsable !== false;
   }
 
-  public legendCollapsed = true;
-  private resolution$$: Subscription;
+  get opacity() { return this.layer.opacity * 100; }
+  set opacity(opacity: number) { this.layer.opacity = opacity / 100; }
 
   constructor(
     // private featureService: FeatureService,
@@ -112,6 +85,8 @@ export class LayerItemComponent implements OnDestroy {
   }
 
   showFeaturesList(layer: Layer) {
+    return;
+
     // this.featureService.unfocusFeature();
     // this.featureService.unselectFeature();
 
diff --git a/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts b/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts
index 5b4386dbbe..f7190a7ed5 100644
--- a/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts
+++ b/packages/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts
@@ -5,6 +5,7 @@ import { RouteService } from '@igo2/core';
 import { MapService } from '../../map/shared/map.service';
 import { LayerListComponent } from './layer-list.component';
 import { LayerListService } from './layer-list.service';
+import { Layer } from '../shared/layers/layer';
 
 @Directive({
   selector: '[igoLayerListBinding]'
@@ -28,7 +29,11 @@ export class LayerListBindingDirective implements OnInit, AfterViewInit, OnDestr
 
     this.layers$$ = this.mapService
       .getMap()
-      .layers$.subscribe(layers => (this.component.layers = layers));
+      .layers$.subscribe((layers: Layer[]) => {
+        this.component.layers = layers.filter((layer: Layer) => {
+          return layer.options.showInLayerList !== false;
+        });
+      });
   }
 
   ngAfterViewInit(): void {
diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.ts b/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
index 12ef358e3b..c2cd00f3c3 100644
--- a/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
+++ b/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
@@ -29,6 +29,7 @@ export class LayerListComponent implements AfterViewInit {
 
   @Input()
   get layers(): Layer[] {
+    // Should all of this be in the getter??
     if (this.excludeBaseLayers) {
       if (this._layers.filter(f => f.visible === false && !f.baseLayer).length >= 1) {
         this.hasLayerNotVisible = true;
diff --git a/packages/geo/src/lib/layer/shared/layers/image-layer.ts b/packages/geo/src/lib/layer/shared/layers/image-layer.ts
index d247c4c81c..1983e6f982 100644
--- a/packages/geo/src/lib/layer/shared/layers/image-layer.ts
+++ b/packages/geo/src/lib/layer/shared/layers/image-layer.ts
@@ -39,14 +39,13 @@ export class ImageLayer extends Layer {
     return image;
   }
 
-  public add(map: IgoMap) {
-    this.watcher.subscribe(() => {});
-    super.add(map);
-  }
-
-  public remove() {
-    this.watcher.unsubscribe();
-    super.remove();
+  public setMap(map: IgoMap | undefined) {
+    if (map === undefined) {
+      this.watcher.unsubscribe();
+    } else {
+      this.watcher.subscribe(() => {});
+    }
+    super.setMap(map);
   }
 
   private customLoader(tile, src, token?) {
diff --git a/packages/geo/src/lib/layer/shared/layers/layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/layer.interface.ts
index c429c79633..e0b38c7769 100644
--- a/packages/geo/src/lib/layer/shared/layers/layer.interface.ts
+++ b/packages/geo/src/lib/layer/shared/layers/layer.interface.ts
@@ -15,6 +15,8 @@ export interface LayerOptions {
   zIndex?: number;
   minResolution?: number;
   maxResolution?: number;
+  showInLayerList?: boolean;
+  removable?: boolean;
   ol?: olLayer;
 }
 
@@ -23,3 +25,9 @@ export interface GroupLayers {
   layers?: LayerOptions;
   collapsed?: boolean;
 }
+
+export interface LayerLegend {
+  title: string;
+  url: string;
+  image: string;
+}
diff --git a/packages/geo/src/lib/layer/shared/layers/layer.ts b/packages/geo/src/lib/layer/shared/layers/layer.ts
index f3369cbcfb..b0aba9c8a6 100644
--- a/packages/geo/src/lib/layer/shared/layers/layer.ts
+++ b/packages/geo/src/lib/layer/shared/layers/layer.ts
@@ -92,15 +92,7 @@ export abstract class Layer {
 
   protected abstract createOlLayer(): olLayer;
 
-  add(map: IgoMap) {
+  setMap(map: IgoMap | undefined) {
     this.map = map;
-    map.ol.addLayer(this.ol);
-  }
-
-  remove() {
-    if (this.map) {
-      this.map.ol.removeLayer(this.ol);
-      this.map = undefined;
-    }
   }
 }
diff --git a/packages/geo/src/lib/layer/shared/layers/tile-layer.ts b/packages/geo/src/lib/layer/shared/layers/tile-layer.ts
index 66f08f571e..bc2d00c351 100644
--- a/packages/geo/src/lib/layer/shared/layers/tile-layer.ts
+++ b/packages/geo/src/lib/layer/shared/layers/tile-layer.ts
@@ -40,13 +40,12 @@ export class TileLayer extends Layer {
     return new olLayerTile(olOptions);
   }
 
-  public add(map: IgoMap) {
-    this.watcher.subscribe(() => {});
-    super.add(map);
-  }
-
-  public remove() {
-    this.watcher.unsubscribe();
-    super.remove();
+  public setMap(map: IgoMap | undefined) {
+    if (map === undefined) {
+      this.watcher.unsubscribe();
+    } else {
+      this.watcher.subscribe(() => {});
+    }
+    super.setMap(map);
   }
 }
diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
index a0af15b8de..d694e8afe3 100644
--- a/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
+++ b/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
@@ -18,5 +18,6 @@ export interface VectorLayerOptions extends LayerOptions {
     | WFSDataSourceOptions
     | ArcGISRestDataSourceOptions;
   style?: { [key: string]: any } | olStyle | olStyle[];
+  browsable?: boolean;
   ol?: olLayerVector;
 }
diff --git a/packages/geo/src/lib/layer/utils/index.ts b/packages/geo/src/lib/layer/utils/index.ts
index ba90d061b1..eee0ac603a 100644
--- a/packages/geo/src/lib/layer/utils/index.ts
+++ b/packages/geo/src/lib/layer/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './image-watcher';
 export * from './tile-watcher';
+export * from './legend';
diff --git a/packages/geo/src/lib/layer/utils/legend.ts b/packages/geo/src/lib/layer/utils/legend.ts
new file mode 100644
index 0000000000..ab2302bec9
--- /dev/null
+++ b/packages/geo/src/lib/layer/utils/legend.ts
@@ -0,0 +1,42 @@
+import { Layer } from '../shared/layers/layer';
+import { LayerLegend } from '../shared/layers/layer.interface';
+
+/**
+ * Get all the layers legend
+ * @return Array of legend
+ */
+export function getLayersLegends(layers: Layer[]): LayerLegend[] {
+  const legends = [];
+  const newCanvas = document.createElement('canvas');
+  const newContext = newCanvas.getContext('2d');
+  newContext.font = '20px Calibri';
+
+  let heightPos = 0;
+  for (const layer of layers) {
+    if (layer.visible === false) { continue; }
+
+    const legendUrls = layer.dataSource.getLegend() || [];
+    for (const legendUrl of legendUrls) {
+      if (legendUrl.url === undefined) { continue; }
+
+      const title = layer.title;
+      // Create an image for the legend
+      const legendImage = new Image();
+      legendImage.crossOrigin = 'Anonymous';
+      legendImage.src = legendUrl.url;
+      legendImage.onload = () => {
+        newContext.fillText(title, 0, heightPos);
+        newContext.drawImage(legendImage, 0, heightPos + 20);
+        heightPos += legendImage.height + 5;
+      };
+      // Add legend info to the list
+      legends.push({
+        title,
+        url: legendUrl.url,
+        image: legendImage
+      });
+    }
+  }
+
+  return legends;
+}
diff --git a/packages/geo/src/lib/map/baselayers-switcher/mini-basemap.component.ts b/packages/geo/src/lib/map/baselayers-switcher/mini-basemap.component.ts
index 64959fc633..8753c5bf6a 100644
--- a/packages/geo/src/lib/map/baselayers-switcher/mini-basemap.component.ts
+++ b/packages/geo/src/lib/map/baselayers-switcher/mini-basemap.component.ts
@@ -76,7 +76,7 @@ export class MiniBaseMapComponent implements AfterViewInit, OnDestroy {
   }
 
   private handleBaseLayerChanged(baselayer) {
-    this.basemap.removeLayers();
+    this.basemap.removeAllLayers();
 
     const options: any = Object.assign(
       Object.create(baselayer.options),
diff --git a/packages/geo/src/lib/map/shared/controllers/view.ts b/packages/geo/src/lib/map/shared/controllers/view.ts
index a8cac16411..e646425e22 100644
--- a/packages/geo/src/lib/map/shared/controllers/view.ts
+++ b/packages/geo/src/lib/map/shared/controllers/view.ts
@@ -261,6 +261,23 @@ export class MapViewController extends MapController {
     }
   }
 
+  /**
+   * Clear the state history
+   */
+  clearStateHistory() {
+    this.states = [];
+    this.stateIndex = 0;
+  }
+
+  /**
+   * Update the the view to it's intial state
+   */
+  setInitialState() {
+    if (this.states.length > 0) {
+      this.setStateIndex(0);
+    }
+  }
+
   /**
    * Move to the extent retrieved from the stream
    * @param extent Extent
diff --git a/packages/geo/src/lib/map/shared/map.ts b/packages/geo/src/lib/map/shared/map.ts
index 02566bbba0..b44d1995b9 100644
--- a/packages/geo/src/lib/map/shared/map.ts
+++ b/packages/geo/src/lib/map/shared/map.ts
@@ -27,10 +27,11 @@ import {
 } from './map.interface';
 import { MapViewController } from './controllers/view';
 
+// TODO: This class is messy. Clearly define it's scope and the map browser's.
+// Move some stuff into controllers.
 export class IgoMap {
   public ol: olMap;
   public layers$ = new BehaviorSubject<Layer[]>([]);
-  public layers: Layer[] = [];
   public status$: Subject<SubjectStatus>;
   public geolocation$ = new BehaviorSubject<olGeolocation>(undefined);
   public geolocationFeature: olFeature;
@@ -46,6 +47,10 @@ export class IgoMap {
     controls: { attribution: false }
   };
 
+  get layers(): Layer[] {
+    return this.layers$.value;
+  }
+
   get projection(): string {
     return this.viewController.getOlProjection().getCode();
   }
@@ -127,6 +132,10 @@ export class IgoMap {
    * @param options Map view options
    */
   setView(options: MapViewOptions) {
+    if (this.viewController !== undefined) {
+      this.viewController.clearStateHistory();
+    }
+
     const view = new olView(options);
     this.ol.setView(view);
 
@@ -159,37 +168,6 @@ export class IgoMap {
     return this.viewController.getZoom();
   }
 
-  addLayer(layer: Layer, push = true) {
-    if (layer.baseLayer && layer.visible) {
-      this.changeBaseLayer(layer);
-    }
-
-    const existingLayer = this.getLayerById(layer.id);
-    if (existingLayer !== undefined) {
-      existingLayer.visible = true;
-      return;
-    }
-
-    if (layer.zIndex === undefined || layer.zIndex === 0) {
-      const offset = layer.baseLayer ? 1 : 10;
-      layer.zIndex = this.layers.length + offset;
-    }
-
-    layer.add(this);
-
-    this.layerWatcher.watchLayer(layer);
-
-    if (push) {
-      this.layers.splice(0, 0, layer);
-      this.sortLayers();
-      this.layers$.next(this.layers.slice(0));
-    }
-  }
-
-  addLayers(layers: Layer[], push = true) {
-    layers.forEach(layer => this.addLayer(layer, push));
-  }
-
   changeBaseLayer(baseLayer: Layer) {
     if (!baseLayer) {
       return;
@@ -203,31 +181,64 @@ export class IgoMap {
   }
 
   getBaseLayers(): Layer[] {
-    return this.layers.filter(layer => layer.baseLayer);
+    return this.layers.filter((layer: Layer) => layer.baseLayer === true);
   }
 
   getLayerById(id: string): Layer {
-    return this.layers.find(layer => layer.id && layer.id === id);
+    return this.layers.find((layer: Layer) => layer.id && layer.id === id);
   }
 
-  removeLayer(layer: Layer) {
-    const index = this.getLayerIndex(layer);
+  /**
+   * Add a single layer
+   * @param layer Layer to add
+   * @param push DEPRECATED
+   */
+  addLayer(layer: Layer, push = true) {
+    this.addLayers([layer]);
+  }
 
-    if (index >= 0) {
-      this.layerWatcher.unwatchLayer(layer);
-      layer.remove();
-      this.layers.splice(index, 1);
-      this.layers$.next(this.layers.slice(0));
-    }
+  /**
+   * Add many layers
+   * @param layers Layers to add
+   * @param push DEPRECATED
+   */
+  addLayers(layers: Layer[], push = true) {
+    const addedLayers = layers
+      .map((layer: Layer) => this.doAddLayer(layer))
+      .filter((layer: Layer | undefined) => layer !== undefined);
+    this.setLayers([].concat(this.layers, addedLayers));
   }
 
-  removeLayers() {
-    this.layers.forEach(layer => {
-      this.layerWatcher.unwatchLayer(layer);
-      layer.remove();
-    }, this);
+  /**
+   * Remove a single layer
+   * @param layer Layer to remove
+   */
+  removeLayer(layer: Layer) {
+    this.removeLayers([layer]);
+  }
+
+  /**
+   * Remove many layers
+   * @param layers Layers to remove
+   */
+  removeLayers(layers: Layer[]) {
+    const newLayers = this.layers$.value.slice(0);
+    layers.forEach((layer: Layer) => {
+      const index = this.getLayerIndex(layer);
+      if (index >= 0) {
+        this.doRemoveLayer(layer);
+        newLayers.splice(index, 1);
+      }
+    });
+
+    this.setLayers(newLayers);
+  }
 
-    this.layers = [];
+  /**
+   * Remove all layers
+   */
+  removeAllLayers() {
+    this.layers.forEach((layer: Layer) => this.doRemoveLayer(layer));
     this.layers$.next([]);
   }
 
@@ -259,65 +270,72 @@ export class IgoMap {
   }
 
   /**
-   * Get all layers activate in the map
-   * @return Array of layers
+   * Add a layer to the OL map and start watching. If the layer is already
+   * added to this map, make it visible but don't add it one again.
+   * @param layer Layer
+   * @returns The layer added, if any
+   */
+  private doAddLayer(layer: Layer) {
+    if (layer.baseLayer && layer.visible) {
+      this.changeBaseLayer(layer);
+    }
+
+    const existingLayer = this.getLayerById(layer.id);
+    if (existingLayer !== undefined) {
+      existingLayer.visible = true;
+      return;
+    }
+
+    if (layer.zIndex === undefined || layer.zIndex === 0) {
+      const offset = layer.baseLayer ? 1 : 10;
+      layer.zIndex = this.layers.length + offset;
+    }
+
+    layer.setMap(this);
+    this.layerWatcher.watchLayer(layer);
+    this.ol.addLayer(layer.ol);
+
+    return layer;
+  }
+
+  /**
+   * Remove a layer from the OL map and stop watching
+   * @param layer Layer
    */
-  getLayers() {
-    return this.layers;
+  private doRemoveLayer(layer: Layer) {
+    this.layerWatcher.unwatchLayer(layer);
+    this.ol.removeLayer(layer.ol);
+    layer.setMap(undefined);
   }
 
   /**
-   * Get all the layers legend
-   * @return Array of legend
+   * Update the layers observable
+   * @param layers Layers
    */
-  getLayersLegend() {
-    // Get layers list
-    const layers = this.getLayers();
-    const listLegend = [];
-    let title;
-    let legendUrls;
-    let legendImage;
-    let heightPos = 0;
-    const newCanvas = document.createElement('canvas');
-    const newContext = newCanvas.getContext('2d');
-    newContext.font = '20px Calibri';
-    // For each layers in the map
-    layers.forEach(layer => {
-      // Add legend for only visible layer
-      if (layer.visible === true) {
-        // Get the list of legend
-        legendUrls = layer.dataSource.getLegend();
-        // If legend(s) are defined
-        if (legendUrls.length > 0) {
-          title = layer.title;
-          // For each legend
-          legendUrls.forEach(legendUrl => {
-            // If the legend really exist
-            if (legendUrl.url !== undefined) {
-              // Create an image for the legend
-              legendImage = new Image();
-              legendImage.crossOrigin = 'Anonymous';
-              legendImage.src = legendUrl.url;
-              legendImage.onload = () => {
-                newContext.fillText(title, 0, heightPos);
-                newContext.drawImage(legendImage, 0, heightPos + 20);
-                heightPos += legendImage.height + 5;
-              };
-              // Add legend info to the list
-              listLegend.push({
-                title,
-                url: legendUrl.url,
-                image: legendImage
-              });
-            }
-          });
-        }
-      }
-    });
-    return listLegend;
+  private setLayers(layers: Layer[]) {
+    this.layers$.next(this.sortLayersByZIndex(layers).slice(0));
+  }
+
+  /**
+   * Sort layers by descending zIndex
+   * @param layers Array of layers
+   * @returns The original array, sorted by zIndex
+   */
+  private sortLayersByZIndex(layers: Layer[]) {
+    // Sort by descending zIndex
+    return layers.sort((layer1: Layer, layer2: Layer) => layer2.zIndex - layer1.zIndex);
   }
 
-  // TODO: Create a GeolocationController
+  /**
+   * Get layer index in the map's inenr array of layers
+   * @param layer Layer
+   * @returns The layer index
+   */
+  private getLayerIndex(layer: Layer) {
+    return this.layers.findIndex((_layer: Layer) => _layer === layer);
+  }
+
+  // TODO: Create a GeolocationController with everything below
   geolocate(track = false) {
     let first = true;
     if (this.geolocation$$) {
@@ -390,13 +408,4 @@ export class IgoMap {
     }
   }
 
-  private sortLayers() {
-    // Sort by descending zIndex
-    this.layers.sort((layer1, layer2) => layer2.zIndex - layer1.zIndex);
-  }
-
-  private getLayerIndex(layer: Layer) {
-    return this.layers.findIndex(layer2 => layer2 === layer);
-  }
-
 }
diff --git a/packages/geo/src/lib/measure/measurer/measurer.component.ts b/packages/geo/src/lib/measure/measurer/measurer.component.ts
index 52e0d3e96a..0afb9c6de8 100644
--- a/packages/geo/src/lib/measure/measurer/measurer.component.ts
+++ b/packages/geo/src/lib/measure/measurer/measurer.component.ts
@@ -382,9 +382,11 @@ export class MeasurerComponent implements OnInit, OnDestroy {
 
     if (store.layer === undefined) {
       const layer = new VectorLayer({
+        title: 'Measures',
         zIndex: 200,
         source: new FeatureDataSource(),
-        style: createMeasureLayerStyle()
+        style: createMeasureLayerStyle(),
+        showInLayerList: false
       });
       store.bindLayer(layer);
     }
diff --git a/packages/geo/src/lib/overlay/shared/overlay.ts b/packages/geo/src/lib/overlay/shared/overlay.ts
index f389c253b3..ce5338d037 100644
--- a/packages/geo/src/lib/overlay/shared/overlay.ts
+++ b/packages/geo/src/lib/overlay/shared/overlay.ts
@@ -38,18 +38,22 @@ export class Overlay {
 
   constructor(map?: IgoMap) {
     this.layer = createOverlayLayer();
-    if (map !== undefined) {
-      this.bind(map);
-    }
+    this.setMap(map);
   }
 
   /**
    * Bind this to a map and add the overlay layer to that map
    * @param map Map
    */
-  bind(map: IgoMap) {
+  setMap(map: IgoMap) {
+    if (map === undefined) {
+      if (this.map !== undefined) {
+        this.map.ol.removeLayer(this.layer.ol);
+      }
+    } else {
+      map.ol.addLayer(this.layer.ol);
+    }
     this.map = map;
-    this.map.addLayer(this.layer, false);
   }
 
   /**
diff --git a/packages/geo/src/lib/overlay/shared/overlay.utils.ts b/packages/geo/src/lib/overlay/shared/overlay.utils.ts
index 281dcb955c..dcc2879103 100644
--- a/packages/geo/src/lib/overlay/shared/overlay.utils.ts
+++ b/packages/geo/src/lib/overlay/shared/overlay.utils.ts
@@ -11,6 +11,7 @@ import { VectorLayer } from '../../layer';
 export function createOverlayLayer(): VectorLayer {
   const overlayDataSource = new FeatureDataSource();
   return new VectorLayer({
+    title: 'Overlay',
     zIndex: 300,
     source: overlayDataSource,
     style: createOverlayLayerStyle()
diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts
index 31d7909508..ebf975cb05 100644
--- a/packages/geo/src/lib/print/shared/print.service.ts
+++ b/packages/geo/src/lib/print/shared/print.service.ts
@@ -11,6 +11,8 @@ import { MessageService, ActivityService, LanguageService } from '@igo2/core';
 
 import { IgoMap } from '../../map/shared/map';
 import { formatScale } from '../../map/shared/map.utils';
+import { LayerLegend } from '../../layer/shared/layers/layer.interface';
+import { getLayersLegends } from '../../layer/utils/legend';
 
 import { PrintOptions } from './print.interface';
 import { PrintDimension, PrintOrientation } from './print.type';
@@ -90,32 +92,33 @@ export class PrintService {
 
   /**
    * Get html code for all layers legend
-   * * @param  width - The width that the legend need to be
+   * @param  map IgoMap
+   * @param  width The width that the legend need to be
    * @return Html code for the legend
    */
-  getLayersLegendHtml(map, width) {
-    // Get html code for the legend
-    const listLegend = map.getLayersLegend();
+  getLayersLegendHtml(map: IgoMap, width: number): string {
     let html = '';
-    if (listLegend.length > 0) {
-      // Define important style to be sure that all container is convert
-      // to image not just visible part
-      html += '<style media="screen" type="text/css">';
-      html += '.html2canvas-container { width: ' + width;
-      html += 'mm !important; height: 2000px !important; }';
-      html += '</style>';
-      html += '<font size="2" face="Courier New" >';
-      html += '<div style="display:inline-block;max-width:' + width + 'mm">';
-      // For each legend, define an html table cell
-      listLegend.forEach((legend) => {
-        html +=
-          '<table border=1 style="display:inline-block;vertical-align:top">';
-        html += '<tr><th width="170px">' + legend.title + '</th>';
-        html += '<td><img class="printImageLegend" src="' + legend.url + '">';
-        html += '</td></tr></table>';
-      });
-      html += '</div>';
-    }
+    const legends = getLayersLegends(map.layers);
+    if (legends.length === 0) { return html; }
+
+    // Define important style to be sure that all container is convert
+    // to image not just visible part
+    html += '<style media="screen" type="text/css">';
+    html += '.html2canvas-container { width: ' + width;
+    html += 'mm !important; height: 2000px !important; }';
+    html += '</style>';
+    html += '<font size="2" face="Courier New" >';
+    html += '<div style="display:inline-block;max-width:' + width + 'mm">';
+    // For each legend, define an html table cell
+    legends.forEach((legend: LayerLegend) => {
+      html +=
+        '<table border=1 style="display:inline-block;vertical-align:top">';
+      html += '<tr><th width="170px">' + legend.title + '</th>';
+      html += '<td><img class="printImageLegend" src="' + legend.url + '">';
+      html += '</td></tr></table>';
+    });
+    html += '</div>';
+
     return html;
   }
 
diff --git a/packages/geo/src/lib/routing/routing-form/routing-form.component.ts b/packages/geo/src/lib/routing/routing-form/routing-form.component.ts
index 8676e089dd..c9c45bdcb5 100644
--- a/packages/geo/src/lib/routing/routing-form/routing-form.component.ts
+++ b/packages/geo/src/lib/routing/routing-form/routing-form.component.ts
@@ -165,18 +165,20 @@ export class RoutingFormComponent implements OnInit, AfterViewInit, OnDestroy {
       title: 'routingStopOverlay',
       zIndex: 999,
       id: 'routingStops',
-      source: this.routingStopsOverlayDataSource
+      source: this.routingStopsOverlayDataSource,
+      showInLayerList: false
     });
     const routesLayer = new VectorLayer({
       title: 'routingRoutesOverlay',
       zIndex: 999,
       id: 'routingRoutes',
       opacity: 0.75,
-      source: this.routingRoutesOverlayDataSource
+      source: this.routingRoutesOverlayDataSource,
+      showInLayerList: false
     });
 
-    this.map.addLayer(routesLayer, false);
-    this.map.addLayer(stopsLayer, false);
+    this.map.addLayer(routesLayer);
+    this.map.addLayer(stopsLayer);
 
     let selectedStopFeature;