svgmap 2.7.1 → 2.9.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.7.1",
+  "version": "2.9.0",
   "private": false,
   "license": "MIT",
   "main": "dist/svgMap.min.js",

package/src/js/svgMap.js

@@ -63,6 +63,9 @@ function svgMapWrapper(svgPanZoom) {
       // Set to true to open the link on mobile devices, set to false (default) to show the tooltip
       touchLink: false,
 
+      // Set to true to show the to show a zoom reset button
+      showZoomReset: false,
+
       // Called when a tooltip is created to custimize the tooltip content
       onGetTooltip: function (tooltipDiv, countryID, countryValues) {
         return null;
@@ -75,7 +78,10 @@ function svgMapWrapper(svgPanZoom) {
 
         // Crimea: Set to 'RU' to make the Crimea part of Russia, by default it is part of the Ukraine
         Crimea: 'UA'
-      }
+      },
+
+      // Set to true to show a drop down menu with the continents
+      showContinentSelector: false,
     };
 
     this.options = Object.assign({}, defaultOptions, options || {});
@@ -678,6 +684,69 @@ function svgMapWrapper(svgPanZoom) {
     ZW: '🇿🇼'
   };
 
+  svgMap.prototype.continents = {
+    "EA": {
+      "iso": "EA",
+      "name": "World"
+    },
+    "AF": {
+      "iso": "AF",
+      "name": "Africa",
+      "pan": {
+        x: 454, y: 250
+      },
+      "zoom": 1.90
+    },
+    "AS": {
+      "iso": "AS",
+      "name": "Asia",
+      "pan": {
+        x: 904, y: 80
+      },
+      "zoom": 1.8
+    },
+    "EU": {
+      "iso": "EU",
+      "name": "Europe",
+      "pan": {
+        x: 404, y: 80
+      },
+      "zoom": 5
+    },
+    "NA": {
+      "iso": "NA",
+      "name": "North America",
+      "pan": {
+        x: 104, y: 55
+      },
+      "zoom": 2.6
+    },
+
+    "MA": {
+      "iso": "MA",
+      "name": "Middle America",
+      "pan": {
+        x: 104, y: 200
+      },
+      "zoom": 2.6
+    },
+    "SA": {
+      "iso": "SA",
+      "name": "South America",
+      "pan": {
+        x: 104, y: 340
+      },
+      "zoom": 2.2
+    },
+    "OC": {
+      "iso": "OC",
+      "name": "Oceania",
+      "pan": {
+        x: 954, y: 350
+      },
+      "zoom": 1.90
+    },
+  }
   // Create the SVG map
 
   svgMap.prototype.createMap = function () {
@@ -698,6 +767,7 @@ function svgMapWrapper(svgPanZoom) {
     this.mapImage.classList.add('svgMap-map-image');
     this.mapWrapper.appendChild(this.mapImage);
 
+
     // Add controls
     var mapControlsWrapper = this.createElement(
       'div',
@@ -709,25 +779,27 @@ function svgMapWrapper(svgPanZoom) {
       'svgMap-map-controls-zoom',
       mapControlsWrapper
     );
-    ['in', 'out'].forEach(
+    ['in', 'out', 'reset'].forEach(
       function (item) {
-        var zoomControlName =
-          'zoomControl' + item.charAt(0).toUpperCase() + item.slice(1);
-        this[zoomControlName] = this.createElement(
-          'button',
-          'svgMap-control-button svgMap-zoom-button svgMap-zoom-' +
+        if (item === 'reset' && this.options.showZoomReset || item !== 'reset') {
+          var zoomControlName =
+            'zoomControl' + item.charAt(0).toUpperCase() + item.slice(1);
+          this[zoomControlName] = this.createElement(
+            'button',
+            'svgMap-control-button svgMap-zoom-button svgMap-zoom-' +
             item +
             '-button',
-          zoomContainer
-        );
-        this[zoomControlName].type = 'button';
-        this[zoomControlName].addEventListener(
-          'click',
-          function () {
-            this.zoomMap(item);
-          }.bind(this),
-          { passive: true }
-        );
+            zoomContainer
+          );
+          this[zoomControlName].type = 'button';
+          this[zoomControlName].addEventListener(
+            'click',
+            function () {
+              this.zoomMap(item);
+            }.bind(this),
+            { passive: true }
+          );
+        }
       }.bind(this)
     );
 
@@ -735,6 +807,41 @@ function svgMapWrapper(svgPanZoom) {
     this.zoomControlIn.setAttribute('aria-label', 'Zoom in');
     this.zoomControlOut.setAttribute('aria-label', 'Zoom out');
 
+    if (this.options.showContinentSelector) {
+      // Add continent controls
+      var mapContinentControlsWrapper = this.createElement(
+        'div',
+        'svgMap-map-continent-controls-wrapper',
+        this.mapWrapper
+      );
+      this["continentSelect"] = this.createElement(
+        'select',
+        'svgMap-continent-select',
+        mapContinentControlsWrapper
+      );
+      var that = this;
+      Object.keys(svgMap.prototype.continents).forEach(
+        function (item) {
+          let element = that.createElement(
+            'option',
+            'svgMap-continent-option svgMap-continent-iso-' + svgMap.prototype.continents[item].iso,
+            that["continentSelect"],
+            svgMap.prototype.continents[item].name
+          );
+          element.value = item
+        }
+      );
+
+      this.continentSelect.addEventListener(
+        'change',
+        function (e) {
+          const continent = e.target.value;
+          if (continent) this.zoomContinent(e.target.value);
+        }.bind(that),
+        { passive: true }
+      );
+      mapContinentControlsWrapper.setAttribute('aria-label', 'Select continent');
+    }
     // Fix countries
     var mapPaths = Object.assign({}, this.mapPaths);
 
@@ -844,7 +951,17 @@ function svgMapWrapper(svgPanZoom) {
               this.options.data.values[countryID]['linkTarget']
             );
           }
-          countryElement.addEventListener('click', function (e) {
+
+          let dragged = false;
+          countryElement.addEventListener('mousedown', function () { dragged = false });
+          countryElement.addEventListener('touchstart', function () { dragged = false });
+          countryElement.addEventListener('mousemove', function () { dragged = true });
+          countryElement.addEventListener('touchmove', function () { dragged = true });
+          const clickHandler = function (e) {
+            if (dragged) {
+              return;
+            }
+
             const link = countryElement.getAttribute('data-link');
             const target = countryElement.getAttribute('data-link-target');
 
@@ -853,7 +970,10 @@ function svgMapWrapper(svgPanZoom) {
             } else {
               window.location.href = link;
             }
-          });
+          }
+
+          countryElement.addEventListener('click', clickHandler);
+          countryElement.addEventListener('touchend', clickHandler);
         }
 
         // Hide tooltip when mouse leaves the country area
@@ -968,7 +1088,7 @@ function svgMapWrapper(svgPanZoom) {
       var flagContainer = this.createElement(
         'div',
         'svgMap-tooltip-flag-container svgMap-tooltip-flag-container-' +
-          this.options.flagType,
+        this.options.flagType,
         tooltipContentWrapper
       );
 
@@ -1034,6 +1154,10 @@ function svgMapWrapper(svgPanZoom) {
     this.zoomControlIn.setAttribute('aria-disabled', 'false');
     this.zoomControlOut.classList.remove('svgMap-disabled');
     this.zoomControlOut.setAttribute('aria-disabled', 'false');
+    if (this.options.showZoomReset) {
+      this.zoomControlReset.classList.remove('svgMap-disabled');
+      this.zoomControlReset.setAttribute('aria-disabled', 'false');
+    }
 
     if (this.mapPanZoom.getZoom().toFixed(3) <= this.options.minZoom) {
       this.zoomControlOut.classList.add('svgMap-disabled');
@@ -1043,6 +1167,10 @@ function svgMapWrapper(svgPanZoom) {
       this.zoomControlIn.classList.add('svgMap-disabled');
       this.zoomControlIn.setAttribute('aria-disabled', 'true');
     }
+    if (this.options.showZoomReset && this.mapPanZoom.getZoom().toFixed(3) == this.options.initialZoom) {
+      this.zoomControlReset.classList.add('svgMap-disabled');
+      this.zoomControlReset.setAttribute('aria-disabled', 'true');
+    }
   };
 
   // Zoom map
@@ -1055,7 +1183,33 @@ function svgMapWrapper(svgPanZoom) {
     ) {
       return false;
     }
-    this.mapPanZoom[direction == 'in' ? 'zoomIn' : 'zoomOut']();
+    if (direction === 'reset') {
+      this.mapPanZoom.reset();
+      if (this.options.initialPan.x != 0 || this.options.initialPan.y != 0) {
+        // Init zoom and pan
+        this.mapPanZoom.zoomAtPointBy(this.options.initialZoom, {
+          x: this.options.initialPan.x,
+          y: this.options.initialPan.y
+        });
+      } else {
+        // Init zoom
+        this.mapPanZoom.zoom(this.options.initialZoom);
+      }
+    } else {
+      this.mapPanZoom[direction == 'in' ? 'zoomIn' : 'zoomOut']();
+    }
+  };
+
+  // Zoom to Contient
+
+  svgMap.prototype.zoomContinent = function (contientIso) {
+    
+    const continent = this.continents[contientIso];
+    if (continent.iso == "EA") this.mapPanZoom.reset()
+    else if (continent.pan) {
+      this.mapPanZoom.reset()
+      this.mapPanZoom.zoomAtPoint(continent.zoom, continent.pan);
+    }
   };
 
   // Add elements to show the zoom with keys notice
@@ -1356,7 +1510,7 @@ function svgMapWrapper(svgPanZoom) {
       d: 'M487.2,487l0.6-2.5l-0.7-0.7l-1.1-0.5l-2.5,0.8l-0.1-0.9l-1.6-1l-1.1-1.3l-1.5-0.5l-1.4,0.4l0.2,0.7l-1.1,0.7 l-2.1,1.6l-0.2,1l1.4,1.3l3.1,0.4l2.2,1.3l1.9,0.6l3.3,0.1L487.2,487L487.2,487z'
     },
     'GQ': {
-      d: 'M1040.1,557.8l-9.2-0.2l-1.9,7.2l1,0.9l1.9-0.3h8.2V557.8L1040.1,557.8z'
+      d: 'M 1040.1 557.8 l -9.2 -0.2 l -1.9 7.2 l 1 0.9 l 1.9 -0.3 h 8.2 V 557.8 L 1040.1 557.8 z M 1023 551 L 1023.6 550.2 L 1023.6 549.8 L 1024.6 548.25 L 1024.45 547.5 L 1023.04 547.4 L 1022.5 548.2 L 1022.55 548.55 L 1022.25 549.36 L 1021.55 549.5 L 1021.25 550.15 L 1021.5 550.7 L 1023 551 M 1003.8 580.2 L 1003.9 580.44 L 1003.82 580.62 L 1003.65 580.55 L 1003.63 580.232 L 1003.8 580.2'
     },
     'ER': {
       d: 'M1198.1,474l-3.2-3.1l-1.8-5.9l-3.7-7.3l-2.6,3.6l-4,1l-1.6,2l-0.4,4.2l-1.9,9.4l0.7,2.5l6.5,1.3l1.5-4.7l3.5,2.9 l3.2-1.5l1.4,1.3l3.9,0.1l4.9,2.5l1.6,2.2l2.5,2.1l2.5,3.7l2,2.1l2.4,0.5l1.6-1.5l-2.8-1.9l-1.9-2.2l-3.2-3.7l-3.2-3.6L1198.1,474z'
@@ -1970,15 +2124,15 @@ function svgMapWrapper(svgPanZoom) {
     ratio = parseFloat(ratio).toFixed(1);
     var r = Math.ceil(
       parseInt(color1.substring(0, 2), 16) * ratio +
-        parseInt(color2.substring(0, 2), 16) * (1 - ratio)
+      parseInt(color2.substring(0, 2), 16) * (1 - ratio)
     );
     var g = Math.ceil(
       parseInt(color1.substring(2, 4), 16) * ratio +
-        parseInt(color2.substring(2, 4), 16) * (1 - ratio)
+      parseInt(color2.substring(2, 4), 16) * (1 - ratio)
     );
     var b = Math.ceil(
       parseInt(color1.substring(4, 6), 16) * ratio +
-        parseInt(color2.substring(4, 6), 16) * (1 - ratio)
+      parseInt(color2.substring(4, 6), 16) * (1 - ratio)
     );
     return '#' + this.getHex(r) + this.getHex(g) + this.getHex(b);
   };

package/src/scss/map.scss

@@ -111,7 +111,7 @@
     &.svgMap-zoom-button {
       &:before,
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         top: 50%;
         left: 50%;
@@ -124,6 +124,12 @@
         width: 11px;
         height: 3px;
       }
+      &.svgMap-zoom-reset-button::before {
+        width: 11px;
+        height: 11px;
+        background: none;
+        border: 2px solid #666;
+      }
 
       @media (hover: hover) {
         &:hover {
@@ -147,6 +153,12 @@
           background: #ccc;
         }
       }
+      &.svgMap-zoom-reset-button {
+        &.svgMap-disabled:before {
+          border: 2px solid #ccc;
+          background: none;
+        }
+      }
     }
 
     &.svgMap-zoom-in-button {
@@ -163,6 +175,17 @@
     }
   }
 
+  // Contient controls 
+  .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, 0.1);
+  }
+
   // Countries
 
   .svgMap-country {