svgmap 2.6.0 → 2.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgmap",
   "description": "svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.",
-  "version": "2.6.0",
+  "version": "2.7.2",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",
@@ -23,8 +23,8 @@
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "jest": "^27.0.6",
-    "sass": "^1.36.0"
+    "jest": "^27.1.0",
+    "sass": "^1.38.1"
   },
   "dependencies": {
     "svg-pan-zoom": "^3.6.1"

package/src/js/svgMap.js

@@ -30,6 +30,15 @@ function svgMapWrapper(svgPanZoom) {
       // Zoom with mousewheel
       mouseWheelZoomEnabled: true,
 
+      // Allow zooming only when one of the following keys is pressed: 'shift', 'control', 'alt' (Windows), 'command' (MacOS), 'option' (MacOS)
+      mouseWheelZoomWithKey: false,
+
+      // The message to show for non MacOS systems
+      mouseWheelKeyMessage: 'Press the [ALT] key to zoom',
+
+      // The message to show for MacOS
+      mouseWheelKeyMessageMac: 'Press the [COMMAND] key to zoom',
+
       // Data colors
       colorMax: '#CC0033',
       colorMin: '#FFE5D9',
@@ -62,7 +71,10 @@ function svgMapWrapper(svgPanZoom) {
       // Country specific options
       countries: {
         // Western Sahara: Set to false to combine Morocco (MA) and Western Sahara (EH)
-        EH: true
+        EH: true,
+
+        // Crimea: Set to 'RU' to make the Crimea part of Russia, by default it is part of the Ukraine
+        Crimea: 'UA'
       }
     };
 
@@ -84,8 +96,28 @@ function svgMapWrapper(svgPanZoom) {
     // Global id
     this.id = this.options.targetElementID;
 
-    // Cache wrapper element
+    // Wrapper element
     this.wrapper = document.getElementById(this.options.targetElementID);
+    this.wrapper.classList.add('svgMap-wrapper');
+
+    // Container element
+    this.container = document.createElement('div');
+    this.container.classList.add('svgMap-container');
+    this.wrapper.appendChild(this.container);
+
+    // Block scrolling when option is enabled
+    if (
+      this.options.mouseWheelZoomEnabled &&
+      this.options.mouseWheelZoomWithKey
+    ) {
+      this.addMouseWheelZoomNotice();
+      this.addMouseWheelZoomWithKeyEvents();
+    }
+
+    // Map container element
+    this.mapContainer = document.createElement('div');
+    this.mapContainer.classList.add('svgMap-map-container');
+    this.container.appendChild(this.mapContainer);
 
     // Create the map
     this.createMap();
@@ -377,8 +409,8 @@ function svgMapWrapper(svgPanZoom) {
           element.setAttribute('fill', this.options.colorNoData);
           return;
         }
-        if (typeof(data.values[countryID][this.options.manualColorAttribute]) != "undefined") {
-          element.setAttribute('fill', data.values[countryID][this.options.manualColorAttribute]);
+        if (typeof data.values[countryID].color != 'undefined') {
+          element.setAttribute('fill', data.values[countryID].color);
           return;
         }
         var value = Math.max(
@@ -656,7 +688,7 @@ function svgMapWrapper(svgPanZoom) {
     this.mapWrapper = this.createElement(
       'div',
       'svgMap-map-wrapper',
-      this.wrapper
+      this.mapContainer
     );
     this.mapImage = document.createElementNS(
       'http://www.w3.org/2000/svg',
@@ -712,6 +744,19 @@ function svgMapWrapper(svgPanZoom) {
     }
     delete mapPaths['MA-EH'];
 
+    if (this.options.countries.Crimea === 'RU') {
+      mapPaths.RU.d = mapPaths['RU-WITH-CRIMEA'].d;
+      mapPaths.UA.d = mapPaths['UA-WITHOUT-CRIMEA'].d;
+    }
+    delete mapPaths['RU-WITH-CRIMEA'];
+    delete mapPaths['UA-WITHOUT-CRIMEA'];
+
+    // Expose tooltipMove function
+
+    this.tooltipMoveEvent = function (e) {
+      this.moveTooltip(e);
+    }.bind(this);
+
     // Add map elements
     Object.keys(mapPaths).forEach(
       function (countryID) {
@@ -735,23 +780,14 @@ function svgMapWrapper(svgPanZoom) {
 
         this.mapImage.appendChild(countryElement);
 
-        ['mouseenter', 'touchdown'].forEach(
-          function (event) {
-            countryElement.addEventListener(
-              event,
-              function () {
-                countryElement.closest('g').appendChild(countryElement);
-              }.bind(this),
-              { passive: true }
-            );
-          }.bind(this)
-        );
-
         // Tooltip events
         // Add tooltip when touch is used
         countryElement.addEventListener(
           'touchstart',
           function (e) {
+            countryElement.parentNode.appendChild(countryElement);
+            countryElement.classList.add('svgMap-active');
+
             var countryID = countryElement.getAttribute('data-id');
             var countryLink = countryElement.getAttribute('data-link');
             if (this.options.touchLink) {
@@ -763,6 +799,14 @@ function svgMapWrapper(svgPanZoom) {
             this.setTooltipContent(this.getTooltipContent(countryID));
             this.showTooltip(e);
             this.moveTooltip(e);
+
+            countryElement.addEventListener(
+              'touchmove',
+              this.tooltipMoveEvent,
+              {
+                passive: true
+              }
+            );
           }.bind(this),
           { passive: true }
         );
@@ -770,17 +814,17 @@ function svgMapWrapper(svgPanZoom) {
         countryElement.addEventListener(
           'mouseenter',
           function (e) {
+            countryElement.parentNode.appendChild(countryElement);
             var countryID = countryElement.getAttribute('data-id');
             this.setTooltipContent(this.getTooltipContent(countryID));
             this.showTooltip(e);
-          }.bind(this),
-          { passive: true }
-        );
-
-        countryElement.addEventListener(
-          'mousemove',
-          function (e) {
-            this.moveTooltip(e);
+            countryElement.addEventListener(
+              'mousemove',
+              this.tooltipMoveEvent,
+              {
+                passive: true
+              }
+            );
           }.bind(this),
           { passive: true }
         );
@@ -800,7 +844,17 @@ function svgMapWrapper(svgPanZoom) {
               this.options.data.values[countryID]['linkTarget']
             );
           }
-          countryElement.addEventListener('click', function (e) {
+
+          let dragged = false;
+          countryElement.addEventListener('mousedown', function(){dragged = false});
+          countryElement.addEventListener('touchstart', function(){dragged = false});
+          countryElement.addEventListener('mousemove', function(){dragged = true});
+          countryElement.addEventListener('touchmove', function(){dragged = true});
+          const clickHandler = function (e) {
+            if (dragged) {
+                return;
+            }
+
             const link = countryElement.getAttribute('data-link');
             const target = countryElement.getAttribute('data-link-target');
 
@@ -809,20 +863,41 @@ function svgMapWrapper(svgPanZoom) {
             } else {
               window.location.href = link;
             }
-          });
+          }
+
+          countryElement.addEventListener('click', clickHandler);
+          countryElement.addEventListener('touchend', clickHandler);
         }
 
-        // Hide tooltip when event is mouseleave or touchend
-        ['mouseleave', 'touchend'].forEach(
-          function (event) {
-            countryElement.addEventListener(
-              event,
-              function () {
-                this.hideTooltip();
-              }.bind(this),
+        // Hide tooltip when mouse leaves the country area
+        countryElement.addEventListener(
+          'mouseleave',
+          function () {
+            this.hideTooltip();
+            countryElement.removeEventListener(
+              'mousemove',
+              this.tooltipMoveEvent,
+              {
+                passive: true
+              }
+            );
+          }.bind(this),
+          { passive: true }
+        );
+
+        // Hide tooltip when touch ends
+        countryElement.addEventListener(
+          'touchend',
+          function () {
+            this.hideTooltip();
+            countryElement.classList.remove('svgMap-active');
+            countryElement.removeEventListener(
+              'touchmove',
+              this.tooltipMoveEvent,
               { passive: true }
             );
-          }.bind(this)
+          }.bind(this),
+          { passive: true }
         );
       }.bind(this)
     );
@@ -839,7 +914,8 @@ function svgMapWrapper(svgPanZoom) {
       maxZoom: this.options.maxZoom,
       zoomScaleSensitivity: this.options.zoomScaleSensitivity,
       controlIconsEnabled: false,
-      mouseWheelZoomEnabled: this.options.mouseWheelZoomEnabled, // TODO Only with key pressed
+      mouseWheelZoomEnabled: this.options.mouseWheelZoomEnabled,
+      preventMouseEventsDefault: true,
       onZoom: function () {
         me.setControlStatuses();
       },
@@ -995,6 +1071,126 @@ function svgMapWrapper(svgPanZoom) {
     this.mapPanZoom[direction == 'in' ? 'zoomIn' : 'zoomOut']();
   };
 
+  // Add elements to show the zoom with keys notice
+
+  svgMap.prototype.addMouseWheelZoomNotice = function () {
+    var noticeWrapper = document.createElement('div');
+    noticeWrapper.classList.add('svgMap-block-zoom-notice');
+
+    var noticeContainer = document.createElement('div');
+    noticeContainer.innerHTML =
+      navigator.appVersion.indexOf('Mac') != -1
+        ? this.options.mouseWheelKeyMessageMac
+        : this.options.mouseWheelKeyMessage;
+
+    noticeWrapper.append(noticeContainer);
+    this.wrapper.append(noticeWrapper);
+  };
+
+  // Show the zoom with keys notice
+
+  svgMap.prototype.showMouseWheelZoomNotice = function (duration) {
+    if (this.mouseWheelNoticeJustHidden) {
+      return;
+    }
+
+    this.autoHideMouseWheelNoticeTimeout &&
+      clearTimeout(this.autoHideMouseWheelNoticeTimeout);
+    this.autoHideMouseWheelNoticeTimeout = setTimeout(
+      function () {
+        this.hideMouseWheelZoomNotice();
+      }.bind(this),
+      duration || 2400
+    );
+
+    this.wrapper.classList.add('svgMap-block-zoom-notice-active');
+  };
+
+  // Hide the zoom with keys notice
+
+  svgMap.prototype.hideMouseWheelZoomNotice = function () {
+    this.wrapper.classList.remove('svgMap-block-zoom-notice-active');
+    this.autoHideMouseWheelNoticeTimeout &&
+      clearTimeout(this.autoHideMouseWheelNoticeTimeout);
+  };
+
+  // Block shing the zoom wheel notice for some time
+
+  svgMap.prototype.blockMouseWheelZoomNotice = function (duration) {
+    this.mouseWheelNoticeJustHidden = true;
+    this.mouseWheelNoticeJustHiddenTimeout &&
+      clearTimeout(this.mouseWheelNoticeJustHiddenTimeout);
+    this.mouseWheelNoticeJustHiddenTimeout = setTimeout(
+      function () {
+        this.mouseWheelNoticeJustHidden = false;
+      }.bind(this),
+      duration || 600
+    );
+  };
+
+  // Add the events when you are only allowed to scrool with a key pressed
+
+  svgMap.prototype.addMouseWheelZoomWithKeyEvents = function () {
+    // Add events to wrapper
+    this.wrapper.addEventListener(
+      'wheel',
+      function (ev) {
+        if (!document.body.classList.contains('svgMap-zoom-key-pressed')) {
+          this.showMouseWheelZoomNotice();
+        } else {
+          this.hideMouseWheelZoomNotice();
+          this.blockMouseWheelZoomNotice();
+        }
+      }.bind(this),
+      {
+        passive: true
+      }
+    );
+
+    // Add with keydown
+    document.addEventListener(
+      'keydown',
+      function (ev) {
+        if (
+          ev.key == 'Alt' ||
+          ev.key == 'Control' ||
+          ev.key == 'Meta' ||
+          ev.key == 'Shift'
+        ) {
+          document.body.classList.add('svgMap-zoom-key-pressed');
+          this.hideMouseWheelZoomNotice();
+          this.blockMouseWheelZoomNotice();
+        }
+      }.bind(this)
+    );
+
+    // Fallback with wheel as sometimes it wont trigger when window is out of focus
+    this.wrapper.addEventListener('wheel', function (ev) {
+      if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) {
+        document.body.classList.add('svgMap-zoom-key-pressed');
+        // TODO wont be removed when window out of focus
+      }
+    });
+
+    // Only add following events to the document once
+    if (document.body.classList.contains('svgMap-key-events-added')) {
+      return false;
+    }
+    document.body.classList.add('svgMap-key-events-added');
+
+    // Remove with keyup
+    document.addEventListener('keyup', function (ev) {
+      if (
+        ev.key == 'Alt' ||
+        ev.key == 'Control' ||
+        ev.key == 'Meta' ||
+        ev.key == 'Shift'
+      ) {
+        document.body.classList.remove('svgMap-zoom-key-pressed');
+      }
+    });
+  };
+
   // Map paths
 
   svgMap.prototype.mapPaths = {
@@ -1188,7 +1384,7 @@ function svgMapWrapper(svgPanZoom) {
       d: 'M690.3,902.7l-0.1-0.3l-0.4-0.2l-0.2-0.1l0.1,0.2l0.1,0.3l0.1,0.2l0.2,0.1L690.3,902.7L690.3,902.7z M695.8,901.4 L695.8,901.4l-0.3-0.1l-0.1,0.2l0.2,0.3l0.4,0.1L695.8,901.4L695.8,901.4z M682.9,900l-0.1,0.2l-0.4,0.1l0.2,0.3l0.6,0.4h0.4 l0.1-0.3l-0.1-0.6h-0.3L682.9,900L682.9,900z M685.7,898l-0.9-0.3l-0.4-0.3h-0.3l0.4,0.4l0.1,0.2l0.1,0.2l0.6,0.3l0.6,0.3l0.4,0.3 l-0.1,0.1l-0.8,0.3h-0.3l-0.2,0.1l0.4,0.2l0.6-0.1l0.2-0.1h0.2l0.3,0.1v0.2l-0.1,0.2l-0.2,0.2l-0.4,0.3l-0.6,0.4h-0.8l-0.7,0.7 l0.9,0.5l0.7,0.3h0.9v-0.1l0.2-0.1h0.3l0.1-0.1l0.2-0.4v-0.6h0.2l0.3,0.1l0.7-0.1l0.3-0.1l0.6-0.9l0.4-0.8l0.2-0.4l0.3-0.2l0.1-0.2 l0.1-0.3l0.3-0.2v-0.3l-0.4-0.2l-0.3-0.2l-0.3,0.3l-0.2-0.1l-0.9,0.3h-0.4l-0.3-0.2l-0.4-0.1l-0.4,0.1l-0.5,0.5L685.7,898L685.7,898 z M686.4,897.6l0.1-0.3l-0.1-0.2l-0.5-0.2h-0.5l0.2,0.5l0.2,0.2H686.4z M692.3,896.9h-0.4l0.4,0.5l-0.8,0.8l0.2,0.6l0.3,0.4l0.1,0.2 l-0.1,0.1l-0.4,0.1l-0.3,0.1l-0.2,0.3l-0.9,0.9l0.2,0.2l-0.3,0.7l0.2,0.3l0.8,0.7l0.8,0.4v-0.7l0.4-0.1l0.4,0.2l0.4-0.2l-0.9-1h0.3 l2.5,0.5l-0.1-0.4l-0.1-0.2l-0.3-0.4l1.5-0.4l0.5-0.3l0.2-0.3l0.6-0.1l0.8-0.3l-0.1-0.1l0.1-0.3l-0.4-0.2l-0.5-0.1l0.1-0.3l0.5-0.1 l-0.8-0.7l-0.3-0.1l-1,0.1l-0.3,0.1v0.2l0.1,0.3l0.3,0.3l0.1,0.2l-0.2-0.1l-1.1-0.4l-0.2-0.1l-0.2-0.4l0.2-0.1l0.3,0.1l0.1-0.3 l-0.4-0.3l-0.4-0.1l-0.9,0.1L692.3,896.9L692.3,896.9z'
     },
     'FO': {
-      d: 'M947,186.9v-0.3l-0.1-0.3v-0.2h-0.1l-0.5-0.1l-0.1-0.2h-0.1v0.2l0.1,0.4l0.5,0.4L947,186.9l0.1,0.1L947,186.9 L947,186.9z M947.5,184.8v-0.1l-0.2-0.2l-0.5-0.2l-0.2-0.1l-0.2,0.1v0.2l0.1,0.1l0.4,0.1l0.4,0.3h0.1L947.5,184.8L947.5,184.8z M945.1,182.9l-0.2-0.1l-0.5,0.1h-0.3l0.1,0.3l0.6,0.2h0.3h0.3l0.2-0.1l-0.1-0.2L945.1,182.9L945.1,182.9z M947.6,182.4l-0.8-0.2 l-0.6-0.3l-1,0.1l0.7,1.1l0.8,0.7l0.4,0.2v-0.1v-0.2l-0.4-0.5l-0.1-0.1V183l0.1-0.1h0.2l0.3,0.2h0.2L947.6,182.4L947.6,182.4z M948.6,182.2l-0.3-0.2l-0.4-0.4v0.5v0.3v0.1h0.1l0.3,0.1L948.6,182.2L948.6,182.2z'
+      d: 'M947,186.9v-0.3l-0.1-0.3v-0.2h-0.1l-0.5-0.1l-0.1-0.2h-0.1v0.2l0.1,0.4l0.5,0.4L947,186.9L947,186.9L947,186.9zM947.5,184.8v-0.1l-0.2-0.2l-0.5-0.2l-0.2-0.1l-0.2,0.1v0.2l0.1,0.1l0.4,0.1l0.4,0.3h0.1L947.5,184.8L947.5,184.8z M945.1,182.9l-0.2-0.1l-0.5,0.1h-0.3l0.1,0.3l0.6,0.2h0.3h0.3l0.2-0.1l-0.1-0.2L945.1,182.9L945.1,182.9z M947.6,182.4l-0.8-0.2l-0.6-0.3l-1,0.1l0.7,1.1l0.8,0.7l0.4,0.2v-0.1v-0.2l-0.4-0.5l-0.1-0.1V183l0.1-0.1h0.2l0.3,0.2h0.2L947.6,182.4L947.6,182.4z M948.6,182.2l-0.3-0.2l-0.4-0.4v0.5v0.3v0.1h0.1l0.3,0.1L948.6,182.2L948.6,182.2z'
     },
     'FJ': {
       d: 'M1976.7,674.4l-3.7,2l-1.9,0.3l-3.1,1.3l0.2,2.4l3.9-1.3l3.9-1.6L1976.7,674.4L1976.7,674.4z M1965.7,682.5l-1.6,1 l-2.3-0.8l-2.7,2.2l-0.2,2.8l2.9,0.8l3.6-0.9l1.8-3.3L1965.7,682.5L1965.7,682.5z'
@@ -1640,8 +1836,17 @@ function svgMapWrapper(svgPanZoom) {
     'ZW': {
       d: 'M1148.2,713.7l6.2-7.2l1.6-4.6l0.9-0.6l0.8-3.7l-0.8-1.9l0.5-4.7l1.3-4.4l0.3-8.1l-2.8-2l-2.6-0.5l-1.1-1.6 l-2.6-1.3l-4.6,0.1l-0.3-2.4l-4.2,0.9l-3.3,2.5l-0.7,2.2l-2,0.5l-5.1,5.3l-3.2,4.1l-1.9,0.1l-1.7-0.7l-6.2-0.7l1.9,5.1l1.1,1.1 l1.6,3.7l6,7l2.3,0.7l-0.1,2.2l1.5,4.1l4.2,0.9l3.4,2.9l2.2,0.1l2.6,1.1l1.9-0.8L1148.2,713.7L1148.2,713.7z'
     },
+    'XK': {
+      d: 'M1080,299.8l1.2-0.5l0.5-2l0.9-0.4l0.8,0.9l1,0.4l0.8,1l0.8,0.3l1.1,1.1h0.8l-0.5,1.5l-0.5,0.7l0.2,0.5l-1.1,0.2l-2.9,1l-0.1,1.2h-0.7l-0.5-2.3l-1.3-0.6l-1.3-1.6L1080,299.8z'
+    },
     'MA-EH': {
       d: 'M969.3,363.1l-1.8-6.7l-0.3-3.9l-2-4.1l-2.3-0.1l-5.5-1.4l-5,0.4l-3.1-2.7h-3.9l-1.8,3.9l-3.7,6.7l-4,2.6 l-5.4,2.9L927,365l-0.9,3.4l-2.1,5.4l1.1,7.9l-4.7,5.3l-2.7,1.7l-4.4,4.4l-5.1,0.7l-2.8,2.4l-0.1,0.1l-3.6,6.5l-3.7,2.3l-2.1,4 l-0.2,3.3l-1.6,3.8l-1.9,1l-3.1,4l-2,4.5l0.3,2.2l-1.9,3.3l-2.2,1.7l-0.3,3l-0.3,2.7l1.2-2.2l21.6,0.1l-0.9-9.2l1.4-3.3l5.2-0.5 l0.2-16.3l17.9,0.3l0.2-9.7l0.1-1.2v-0.4l0,0l0,0l0,0l0.1-7.5l8.9-4.7l5.4-1l4.4-1.7l2.1-3.2l6.3-2.5l0.3-4.7l3.1-0.5l2.5-2.4l7-1 l1-2.5L969.3,363.1z'
+    },
+    'RU-WITH-CRIMEA': {
+      d: 'M1145,281l-4.5,2.1l-0.7,1.2l5.8,1.8l-0.6,2.9l3,1.3l6.3-3.6l5.3-1.1l0.6-2.2l-5.1,0.4l-2.7-1.5L1145,281z M1332.3,95.1l-4.5-4l-13.6-4.1l-9.4-2.1l-6.2,0.9l-5.3,2.9l5.8,0.8l6.6,3.2l8,1.7l11.5,1.3C1325.2,95.7,1332.3,95.1,1332.3,95.1z M1153.6,87.8l0.9-0.6l-5.7-0.9L1146,87l-1.3,1l-1.5-1.2l-5.2,0.1l-6.2,0.8l7.7,0.1l-1.1,1.3l4.4,1l3.6-0.7l0.1-0.7l2.9-0.3C1149.4,88.4,1153.6,87.8,1153.6,87.8z M1354.1,97.7l-1.5-1.8l-12.5-2.6l-3-0.3l-2.2,0.5l1.2,6C1336.1,99.5,1354.1,97.7,1354.1,97.7z M1369.3,104l-9.2-0.7l3.4-1.2l-8.2-1.5l-6.1,1.9l-1,2l1.5,2.1l-6.9-0.1l-5.3,2.6l-4.3-1.1l-9.3,0.5l0.3,1.3l-9.2,0.7l-4.9,2.4l-4.2,0.2l-1.2,3.3l5.5,2.6l-7.7,0.7l-9.5-0.3l-5.8,1.1l4.8,5.4l6.9,4.3l-9.6-3l-7.9,0.3l-5.1,2l4.5,3.8l-4.9-1l-2.1-5l-4.2-2.8l-1.8,0.1l3.6,3.7l-4.6,3.5l8.1,4.2l0.4,5.4l2.9,2.9l4.7,0.5l0.4,3.5l4.4,3.1l-1.9,2.6l0.5,2.7l-3.7,1.4l-0.5,2l-5.3-0.8l3.5-7.8l-0.5-3.6l-6.7-3.3l-3.8-7.3l-3.7-3.7l-3.6-1.6l0.8-4.2l-2.9-2.9l-11.3-1.4l-2.1,1l0.5,4.7l-4.3,4.7l1.2,1.7l4.7,4.1l0.1,2.6l5.3,0.5l0.8,1.1l5.8,2.9l-1,2.8l-18.5-6.1l-6.6-1.7l-12.8-1.6l-1.2,1.7l5.9,3.1l-2.7,3.6l-6.4-3.2l-5,2.2l-7.6,0.1l-2.1,1.9l-5.3-0.6l2.5-3.3l-3.2-0.2l-12.3,4.6l-7.6,2.6l0.4,3.5l-6,1.2l-4-1.9l-1.2-3l5-0.7l-3.6-3l-12.2-1.8l4.3,3.4l-0.8,3.2l4.7,3.3l-1.1,3.8l-4.6-1.9l-4-0.3l-8,5.4l4.2,4.1l-3.2,1.4l-11.4-3.5l-2.1,2.1l3.3,2.4l0.2,2.7l-3.8-1.4l-6-1.7l-1.9-5.8l-1-2.6l-8-4l2.9-0.7l20.1,4.2l6.4-1.5l3.7-2.9l-1.6-3.6l-4-2.6l-17.6-6.1l-11.6-1.3l-7.6-3.2l-3.6,1.8l0,0l-6.4,2.2l-3.2,0.5l0.4,3.7l7.2,3.7l-2.8,4.1l6.4,6.3l-1.7,4.8l4.9,4.1l-0.9,3.7l7.3,3.9l-0.9,2.9l-3.3,3.3l-7.9,7.4l0,0l5.3,2.8l-4.5,3.2l0,0l0.9,1l-2.6,3.4l2.5,5.5l-1.6,1.9l2.4,1.4l1,2.8l2.1,3.6l5.2,1.5l1,1.4l2.3-0.7l4.8,1.4l1,2.9l-0.6,1.6l3.7,3.9l2.2,1.1l-0.1,1.1l3.4,1.1l1.7,1.6l-1.6,1.3l-3.9-0.2l-0.8,0.6l1.5,2l2,3.9l0,0l1.8,0.2l1-1.4l1.5,0.3l4.8-0.5l3.8,3.4l-0.9,1.3l0.7,1.9l4,0.2l2.2,2.7l0.2,1.2l6.6,2.2l3.5-1l3.6,2.9l2.9-0.1l7.6,2l0.4,1.9l-1.3,3.2l1.8,3.4l-0.3,2.1l-4.7,0.5l-2.2,1.7l0.4,2.8l4.2-1l0.4,1.3l-6.8,2.6l3.2,2.4l-3.2,5.2l-3.4,1l5,3.6l6.2,2.4l7.4,5.1l0.5-0.7l4.5,1.1l7.7,1l7.5,2.9l1.1,1.2l2.9-1l5.1,1.3l2.1,2.5l3.5,1.4l1.5,0.2l4.3,3.8l2.4,0.4l0.5-1.5l2.6-2.5l0,0l-7.3-7.3l-0.4-4.1l-5.9-5.9l3.5-6.3l4.6-1.1l1.4-3.7l-2.8-1l-0.2-3.2l-4.2-4.1l-3.6,0.2l-5.3-4.3l1.7-4.7l-1.7-1.2l2.1-6.8l6,3.6l-0.7-4.6l8.1-6.6l7.5-0.2l11.9,4.3l6.6,2.4l4.3-2.5l7.6-0.2l7.3,3.2l0.8-1.8l6.9,0.3l0.2-3l-9.4-4.2l3.6-2.9l-1.5-1.7l3.9-1.6l-5-4.1l1.4-2.1l16.8-2.1l1.7-1.5l10.8-2.2l3.1-2.5l9,1.3l4.3,6.3l4.3-1.5l7,2.1l1.2,3.3l4.4-0.4l9.1-5.7l-0.8,1.9l8.3,4.7l18.1,15.5l1.1-3.3l8.3,3.6l6.2-1.6l3.2,1.1l4.1,3.6l3.9,1.2l3.3,2.6l6-0.9l4.3,3.8l1.7-0.5l4.7-1l6.6-5.4l5.9-2.9l5.3,1.9l5.1,0.1l4.7,2.9l5,0.2l7.9,1.6l2.4-4.3l-4-3.6l1.3-6.4l6.9,2.5l4.8,0.8l6.6,1.5l3.7,4.6l8.4,2.6l3.9-1.1l5.7-0.8l5.4,0.8l6.5,3l4.9,3.1h4.5l6.7,1l3.6-1.6l5.8-1l4.5-4.4l3.3,0.7l3.9,2.1l5.5-0.5l7.3,2.3l4.4-3.9l-1.9-2.7l-0.1-6.5l1.2-2l-2.5-3.3l-3.7-1.5l1.7-3l5.1-1.1l6.2-0.2l8.5,1.8l5.9,2.3l7.7,6.1l3.8,2.7l4.4,3.7l6.1,6.1l9.9,1.9l8.9,4.5l6,5.8h7.5l2.6-2.5l6.9-1.8l1.3,5.6l-0.4,2.3l2.8,6.8l0.6,6l-6.8-1.1l-2.9,2.2l4.7,5.3l3.8,7.3l-2.5,0.1l1.9,3.1l0,0l1.4,1.1l0,0l0,0l0,0l-0.4-2l4-4.5l5.1,3l3.2-0.1l4.4-3.6l1-3.7l2.1-7.1l1.9-7.2l-1.3-4.3l1-9l-5.2-9.9l-5.5-7.3l-1.3-6.2l-4.7-5.1l-12.7-6.7l-5.6-0.4l-0.3,3l-5.8-1.3l-5.7-3.8l-8-0.7l4.9-14.1l3.5-11.5l13.1-1.8l14.9,1l2.5-2.8l7.9,0.8l4.3,4.3l6.4-0.6l8.4-1.6l-7.7-3.5v-9.8l9.1-1.9l12.1,7.1l3.6-6.4l-3.2-4.7l4.7-0.5l6.5,8.1l-2.4,4.6l-0.8,6l0.3,7.5l-5.7,1.3l2.8,2.7l-0.1,3.6l6.4,8.3l16,13.4l10.5,8.8l5.7,4.3l1.6-5.7l-4.5-6.2l5.7-1.5l-5.4-6.9l5-3.1l-4.7-2.6l-3.4-5l4.1-0.2l-9-8.6l-6.7-1.4l-2.9-2.4l-1.1-5.6l-3.1-3.9l7,0.8l1.3-2.5l4.7,2.2l6.1-4.6l11.4,4l-1.7-2.6l2-3.6l1.5-4l3.1-0.7l6.5-4.3l9.8,1.2l-0.9-1.5l-3.8-2.3l-4.1-1.6l-9.1-4.6l-8.1-3l6.1,0.4l2-2.5l0,0l-32.9-21.9l-9.4-2.3l-15.7-2.6l-7.9,0.3l-15.2-1.4l1.8,2.3l8.5,3.4l-2.5,1.8l-14.2-4.8l-6.8,0.6l-9.2-1.1l-7,0.2l-3.9,1.1l-7.2-1.6l-5.1-3.8l-6.5-2.2l-9.2-0.9l-14.7,1l-16.1-4l-7.8-3l-40.1-3.4l-2.1,2.2l9.3,4.8l-7.5-0.7l-1,1.5l-9.7-1.6l-5,1.4l-9.3-2.4l3,5.5l-8.9-2.1l-10-4.1l-0.4-2.2l-6-3.3l-9.8-2.6h-6.1l-9.3-0.9l4.7,3.9l-17.2-0.8l-3.9-2.3l-13.3-0.9l-5.3,0.8l-0.1,1.3l-5.8-3.2l-2.3,0.9l-7.2-1.2l-5.6-0.7l1.1-1.5l6.6-2.8l2.3-1.5l-2.4-2.5l-5.5-1.9l-11.5-2.3l-10.8-0.1l-1.9,1.2L1369.3,104L1369.3,104z M1207.1,135.6l-9.9-4.3l-3.1-4.3l3.3-4.9l2.8-5l8.6-4.7l9.8-2.4l11.3-2.4l1.3-1.5l-4.2-1.9l-6.6,0.6l-4.9,1.8l-11.7,0.9l-10.1,3.1l-6.8,2.7l2.5,2.2l-6.6,4.4l3.9,0.7l-5.4,4.3l1.6,2.8l-3.4,1.1l1.9,2.8l7.9,1.4l2.2,2.3l13.4,0.7L1207.1,135.6L1207.1,135.6z M1521.1,110.9l-17.9-2.6l-10.2-0.2l-3.4,0.9l3.4,3.4l12.4,3.2l4.5-1.2l14.2,0.2C1524.1,114.6,1521.1,110.9,1521.1,110.9z M1546.3,113.2l-11.7-1.3l-8.2-0.7l1.7,1.6l10.3,2l6.8,0.4L1546.3,113.2L1546.3,113.2z M1533.8,122.7l-2.5-1.4l-8.3-1.9l-4.1,0.5l-0.8,2l1.1,0.2l8.8,0.6C1528,122.7,1533.8,122.7,1533.8,122.7z M1696.4,135l-6-3.6l-1.4,2.2l3.5,1.6L1696.4,135z M1084,228.9l-0.6-1.5l0.2-1.7l-2.2-0.9l-5-1.1l-6.3,2l-0.7,2.6l5.9,0.7L1084,228.9z M1673.7,250.7l-7.2-6.2l-5.1-6l-6.8-5.8l-4.9-4l-1.3,0.8l4.4,2.8l-1.9,2.8l6.8,8.3l7.8,6l6.4,8.3l2.4,4.6l5.5,6.8l3.8,6l4.6,5.2l-0.1-4.8l6.5,3.8l-3-4.4l-9.5-6.3l-3.7-9l8.9,2L1673.7,250.7L1673.7,250.7z'
+    },
+    'UA-WITHOUT-CRIMEA': {
+      d: 'M1138.5,241l-4.8,0.5l-1.5-0.3l-1,1.4l-1.8-0.2l0,0l-4.1,0.3l-1.2,1.4l0.2,3.1l-2-0.6l-4.3,0.3l-1.5-1.5l-1.6,1.1l-2-0.9l-3.8-0.1l-5.6-1.5l-5-0.5l-3.7,0.2l-2.4,1.6l-2.2,0.3l3.1,5.3l-0.3,1.8l-2.3,0.7l-3.8,5.1l1.6,2.8l-1.1-0.4l-1.1,1.7l-0.7,2.5l2.9,1.7l0.6,1.6l1.9-1.3l3.2,0.7h3.2l2.4,1.5l1.6-0.9l3.6-0.6l1-1.5h2.1l1.1-0.9l3.2-0.6l3.9,1.9l2,0.3l2.5,1.6v2.1l1.9,1.1l1.1,2.6l2,1.5l-0.2,1l1,0.6l-1.2,0.5l-3-0.2l-0.6-0.9l-1,0.5l0.5,1.1l-1.1,2l-0.5,2.1l-1.2,0.7l2.4,1.1l2.2-1l2.4,1.1l3.3-4.6l1.3-3.4l4.5-0.8l0.7,2.4l8,1.5l1.7,1.4l7.4,1.3l-1-3.9l3.9-2.3l4.6-0.3l3-2l3.9-0.5l-0.4-2.8l2.2-1.7l4.7-0.5l0.3-2.1l-1.8-3.4l1.3-3.2l-0.4-1.9l-7.6-2l-2.9,0.1l-3.6-2.9l-3.5,1l-6.6-2.2l-0.2-1.2l-2.2-2.7l-4.7-2.1l0.9-1.3L1138.5,241L1138.5,241z'
     }
   };
 

package/src/scss/map.scss

@@ -1,3 +1,43 @@
+.svgMap-wrapper,
+.svgMap-container {
+  position: relative;
+}
+
+.svgMap-block-zoom-notice {
+  position: absolute;
+  z-index: 2;
+  top: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+  opacity: 0;
+  color: #fff;
+  transition: opacity 250ms;
+
+  .svgMap-block-zoom-notice-active & {
+    pointer-events: all;
+    top: 0;
+    opacity: 1;
+  }
+
+  > div {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding: 0 32px;
+    transform: translateY(-50%);
+    font-size: 28px;
+
+    @media (max-width: 900px) {
+      font-size: 22px;
+    }
+  }
+}
+
 .svgMap-map-wrapper {
   position: relative;
   width: 100%;
@@ -77,7 +117,7 @@
         left: 50%;
         transform: translate(-50%, -50%);
         background: #666;
-        transition: background-color 0.2s;
+        transition: background-color 250ms;
       }
 
       &:before {
@@ -85,7 +125,16 @@
         height: 3px;
       }
 
-      &:hover {
+      @media (hover: hover) {
+        &:hover {
+          &:before,
+          &:after {
+            background: $textColor;
+          }
+        }
+      }
+
+      &:active {
         &:before,
         &:after {
           background: $textColor;
@@ -121,18 +170,21 @@
     stroke-width: 1;
     stroke-linejoin: round;
     vector-effect: non-scaling-stroke;
-    transition: fill 0.2s, stroke 0.2s;
+    transition: fill 250ms, stroke 250ms;
 
     &[data-link] {
       cursor: pointer;
     }
 
-    &:hover,
-    &.svgMap-active {
-      stroke: $mapActiveStrokeColor;
+    @media (hover: hover) {
+      &:hover {
+        stroke: $mapActiveStrokeColor;
+        stroke-width: $mapActiveStrokeWidth;
+      }
     }
 
     &.svgMap-active {
+      stroke: $mapActiveStrokeColor;
       stroke-width: $mapActiveStrokeWidth;
     }
   }