diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
index 36761034..369f6567 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
+++ b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.service.ts
@@ -1,12 +1,16 @@
 import {Injectable} from '@angular/core';
-import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
+import {BaThemeConfigProvider, layoutPaths} from '../../../../theme';
 
 @Injectable()
 export class BubbleMapsService {
 
-  getData() {
+  constructor(private _baConfig:BaThemeConfigProvider) {
+  }
+
+  getData() {
+    let layoutColors = this._baConfig.get().colors;
+    let latlong = {};
 
-    var latlong = {};
     latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
     latlong['AE'] = {'latitude': 24, 'longitude': 54};
     latlong['AF'] = {'latitude': 33, 'longitude': 65};
@@ -248,7 +252,7 @@ export class BubbleMapsService {
     latlong['ZM'] = {'latitude': -15, 'longitude': 30};
     latlong['ZW'] = {'latitude': -20, 'longitude': 30};
 
-    var mapData = [
+    let mapData = [
       {'code': 'AF', 'name': 'Afghanistan', 'value': 32358260, 'color': layoutColors.primaryDark},
       {'code': 'AL', 'name': 'Albania', 'value': 3215988, 'color': layoutColors.warning},
       {'code': 'DZ', 'name': 'Algeria', 'value': 35980193, 'color': layoutColors.danger},
@@ -426,7 +430,7 @@ export class BubbleMapsService {
       , max = -Infinity;
 
     // get min and max values
-    for (var i = 0; i < mapData.length; i++) {
+    for (let i = 0; i < mapData.length; i++) {
       var value = mapData[i].value;
       if (value < min) {
         min = value;
@@ -446,18 +450,18 @@ export class BubbleMapsService {
     var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;
 
     // create circle for each country
-    for (var i = 0; i < mapData.length; i++) {
-      var dataItem = mapData[i];
-      var value = dataItem.value;
+    for (let i = 0; i < mapData.length; i++) {
+      let dataItem = mapData[i];
+      let value = dataItem.value;
       // calculate size of a bubble
-      var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
+      let square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
       if (square < minSquare) {
         square = minSquare;
       }
-      var size = Math.sqrt(square / (Math.PI * 2));
-      var id = dataItem.code;
-      
-      
+      let size = Math.sqrt(square / (Math.PI * 2));
+      let id = dataItem.code;
+
+
 
       dataProvider.images.push({
         type: 'circle',
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.service.ts b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts
index 8d36af75..34ac5089 100644
--- a/src/app/pages/maps/components/lineMaps/lineMaps.service.ts
+++ b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts
@@ -1,12 +1,16 @@
 import {Injectable} from '@angular/core';
 
-import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
+import {BaThemeConfigProvider, layoutPaths} from '../../../../theme';
 
 @Injectable()
 export class LineMapsService {
 
 
+  constructor(private _baConfig:BaThemeConfigProvider) {
+  }
+
   getData() {
+    let layoutColors = this._baConfig.get().colors;
 
     // svg path for target icon
     let targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
@@ -75,16 +79,16 @@ export class LineMapsService {
             top: 45,
             labelShiftY: 5,
             labelShiftX: 5,
-            color: layoutColors.default,
-            labelColor: layoutColors.default,
-            labelRollOverColor: layoutColors.default,
+            color: layoutColors.defaultText,
+            labelColor: layoutColors.defaultText,
+            labelRollOverColor: layoutColors.defaultText,
             labelFontSize: 20
           }, {
             label: 'show flights from Vilnius',
             left: 106,
             top: 70,
-            labelColor: layoutColors.default,
-            labelRollOverColor: layoutColors.default,
+            labelColor: layoutColors.defaultText,
+            labelRollOverColor: layoutColors.defaultText,
             labelFontSize: 11,
             linkToObject: 'vilnius'
           } ]
@@ -143,16 +147,16 @@ export class LineMapsService {
               top: 45,
               labelShiftY: 5,
               labelShiftX: 5,
-              color: layoutColors.default,
-              labelColor: layoutColors.default,
-              labelRollOverColor: layoutColors.default,
+              color: layoutColors.defaultText,
+              labelColor: layoutColors.defaultText,
+              labelRollOverColor: layoutColors.defaultText,
               labelFontSize: 20
             }, {
               label: 'show flights from London',
               left: 106,
               top: 70,
-              labelColor: layoutColors.default,
-              labelRollOverColor: layoutColors.default,
+              labelColor: layoutColors.defaultText,
+              labelRollOverColor: layoutColors.defaultText,
               labelFontSize: 11,
               linkToObject: 'london'
             } ]
@@ -250,15 +254,16 @@ export class LineMapsService {
       },
 
       imagesSettings: {
-        color: layoutColors.warningBg,
+        color: layoutColors.warningLight,
         selectedColor: layoutColors.warning
       },
 
       linesSettings: {
-        color: layoutColors.warningBg,
+        color: layoutColors.warningLight,
         alpha: 0.8
       },
 
+
       backgroundZoomsToTop: true,
       linesAboveImages: true,
 
diff --git a/src/assets/img/theme/vendor/leaflet/marker-shadow.png b/src/assets/img/theme/vendor/leaflet/marker-shadow.png
new file mode 100644
index 00000000..d1e773c7
Binary files /dev/null and b/src/assets/img/theme/vendor/leaflet/marker-shadow.png differ