svgmap 2.12.2 → 2.14.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.12.2",
+  "version": "2.14.0",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",
@@ -15,16 +15,16 @@
     "url": "https://github.com/StephanWagner/svgMap.git"
   },
   "devDependencies": {
-    "gulp": "^5.0.0",
+    "gulp": "^5.0.1",
     "gulp-clean-css": "^4.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-header": "^2.0.9",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^6.0.0",
+    "gulp-rename": "^2.1.0",
+    "gulp-sass": "^6.0.1",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "jest": "^29.7.0",
-    "sass": "^1.83.1"
+    "jest": "^30.0.5",
+    "sass": "^1.90.0"
   },
   "dependencies": {
     "svg-pan-zoom": "^3.6.2"

package/src/js/svgMap.js

@@ -11,6 +11,9 @@ function svgMapWrapper(svgPanZoom) {
       // The element to render the map in
       targetElementID: '',
 
+      // Allow user to zoom and pan
+      allowInteraction: true,
+
       // Minimum and maximum zoom
       minZoom: 1,
       maxZoom: 25,
@@ -27,6 +30,9 @@ function svgMapWrapper(svgPanZoom) {
       // Zoom sensitivity
       zoomScaleSensitivity: 0.2,
 
+      // Zoom with double-click
+      dblClickZoomEnabled: true,
+
       // Zoom with mousewheel
       mouseWheelZoomEnabled: true,
 
@@ -44,8 +50,8 @@ function svgMapWrapper(svgPanZoom) {
       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',
@@ -113,6 +119,7 @@ function svgMapWrapper(svgPanZoom) {
 
     // Block scrolling when option is enabled
     if (
+      this.options.allowInteraction &&
       this.options.mouseWheelZoomEnabled &&
       this.options.mouseWheelZoomWithKey
     ) {
@@ -423,17 +430,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 = {
@@ -794,8 +829,10 @@ function svgMapWrapper(svgPanZoom) {
           this[zoomControlName].type = 'button';
           this[zoomControlName].addEventListener(
             'click',
-            function () {
-              this.zoomMap(item);
+            function() {
+              if (this.options.allowInteraction) {
+                this.zoomMap(item);
+              }
             }.bind(this),
             { passive: true }
           );
@@ -803,11 +840,16 @@ function svgMapWrapper(svgPanZoom) {
       }.bind(this)
     );
 
+    if (!this.options.allowInteraction) {
+      mapControlsWrapper.classList.add('svgMap-disabled');
+      mapControlsWrapper.setAttribute('aria-disabled', 'true');
+    }
+
     // Add accessible names to zoom controls
     this.zoomControlIn.setAttribute('aria-label', 'Zoom in');
     this.zoomControlOut.setAttribute('aria-label', 'Zoom out');
 
-    if (this.options.showContinentSelector) {
+    if (this.options.allowInteraction && this.options.showContinentSelector) {
       // Add continent controls
       var mapContinentControlsWrapper = this.createElement(
         'div',
@@ -1007,14 +1049,16 @@ function svgMapWrapper(svgPanZoom) {
 
     // Init pan zoom
     this.mapPanZoom = svgPanZoom(this.mapImage, {
-      zoomEnabled: true,
+      zoomEnabled: this.options.allowInteraction,
+      panEnabled: this.options.allowInteraction,
       fit: true,
       center: true,
       minZoom: this.options.minZoom,
       maxZoom: this.options.maxZoom,
       zoomScaleSensitivity: this.options.zoomScaleSensitivity,
       controlIconsEnabled: false,
-      mouseWheelZoomEnabled: this.options.mouseWheelZoomEnabled,
+      dblClickZoomEnabled: this.options.allowInteraction ? this.options.dblClickZoomEnabled : false,
+      mouseWheelZoomEnabled: this.options.allowInteraction ? this.options.mouseWheelZoomEnabled : false,
       preventMouseEventsDefault: true,
       onZoom: function () {
         me.setControlStatuses();

package/src/scss/map.scss

@@ -77,6 +77,10 @@
     overflow: hidden;
     border-radius: 2px;
     box-shadow: $mapControlsBoxShadow;
+
+    &.svgMap-disabled {
+      display: none;
+    }
   }
 
   .svgMap-map-controls-zoom,

package/src/scss/variables.scss

@@ -10,7 +10,7 @@ $blockZoomNoticeColor: #fff !default;
 $blockZoomNoticeBackgroundColor: rgba(0, 0, 0, 0.8) !default;
 
 // Map Controls
-$mapControlsColor: #fff;
+$mapControlsColor: #fff !default;
 $mapControlsBackgroundColor: #fff !default;
 $mapControlsIconColor: #ccc !default;
 $mapControlsIconColorActive: #000 !default;