diff --git a/packages/geo/src/lib/datasource/shared/datasources/datasource.ts b/packages/geo/src/lib/datasource/shared/datasources/datasource.ts
index 8f908b2767..f6ff10b5ac 100644
--- a/packages/geo/src/lib/datasource/shared/datasources/datasource.ts
+++ b/packages/geo/src/lib/datasource/shared/datasources/datasource.ts
@@ -9,6 +9,7 @@ import { DataService } from './data.service';
 import { generateIdFromSourceOptions } from '../../utils/id-generator';
 
 export abstract class DataSource {
+
   public id: string;
   public ol: olSource;
 
diff --git a/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts
index a0c125a9cc..d0631fa6ce 100644
--- a/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts
+++ b/packages/geo/src/lib/datasource/shared/datasources/feature-datasource.interface.ts
@@ -12,6 +12,7 @@ export interface FeatureDataSourceOptions extends DataSourceOptions {
   features?: olFeature[];
   format?: olFormatFeature;
   url?: string;
+  pathOffline?: string;
 
   ol?: olSourceVector;
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts
index a71a7f160a..fb3b7f98a7 100644
--- a/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts
+++ b/packages/geo/src/lib/datasource/shared/datasources/mvt-datasource.interface.ts
@@ -8,6 +8,7 @@ export interface MVTDataSourceOptions extends DataSourceOptions {
   projection?: string;
   attributions?: olAttribution;
   format?: any;
-  url?: string;
   ol?: olSourceVectorTile;
+  url?: string;
+  pathOffline?: string;
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts
index aba211537c..10bc7f1840 100644
--- a/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts
+++ b/packages/geo/src/lib/datasource/shared/datasources/xyz-datasource.interface.ts
@@ -4,7 +4,8 @@ import { DataSourceOptions } from './datasource.interface';
 export interface XYZDataSourceOptions extends DataSourceOptions {
   // type?: 'xyz';
   projection?: string;
+  ol?: olSourceXYZ;
   url?: string;
   urls?: string[];
-  ol?: olSourceXYZ;
+  pathOffline?: string;
 }
diff --git a/packages/geo/src/lib/map/map.module.ts b/packages/geo/src/lib/map/map.module.ts
index 430afefb04..1b3c59aaba 100644
--- a/packages/geo/src/lib/map/map.module.ts
+++ b/packages/geo/src/lib/map/map.module.ts
@@ -16,6 +16,7 @@ import { GeolocateButtonComponent } from './geolocate-button/geolocate-button.co
 import { RotationButtonComponent } from './rotation-button/rotation-button.component';
 import { BaseLayersSwitcherComponent } from './baselayers-switcher/baselayers-switcher.component';
 import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.component';
+import { MapOfflineDirective } from './shared/mapOffline.directive';
 
 @NgModule({
   imports: [
@@ -32,7 +33,8 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
     GeolocateButtonComponent,
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
-    MiniBaseMapComponent
+    MiniBaseMapComponent,
+    MapOfflineDirective
   ],
   declarations: [
     MapBrowserComponent,
@@ -40,7 +42,8 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
     GeolocateButtonComponent,
     RotationButtonComponent,
     BaseLayersSwitcherComponent,
-    MiniBaseMapComponent
+    MiniBaseMapComponent,
+    MapOfflineDirective
   ]
 })
 export class IgoMapModule {}
diff --git a/packages/geo/src/lib/map/shared/index.ts b/packages/geo/src/lib/map/shared/index.ts
index 34df77d68c..423a95434f 100644
--- a/packages/geo/src/lib/map/shared/index.ts
+++ b/packages/geo/src/lib/map/shared/index.ts
@@ -3,6 +3,7 @@ export * from './map.enums';
 export * from './map.interface';
 export * from './map.service';
 export * from './map.utils';
+export * from './mapOffline.directive';
 export * from './projection.interfaces';
 export * from './projection.service';
 export * from './controllers';
diff --git a/packages/geo/src/lib/map/shared/mapOffline.directive.ts b/packages/geo/src/lib/map/shared/mapOffline.directive.ts
new file mode 100644
index 0000000000..3e01da2b3d
--- /dev/null
+++ b/packages/geo/src/lib/map/shared/mapOffline.directive.ts
@@ -0,0 +1,72 @@
+import { Directive, AfterViewInit } from '@angular/core';
+import { IgoMap } from './map';
+import { MapBrowserComponent } from '../map-browser/map-browser.component';
+import { NetworkService, ConnectionState } from '@igo2/core';
+import { Subscription } from 'rxjs';
+import { Layer } from '../../layer/shared/layers/layer';
+import { MVTDataSourceOptions, XYZDataSourceOptions, FeatureDataSourceOptions } from '../../datasource';
+
+@Directive({
+    selector: '[igoMapOffline]'
+  })
+export class MapOfflineDirective implements AfterViewInit {
+
+  private context$$: Subscription;
+  private state: ConnectionState;
+  private component: MapBrowserComponent;
+
+  get map(): IgoMap {
+    return this.component.map;
+  }
+
+  constructor(
+    component: MapBrowserComponent,
+    private networkService: NetworkService
+    ) {
+      this.component = component;
+    }
+
+  ngAfterViewInit() {
+    this.networkService.currentState().subscribe((state: ConnectionState) => {
+      console.log(state);
+      this.state = state;
+      this.changeLayer();
+    });
+
+    this.map.layers$.subscribe((layers: Layer[]) => {
+      this.changeLayer();
+    });
+  }
+
+  private changeLayer() {
+    let sourceOptions;
+    const layerList = this.map.layers$.value;
+    layerList.forEach(layer => {
+      if (layer.options.sourceOptions.type === 'mvt') {
+        sourceOptions = (layer.options.sourceOptions as MVTDataSourceOptions);
+      } else if (layer.options.sourceOptions.type === 'xyz') {
+        sourceOptions = (layer.options.sourceOptions as XYZDataSourceOptions);
+      } else if (layer.options.sourceOptions.type === 'vector') {
+        sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions);
+      } else {
+        return;
+      }
+      if (sourceOptions.pathOffline  &&
+        this.state.connection === false) {
+          if (sourceOptions.excludeAttributeOffline) {
+            sourceOptions.excludeAttributeBackUp = sourceOptions.excludeAttribute;
+            sourceOptions.excludeAttribute = sourceOptions.excludeAttributeOffline;
+          }
+          layer.ol.getSource().clear();
+          layer.ol.getSource().setUrl(sourceOptions.pathOffline);
+      } else if (sourceOptions.pathOffline &&
+        this.state.connection === true) {
+          if (sourceOptions.excludeAttributeBackUp) {
+            sourceOptions.excludeAttribute = sourceOptions.excludeAttributeBackUp;
+          }
+          layer.ol.getSource().clear();
+          layer.ol.getSource().setUrl(sourceOptions.url);
+      }
+    });
+  }
+}