svgmap 2.13.0 → 2.15.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.13.0",
+  "version": "2.15.0",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",
@@ -18,10 +18,10 @@
     "gulp": "^5.0.1",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
-    "gulp-header": "^1.8.9",
+    "gulp-header": "^2.0.9",
     "gulp-rename": "^2.1.0",
     "gulp-sass": "^6.0.1",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
     "jest": "^30.0.5",
     "sass": "^1.90.0"

package/src/js/svgMap.js

@@ -45,13 +45,16 @@ 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',
       colorNoData: '#E2E2E2',
 
-      // Color attribute for setting a manual color in the data object
-      manualColorAttribute: 'color',
+      // Ratio type for the color scale, can be 'linear' or 'log' for logarithmic or a custom function (value, min, max) => ratio
+      ratioType: 'linear',
 
       // The flag type can be 'image' or 'emoji'
       flagType: 'image',
@@ -405,9 +408,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(
@@ -430,17 +433,45 @@ function svgMapWrapper(svgPanZoom) {
           min,
           parseInt(data.values[countryID][data.applyData], 10)
         );
-        var ratio = Math.max(0, Math.min(1, (value - min) / (max - min)));
+
         var color = this.getColor(
           this.toHex(this.options.colorMax),
           this.toHex(this.options.colorMin),
-          ratio || ratio === 0 ? ratio : 1
+          this.calculateColorRatio(value, min, max, this.options.ratioType)
         );
         element.setAttribute('fill', color);
       }.bind(this)
     );
   };
 
+  svgMap.prototype.calculateColorRatio = function (value, min, max, ratioType)  {
+    var range = max - min;
+    var positionInRange = value - min;
+
+    if (range === 0 || positionInRange === 0) {
+      return 0;
+    }
+
+    if (ratioType === 'log') {
+      var logValue = Math.log(positionInRange + 1);
+      var logMin = Math.log(1);
+      var logMax = Math.log(range + 1);
+      var ratio = Math.max(0, Math.min(1, (logValue - logMin) / (logMax - logMin)));
+      return ratio || ratio === 0 ? ratio : 1;
+    }
+
+    if (ratioType === 'linear') {
+      var ratio = Math.max(0, Math.min(1, positionInRange / range));
+      return ratio || ratio === 0 ? ratio : 1;
+    }
+
+    if (typeof ratioType === 'function') {
+      return ratioType(value, min, max);
+    }
+
+    return 1;
+  }
+
   // Emoji flags
 
   svgMap.prototype.emojiFlags = {
@@ -781,6 +812,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',
@@ -1143,7 +1175,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>';
@@ -1189,8 +1221,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;
     }
@@ -1247,7 +1279,7 @@ function svgMapWrapper(svgPanZoom) {
     }
 
     this.autoHideMouseWheelNoticeTimeout &&
-      clearTimeout(this.autoHideMouseWheelNoticeTimeout);
+    clearTimeout(this.autoHideMouseWheelNoticeTimeout);
     this.autoHideMouseWheelNoticeTimeout = setTimeout(
       function () {
         this.hideMouseWheelZoomNotice();
@@ -1263,7 +1295,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
@@ -1271,7 +1303,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;