svgmap 2.12.2 → 2.14.0

package/demo/react/app/package.json

@@ -10,7 +10,7 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
-    "svgmap": "2.10.0"
+    "svgmap": "2.12.2"
   },
   "scripts": {
     "start": "react-scripts start",

package/dist/svgMap.css

@@ -71,6 +71,9 @@
   border-radius: 2px;
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
+.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-disabled {
+  display: none;
+}
 .svgMap-map-wrapper .svgMap-map-controls-zoom,
 .svgMap-map-wrapper .svgMap-map-controls-move {
   display: flex;

package/dist/svgMap.js

@@ -12,6 +12,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,
@@ -28,6 +31,9 @@ function svgMapWrapper(svgPanZoom) {
       // Zoom sensitivity
       zoomScaleSensitivity: 0.2,
 
+      // Zoom with double-click
+      dblClickZoomEnabled: true,
+
       // Zoom with mousewheel
       mouseWheelZoomEnabled: true,
 
@@ -45,8 +51,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',
@@ -114,6 +120,7 @@ function svgMapWrapper(svgPanZoom) {
 
     // Block scrolling when option is enabled
     if (
+      this.options.allowInteraction &&
       this.options.mouseWheelZoomEnabled &&
       this.options.mouseWheelZoomWithKey
     ) {
@@ -424,17 +431,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 = {
@@ -795,8 +830,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 }
           );
@@ -804,11 +841,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',
@@ -1008,14 +1050,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/dist/svgMap.min.css

@@ -1,2 +1,2 @@
 /*! svgMap | https://github.com/StephanWagner/svgMap | MIT License | Copyright Stephan Wagner | https://stephanwagner.me */
-.svgMap-container,.svgMap-wrapper{position:relative}.svgMap-block-zoom-notice{position:absolute;z-index:2;top:100%;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);pointer-events:none;opacity:0;color:#fff;transition:opacity 250ms}.svgMap-block-zoom-notice-active .svgMap-block-zoom-notice{pointer-events:all;top:0;opacity:1}.svgMap-block-zoom-notice>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){.svgMap-block-zoom-notice>div{font-size:22px}}.svgMap-map-wrapper{position:relative;width:100%;padding-top:50%;overflow:hidden;background:#d9ecff;color:#111}.svgMap-map-wrapper *{box-sizing:border-box}.svgMap-map-wrapper :focus:not(:focus-visible){outline:0}.svgMap-map-wrapper .svgMap-map-image{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.svgMap-map-wrapper .svgMap-map-controls-wrapper{position:absolute;bottom:10px;left:10px;z-index:1;display:flex;overflow:hidden;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-map-controls-move,.svgMap-map-wrapper .svgMap-map-controls-zoom{display:flex;margin-right:5px;overflow:hidden;background:#fff}.svgMap-map-wrapper .svgMap-map-controls-move:last-child,.svgMap-map-wrapper .svgMap-map-controls-zoom:last-child{margin-right:0}.svgMap-map-wrapper .svgMap-control-button{background-color:#fff;border:none;border-radius:0;color:#fff;font:inherit;line-height:inherit;margin:0;padding:0;overflow:visible;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:32px;height:32px;position:relative}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ccc;transition:background-color 250ms}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{width:11px;height:3px}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::before{background:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::before{background:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before{width:11px;height:11px;background:0 0;border:2px solid #ccc;transition:border-color 250ms}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:hover::before{background:0 0;border-color:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:active::before{background:0 0;border-color:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::before{background:#eee}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled{cursor:default}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled::before{border:2px solid #eee;background:0 0}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button::after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-map-continent-controls-wrapper{position:absolute;top:10px;right:10px;z-index:1;display:flex;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-country{stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 250ms,stroke 250ms}.svgMap-map-wrapper .svgMap-country[data-link]{cursor:pointer}@media (hover:hover){.svgMap-map-wrapper .svgMap-country:hover{stroke:#333;stroke-width:1.5}}.svgMap-map-wrapper .svgMap-country.svgMap-active{stroke:#333;stroke-width:1.5}.svgMap-tooltip{box-shadow:0 0 3px rgba(0,0,0,.2);position:absolute;z-index:2;border-radius:2px;background:#fff;transform:translate(-50%,-100%);border-bottom:1px solid #111;display:none;pointer-events:none;min-width:60px}.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #111}.svgMap-tooltip.svgMap-active{display:block}.svgMap-tooltip .svgMap-tooltip-content-container{position:relative;padding:10px 20px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container{text-align:center;margin:2px 0 5px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container.svgMap-tooltip-flag-container-emoji{font-size:50px;line-height:0;padding:25px 0 15px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag{display:block;margin:auto;width:auto;height:32px;padding:2px;background:rgba(0,0,0,.15);border-radius:2px}.svgMap-tooltip .svgMap-tooltip-title{white-space:nowrap;font-size:18px;line-height:28px;padding:0 0 8px;text-align:center}.svgMap-tooltip .svgMap-tooltip-content{white-space:nowrap;text-align:center;font-size:14px;color:#777;margin:-5px 0 0}.svgMap-tooltip .svgMap-tooltip-content table{padding:0;border-spacing:0;margin:auto}.svgMap-tooltip .svgMap-tooltip-content table td{padding:2px 0;text-align:left}.svgMap-tooltip .svgMap-tooltip-content table td span{color:#111}.svgMap-tooltip .svgMap-tooltip-content table td:first-child{padding-right:10px;text-align:right}.svgMap-tooltip .svgMap-tooltip-content table td sup{vertical-align:baseline;position:relative;top:-5px}.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data{padding:2px 0;color:#777;font-style:italic}.svgMap-tooltip .svgMap-tooltip-pointer{position:absolute;top:100%;left:50%;transform:translateX(-50%);overflow:hidden;height:10px;width:30px}.svgMap-tooltip .svgMap-tooltip-pointer::after{content:"";width:20px;height:20px;background:#fff;border:1px solid #111;position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(45deg)}.svgMap-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer{bottom:auto;top:-10px;transform:translateX(-50%) scaleY(-1)}
+.svgMap-container,.svgMap-wrapper{position:relative}.svgMap-block-zoom-notice{position:absolute;z-index:2;top:100%;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);pointer-events:none;opacity:0;color:#fff;transition:opacity 250ms}.svgMap-block-zoom-notice-active .svgMap-block-zoom-notice{pointer-events:all;top:0;opacity:1}.svgMap-block-zoom-notice>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){.svgMap-block-zoom-notice>div{font-size:22px}}.svgMap-map-wrapper{position:relative;width:100%;padding-top:50%;overflow:hidden;background:#d9ecff;color:#111}.svgMap-map-wrapper *{box-sizing:border-box}.svgMap-map-wrapper :focus:not(:focus-visible){outline:0}.svgMap-map-wrapper .svgMap-map-image{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.svgMap-map-wrapper .svgMap-map-controls-wrapper{position:absolute;bottom:10px;left:10px;z-index:1;display:flex;overflow:hidden;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-disabled{display:none}.svgMap-map-wrapper .svgMap-map-controls-move,.svgMap-map-wrapper .svgMap-map-controls-zoom{display:flex;margin-right:5px;overflow:hidden;background:#fff}.svgMap-map-wrapper .svgMap-map-controls-move:last-child,.svgMap-map-wrapper .svgMap-map-controls-zoom:last-child{margin-right:0}.svgMap-map-wrapper .svgMap-control-button{background-color:#fff;border:none;border-radius:0;color:#fff;font:inherit;line-height:inherit;margin:0;padding:0;overflow:visible;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:32px;height:32px;position:relative}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ccc;transition:background-color 250ms}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{width:11px;height:3px}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::before{background:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::before{background:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before{width:11px;height:11px;background:0 0;border:2px solid #ccc;transition:border-color 250ms}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:hover::before{background:0 0;border-color:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:active::before{background:0 0;border-color:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::before{background:#eee}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled{cursor:default}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled::before{border:2px solid #eee;background:0 0}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button::after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-map-continent-controls-wrapper{position:absolute;top:10px;right:10px;z-index:1;display:flex;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-country{stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 250ms,stroke 250ms}.svgMap-map-wrapper .svgMap-country[data-link]{cursor:pointer}@media (hover:hover){.svgMap-map-wrapper .svgMap-country:hover{stroke:#333;stroke-width:1.5}}.svgMap-map-wrapper .svgMap-country.svgMap-active{stroke:#333;stroke-width:1.5}.svgMap-tooltip{box-shadow:0 0 3px rgba(0,0,0,.2);position:absolute;z-index:2;border-radius:2px;background:#fff;transform:translate(-50%,-100%);border-bottom:1px solid #111;display:none;pointer-events:none;min-width:60px}.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #111}.svgMap-tooltip.svgMap-active{display:block}.svgMap-tooltip .svgMap-tooltip-content-container{position:relative;padding:10px 20px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container{text-align:center;margin:2px 0 5px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container.svgMap-tooltip-flag-container-emoji{font-size:50px;line-height:0;padding:25px 0 15px}.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag{display:block;margin:auto;width:auto;height:32px;padding:2px;background:rgba(0,0,0,.15);border-radius:2px}.svgMap-tooltip .svgMap-tooltip-title{white-space:nowrap;font-size:18px;line-height:28px;padding:0 0 8px;text-align:center}.svgMap-tooltip .svgMap-tooltip-content{white-space:nowrap;text-align:center;font-size:14px;color:#777;margin:-5px 0 0}.svgMap-tooltip .svgMap-tooltip-content table{padding:0;border-spacing:0;margin:auto}.svgMap-tooltip .svgMap-tooltip-content table td{padding:2px 0;text-align:left}.svgMap-tooltip .svgMap-tooltip-content table td span{color:#111}.svgMap-tooltip .svgMap-tooltip-content table td:first-child{padding-right:10px;text-align:right}.svgMap-tooltip .svgMap-tooltip-content table td sup{vertical-align:baseline;position:relative;top:-5px}.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data{padding:2px 0;color:#777;font-style:italic}.svgMap-tooltip .svgMap-tooltip-pointer{position:absolute;top:100%;left:50%;transform:translateX(-50%);overflow:hidden;height:10px;width:30px}.svgMap-tooltip .svgMap-tooltip-pointer::after{content:"";width:20px;height:20px;background:#fff;border:1px solid #111;position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(45deg)}.svgMap-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer{bottom:auto;top:-10px;transform:translateX(-50%) scaleY(-1)}