svgmap 2.14.0 → 2.16.0

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.14.0",
+  "version": "2.16.0",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",

package/src/js/svgMap.js

@@ -45,6 +45,9 @@ function svgMapWrapper(svgPanZoom) {
       // The message to show for MacOS
       mouseWheelKeyMessageMac: 'Press the [COMMAND] key to zoom',
 
+      // Position of the zoom buttons
+      zoomButtonsPosition: 'bottomLeft',
+
       // Data colors
       colorMax: '#CC0033',
       colorMin: '#FFE5D9',
@@ -88,6 +91,9 @@ function svgMapWrapper(svgPanZoom) {
 
       // Set to true to show a drop down menu with the continents
       showContinentSelector: false,
+
+      // Reset zoom on resize
+      resetZoomOnResize: false,
     };
 
     this.options = Object.assign({}, defaultOptions, options || {});
@@ -405,9 +411,9 @@ function svgMapWrapper(svgPanZoom) {
     });
 
     data.data[data.applyData].thresholdMax &&
-      (max = Math.min(max, data.data[data.applyData].thresholdMax));
+    (max = Math.min(max, data.data[data.applyData].thresholdMax));
     data.data[data.applyData].thresholdMin &&
-      (min = Math.max(min, data.data[data.applyData].thresholdMin));
+    (min = Math.max(min, data.data[data.applyData].thresholdMin));
 
     // Loop through countries and set colors
     Object.keys(this.countries).forEach(
@@ -809,6 +815,7 @@ function svgMapWrapper(svgPanZoom) {
       'svgMap-map-controls-wrapper',
       this.mapWrapper
     );
+    mapControlsWrapper.classList.add('svgMap-controls-position-' + this.options.zoomButtonsPosition);
     var zoomContainer = this.createElement(
       'div',
       'svgMap-map-controls-zoom',
@@ -1097,6 +1104,12 @@ function svgMapWrapper(svgPanZoom) {
 
     // Initial zoom statuses
     this.setControlStatuses();
+
+    // Zoom reset on resize
+    if (this.options.resetZoomOnResize) {
+      const resizeObserver = new ResizeObserver(() => this.mapReset());
+      resizeObserver.observe(this.mapWrapper);
+    }
   };
 
   // Create the tooltip content
@@ -1171,7 +1184,7 @@ function svgMapWrapper(svgPanZoom) {
           if ((value !== undefined && this.options.hideMissingData === true) || this.options.hideMissingData === false) {
             item.floatingNumbers && (value = value.toFixed(1));
             item.thousandSeparator &&
-              (value = this.numberWithCommas(value, item.thousandSeparator));
+            (value = this.numberWithCommas(value, item.thousandSeparator));
             value = item.format
               ? item.format.replace('{0}', '<span>' + value + '</span>')
               : '<span>' + value + '</span>';
@@ -1217,8 +1230,8 @@ function svgMapWrapper(svgPanZoom) {
   svgMap.prototype.zoomMap = function (direction) {
     if (
       this[
-        'zoomControl' + direction.charAt(0).toUpperCase() + direction.slice(1)
-      ].classList.contains('svgMap-disabled')
+      'zoomControl' + direction.charAt(0).toUpperCase() + direction.slice(1)
+        ].classList.contains('svgMap-disabled')
     ) {
       return false;
     }
@@ -1239,6 +1252,12 @@ function svgMapWrapper(svgPanZoom) {
     }
   };
 
+  // Zoom reset
+  svgMap.prototype.mapReset = function () {
+    this.mapPanZoom.resize()
+    this.zoomMap('reset')
+  }
+
   // Zoom to Contient
 
   svgMap.prototype.zoomContinent = function (contientIso) {
@@ -1275,7 +1294,7 @@ function svgMapWrapper(svgPanZoom) {
     }
 
     this.autoHideMouseWheelNoticeTimeout &&
-      clearTimeout(this.autoHideMouseWheelNoticeTimeout);
+    clearTimeout(this.autoHideMouseWheelNoticeTimeout);
     this.autoHideMouseWheelNoticeTimeout = setTimeout(
       function () {
         this.hideMouseWheelZoomNotice();
@@ -1291,7 +1310,7 @@ function svgMapWrapper(svgPanZoom) {
   svgMap.prototype.hideMouseWheelZoomNotice = function () {
     this.wrapper.classList.remove('svgMap-block-zoom-notice-active');
     this.autoHideMouseWheelNoticeTimeout &&
-      clearTimeout(this.autoHideMouseWheelNoticeTimeout);
+    clearTimeout(this.autoHideMouseWheelNoticeTimeout);
   };
 
   // Block shing the zoom wheel notice for some time
@@ -1299,7 +1318,7 @@ function svgMapWrapper(svgPanZoom) {
   svgMap.prototype.blockMouseWheelZoomNotice = function (duration) {
     this.mouseWheelNoticeJustHidden = true;
     this.mouseWheelNoticeJustHiddenTimeout &&
-      clearTimeout(this.mouseWheelNoticeJustHiddenTimeout);
+    clearTimeout(this.mouseWheelNoticeJustHiddenTimeout);
     this.mouseWheelNoticeJustHiddenTimeout = setTimeout(
       function () {
         this.mouseWheelNoticeJustHidden = false;

package/src/scss/map.scss

@@ -70,14 +70,29 @@
 
   .svgMap-map-controls-wrapper {
     position: absolute;
-    bottom: 10px;
-    left: 10px;
     z-index: 1;
     display: flex;
     overflow: hidden;
     border-radius: 2px;
     box-shadow: $mapControlsBoxShadow;
 
+    &.svgMap-controls-position-bottomLeft {
+      bottom: 10px;
+      left: 10px;
+    }
+    &.svgMap-controls-position-bottomRight {
+      bottom: 10px;
+      right: 10px;
+    }
+    &.svgMap-controls-position-topLeft {
+      top: 10px;
+      left: 10px;
+    }
+    &.svgMap-controls-position-topRight {
+      top: 10px;
+      right: 10px;
+    }
+
     &.svgMap-disabled {
       display: none;
     }
@@ -214,6 +229,7 @@
   // Countries
 
   .svgMap-country {
+    fill: $colorNoData;
     stroke: $countryStrokeColor;
     stroke-width: 1;
     stroke-linejoin: round;

package/src/scss/variables.scss

@@ -3,6 +3,7 @@ $textColor: #111 !default;
 $textColorLight: #777 !default;
 
 // Map
+$colorNoData: #E2E2E2 !default;
 $oceanColor: #d9ecff !default;
 $mapActiveStrokeColor: #333 !default;
 $mapActiveStrokeWidth: 1.5 !default;