diff --git a/packages/geo/src/lib/import-export/shared/import.utils.ts b/packages/geo/src/lib/import-export/shared/import.utils.ts
index 393b697cba..903acd4ad8 100644
--- a/packages/geo/src/lib/import-export/shared/import.utils.ts
+++ b/packages/geo/src/lib/import-export/shared/import.utils.ts
@@ -12,6 +12,9 @@ import { QueryableDataSourceOptions } from '../../query/shared/query.interfaces'
 import { StyleService } from '../../layer/shared/style.service';
 import { StyleByAttribute } from '../../layer/shared/vector-style.interface';
 import { StyleListService } from '../style-list/style-list.service';
+import { ClusterParam } from '../../layer/shared/clusterParam';
+import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-datasource';
+import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface';
 
 export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layerTitle: string): VectorLayer {
   const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
@@ -55,66 +58,58 @@ export function addLayerAndFeaturesStyledToMap(features: Feature[], map: IgoMap,
                                                styleListService: StyleListService, styleService: StyleService): VectorLayer {
   const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection));
   let style;
+  let distance: number;
 
   if (styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute')) {
     const styleByAttribute: StyleByAttribute = styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute');
 
-    const styleBy = feature => {
+    style = feature => {
       return styleService.createStyleByAttribute(
         feature,
         styleByAttribute
       );
     };
-    style = styleBy;
 
-  } else if (styleListService.getStyleList(layerTitle.toString() + '.style')) {
-    const radius = styleListService.getStyleList(layerTitle.toString() + '.style.radius');
+  } else if (styleListService.getStyleList(layerTitle.toString() + '.clusterStyle')) {
+    const clusterParam: ClusterParam = styleListService.getStyleList(layerTitle.toString() + '.clusterParam');
+    distance = styleListService.getStyleList(layerTitle.toString() + '.distance');
 
-    const stroke = new olStyle.Stroke({
-      color: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.color'),
-      width: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.width')
-    });
+    const baseStyle = styleService.createStyle(styleListService.getStyleList(layerTitle.toString() + '.clusterStyle'));
 
-    const fill = new olStyle.Fill({
-      color: styleListService.getStyleList(layerTitle.toString() + '.style.fill.color')
-    });
+    style = feature => {
+      return styleService.createClusterStyle(
+        feature,
+        clusterParam,
+        baseStyle
+      );
+    };
+
+  } else if (styleListService.getStyleList(layerTitle.toString() + '.style')) {
+
+    style = styleService.createStyle(styleListService.getStyleList(layerTitle.toString() + '.style'));
 
-    style = new olStyle.Style({
-      stroke,
-      fill,
-      image: new olStyle.Circle({
-        radius: radius ? radius : 5,
-        stroke,
-        fill
-      })
-    });
   } else {
-    const radius = styleListService.getStyleList('default.style.radius');
 
-    const stroke = new olStyle.Stroke({
-      color: styleListService.getStyleList('default.style.stroke.color'),
-      width: styleListService.getStyleList('default.style.stroke.width')
-    });
+    style = styleService.createStyle(styleListService.getStyleList('default.style'));
 
-    const fill = new olStyle.Fill({
-      color: styleListService.getStyleList('default.style.fill.color')
-    });
+  }
+  let source;
 
-    style = new olStyle.Style({
-      stroke,
-      fill,
-      image: new olStyle.Circle({
-        radius: radius ? radius : 5,
-        stroke,
-        fill
-      })
-    });
+  if (styleListService.getStyleList(layerTitle.toString() + '.clusterStyle')) {
+    const sourceOptions: ClusterDataSourceOptions & QueryableDataSourceOptions = {
+      distance,
+      type: 'cluster',
+      queryable: true
+    };
+    source = new ClusterDataSource(sourceOptions);
+    source.ol.source.addFeatures(olFeatures);
+  } else {
+    const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
+      queryable: true
+    };
+    source = new FeatureDataSource(sourceOptions);
+    source.ol.addFeatures(olFeatures);
   }
-  const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = {
-    queryable: true
-  };
-  const source = new FeatureDataSource(sourceOptions);
-  source.ol.addFeatures(olFeatures);
 
   const layer = new VectorLayer({
     title: layerTitle,
diff --git a/packages/geo/src/lib/map/shared/mapOffline.directive.ts b/packages/geo/src/lib/map/shared/mapOffline.directive.ts
index b66ae01066..70a3aef809 100644
--- a/packages/geo/src/lib/map/shared/mapOffline.directive.ts
+++ b/packages/geo/src/lib/map/shared/mapOffline.directive.ts
@@ -8,6 +8,10 @@ import { XYZDataSourceOptions } from '../../datasource/shared/datasources/xyz-da
 import { MVTDataSourceOptions } from '../../datasource/shared/datasources/mvt-datasource.interface';
 import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface';
 import { Layer } from '../../layer/shared/layers/layer';
+import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-datasource';
+import { MVTDataSource } from '../../datasource/shared/datasources/mvt-datasource';
+import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';
+import { XYZDataSource } from '../../datasource/shared/datasources/xyz-datasource';
 
 @Directive({
     selector: '[igoMapOffline]'
@@ -85,15 +89,16 @@ export class MapOfflineDirective implements AfterViewInit {
     let sourceOptions;
     const layerList = this.map.layers$.value;
     layerList.forEach(layer => {
-      if (layer.options.sourceOptions.type === 'mvt') {
+      if (layer.options.source instanceof MVTDataSource) {
         sourceOptions = (layer.options.sourceOptions as MVTDataSourceOptions);
         layer.ol.getSource().clear();
-      } else if (layer.options.sourceOptions.type === 'xyz') {
+      } else if (layer.options.source instanceof XYZDataSource) {
         sourceOptions = (layer.options.sourceOptions as XYZDataSourceOptions);
-      } else if (layer.options.sourceOptions.type === 'vector') {
-        sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions);
-      } else if (layer.options.sourceOptions.type === 'cluster') {
+      } else if (layer.options.source instanceof ClusterDataSource) {
         sourceOptions = (layer.options.sourceOptions as ClusterDataSourceOptions);
+        console.log(layer);
+      } else if (layer.options.source instanceof FeatureDataSource) {
+        sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions);
       } else {
         if (this.networkState.connection === false || this.offlineButtonState.connection === false) {
           layer.ol.setMaxResolution(0);
@@ -104,18 +109,26 @@ export class MapOfflineDirective implements AfterViewInit {
         }
       }
 
-      if (sourceOptions.pathOffline && this.networkState.connection === false ||
-        sourceOptions.pathOffline && this.offlineButtonState.connection === false) {
-          if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') {
-            return;
+      if (sourceOptions) {
+        if (sourceOptions.pathOffline && this.networkState.connection === false ||
+          sourceOptions.pathOffline && this.offlineButtonState.connection === false) {
+            if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') {
+              return;
+            }
+            layer.ol.getSource().setUrl(sourceOptions.pathOffline);
+        } else if (sourceOptions.pathOffline && this.networkState.connection === false ||
+          sourceOptions.pathOffline && this.offlineButtonState.connection === true) {
+            if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') {
+              return;
+            }
+            layer.ol.getSource().setUrl(sourceOptions.url);
+        } else {
+          if (this.networkState.connection === false || this.offlineButtonState.connection === false) {
+            layer.ol.setMaxResolution(0);
+          } else if (this.networkState.connection === true || this.offlineButtonState.connection === true) {
+            layer.ol.setMaxResolution(Infinity);
           }
-          layer.ol.getSource().setUrl(sourceOptions.pathOffline);
-      } else if (sourceOptions.pathOffline && this.networkState.connection === false ||
-        sourceOptions.pathOffline && this.offlineButtonState.connection === true) {
-          if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') {
-            return;
-          }
-          layer.ol.getSource().setUrl(sourceOptions.url);
+        }
       } else {
         if (this.networkState.connection === false || this.offlineButtonState.connection === false) {
           layer.ol.setMaxResolution(0);