svgmap 2.12.2 → 2.13.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.13.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-sourcemaps": "^3.0.0",
+    "gulp-header": "^1.8.9",
+    "gulp-rename": "^2.1.0",
+    "gulp-sass": "^6.0.1",
+    "gulp-sourcemaps": "^2.6.5",
     "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,
 
@@ -113,6 +119,7 @@ function svgMapWrapper(svgPanZoom) {
 
     // Block scrolling when option is enabled
     if (
+      this.options.allowInteraction &&
       this.options.mouseWheelZoomEnabled &&
       this.options.mouseWheelZoomWithKey
     ) {
@@ -794,8 +801,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 +812,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 +1021,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;