svgmap 2.7.1 → 2.9.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Stephan Wagner
+Copyright (c) 2022 Stephan Wagner
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -23,8 +23,8 @@ import 'svgmap/dist/svgMap.min.css';
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.7.1/dist/svgMap.min.js"></script>
-<link href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.7.1/dist/svgMap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.9.0/dist/svgMap.min.js"></script>
+<link href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.9.0/dist/svgMap.min.css" rel="stylesheet">
 ```
 
 ---
@@ -81,7 +81,9 @@ You can pass the following options into svgMap:
 | `maxZoom` | `float` | `25` | Maximal zoom level |
 | `initialZoom` | `float` | `1.06` | Initial zoom level |
 | `initialPan` | `object` | | Initial pan on x and y axis (e.g. `{ x: 30, y: 60 }`) |
+| `showContinentSelector` | `boolean` | `false` | Show continent selector |
 | `zoomScaleSensitivity` | `float` | `0.2` | Sensitivity when zooming |
+| `showZoomReset` | `boolean` | `false` | Show zoom reset button |
 | `mouseWheelZoomEnabled` | `boolean` | `true` | Enables or disables zooming with the scroll wheel |
 | `mouseWheelZoomWithKey` | `boolean` | `false` | Allow zooming only when one of the following keys is pressed: SHIFT, CONTROL, ALT, COMMAND, OPTION |
 | `mouseWheelKeyMessage` | `string` | `'Press the [ALT] key to zoom'` | The message when trying to scroll without a key |

package/assets/create-map-paths.html

@@ -8,7 +8,6 @@
   <svg id ="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1001">
 
     <!-- copy map path in here -->
-
     <path id="AF" d="M1369.9,333.8h-5.4l-3.8-0.5l-2.5,2.9l-2.1,0.7l-1.5,1.3l-2.6-2.1l-1-5.4l-1.6-0.3v-2l-3.2-1.5l-1.7,2.3l0.2,2.6
     l-0.6,0.9l-3.2-0.1l-0.9,3l-2.1-1.3l-3.3,2.1l-1.8-0.8l-4.3-1.4h-2.9l-1.6-0.2l-2.9-1.7l-0.3,2.3l-4.1,1.2l0.1,5.2l-2.5,2l-4,0.9
     l-0.4,3l-3.9,0.8l-5.9-2.4l-0.5,8l-0.5,4.7l2.5,0.9l-1.6,3.5l2.7,5.1l1.1,4l4.3,1.1l1.1,4l-3.9,5.8l9.6,3.2l5.3-0.9l3.3,0.8l0.9-1.4
@@ -295,7 +294,7 @@
     l-1.3,1.5l-6.1,0.2L882.8,488.5L882.8,488.5z"/>
   <path id="GW" d="M900.2,492.1l-10.3-0.3l-1.5,0.7l-1.8-0.2l-3,1.1l0.3,1.3l1.7,1.4v0.9l1.2,1.8l2.4,0.5l2.9,2.6l2.6-3.1l1.7,0.1
     l1.4-1h1.3l0.8-0.9l-0.4-2.1l0.6-0.7L900.2,492.1L900.2,492.1z"/>
-  <path id="GQ" d="M1040.1,557.8l-9.2-0.2l-1.9,7.2l1,0.9l1.9-0.3h8.2V557.8L1040.1,557.8z"/>
+  <path id="GQ" 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"/>
   <path id="GR" d="M1101.9,344.9l-0.8,2.8l6.6,1.2v1.1l7.6-0.6l0.5-1.9l-2.8,0.8v-1.1l-3.9-0.5l-4.1,0.4L1101.9,344.9L1101.9,344.9z
      M1113.4,307.5l-2.7-1.6l0.3,3l-4.6,0.6l-3.9-2.1l-3.9,1.7l-3.8-0.2l-1,0.2l-0.7,1.1l-2.8-0.1l-1.9,1.3l-3.3,0.6v1.6l-1.6,0.9
     l-0.1,2.1l-2.1,3l0.5,1.9l2.9,3.6l2.3,3l1.3,4.3l2.3,5.1l4.6,2.9l3.4-0.1l-2.4-5.7l3.3-0.7l-1.9-3.3l5,1.7l-0.4-3.7l-2.7-1.8l-3.2-3

package/assets/map-optimized.svg

@@ -288,7 +288,7 @@
 	l-1.3,1.5l-6.1,0.2L882.8,488.5L882.8,488.5z"/>
 <path id="GW" d="M900.2,492.1l-10.3-0.3l-1.5,0.7l-1.8-0.2l-3,1.1l0.3,1.3l1.7,1.4v0.9l1.2,1.8l2.4,0.5l2.9,2.6l2.6-3.1l1.7,0.1
 	l1.4-1h1.3l0.8-0.9l-0.4-2.1l0.6-0.7L900.2,492.1L900.2,492.1z"/>
-<path id="GQ" d="M1040.1,557.8l-9.2-0.2l-1.9,7.2l1,0.9l1.9-0.3h8.2V557.8L1040.1,557.8z"/>
+<path id="GQ" 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"/>
 <path id="GR" d="M1101.9,344.9l-0.8,2.8l6.6,1.2v1.1l7.6-0.6l0.5-1.9l-2.8,0.8v-1.1l-3.9-0.5l-4.1,0.4L1101.9,344.9L1101.9,344.9z
 	 M1113.4,307.5l-2.7-1.6l0.3,3l-4.6,0.6l-3.9-2.1l-3.9,1.7l-3.8-0.2l-1,0.2l-0.7,1.1l-2.8-0.1l-1.9,1.3l-3.3,0.6v1.6l-1.6,0.9
 	l-0.1,2.1l-2.1,3l0.5,1.9l2.9,3.6l2.3,3l1.3,4.3l2.3,5.1l4.6,2.9l3.4-0.1l-2.4-5.7l3.3-0.7l-1.9-3.3l5,1.7l-0.4-3.7l-2.7-1.8l-3.2-3

package/demo/es6/package-lock.json

@@ -346,6 +346,18 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "acorn": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
+      "dev": true
+    },
+    "acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true
+    },
     "address": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -2039,9 +2051,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "minipass": {
@@ -2145,9 +2157,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.25",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
-      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "dev": true
     },
     "negotiator": {
@@ -2296,9 +2308,9 @@
       }
     },
     "nth-check": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0"
@@ -3335,10 +3347,14 @@
       }
     },
     "vm2": {
-      "version": "3.9.3",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.3.tgz",
-      "integrity": "sha512-smLS+18RjXYMl9joyJxMNI9l4w7biW8ilSDaVRvFBDwOH8P0BK1ognFQTpg0wyQ6wIKLTblHJvROW692L/E53Q==",
-      "dev": true
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.7.tgz",
+      "integrity": "sha512-g/GZ7V0Mlmch3eDVOATvAXr1GsJNg6kQ5PjvYy3HbJMCRn5slNbo/u73Uy7r5yUej1cRa3ZjtoVwcWSQuQ/fow==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.7.0",
+        "acorn-walk": "^8.2.0"
+      }
     },
     "walk-up-path": {
       "version": "1.0.0",

package/demo/es6/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "index.js",
   "dependencies": {
-    "svgmap": "2.7.0"
+    "svgmap": "2.8.0"
   },
   "devDependencies": {
     "snowpack": "^3.8.3"

package/demo/html/index.html

@@ -45,7 +45,8 @@
             data: svgMapDataPopulation,
             flagType: 'emoji',
             mouseWheelZoomEnabled: true,
-            mouseWheelZoomWithKey: true
+            mouseWheelZoomWithKey: true,
+            showContinentSelector: true
           });
         </script>
       </div>
@@ -70,7 +71,8 @@
             mouseWheelZoomEnabled: true,
             mouseWheelZoomWithKey: true,
             mouseWheelKeyMessage: 'Bitte [ALT] drücken um zu zoomen',
-            mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen'
+            mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen',
+            showZoomReset: true
           });
         </script>
       </div>

package/dist/svgMap.css

@@ -114,6 +114,12 @@
   width: 11px;
   height: 3px;
 }
+.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before {
+  width: 11px;
+  height: 11px;
+  background: none;
+  border: 2px solid #666;
+}
 @media (hover: hover) {
   .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:after {
     background: #111;
@@ -125,6 +131,10 @@
 .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:after {
   background: #ccc;
 }
+.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled:before {
+  border: 2px solid #ccc;
+  background: none;
+}
 .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button {
   margin: 1px 0 1px 1px;
 }
@@ -135,6 +145,15 @@
 .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-out-button {
   margin: 1px 1px 1px 0;
 }
+.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, 0.1);
+}
 .svgMap-map-wrapper .svgMap-country {
   stroke: #fff;
   stroke-width: 1;

package/dist/svgMap.js

@@ -64,6 +64,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;
@@ -76,7 +79,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 || {});
@@ -679,6 +685,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 () {
@@ -699,6 +768,7 @@ function svgMapWrapper(svgPanZoom) {
     this.mapImage.classList.add('svgMap-map-image');
     this.mapWrapper.appendChild(this.mapImage);
 
+
     // Add controls
     var mapControlsWrapper = this.createElement(
       'div',
@@ -710,25 +780,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)
     );
 
@@ -736,6 +808,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);
 
@@ -845,7 +952,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');
 
@@ -854,7 +971,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
@@ -969,7 +1089,7 @@ function svgMapWrapper(svgPanZoom) {
       var flagContainer = this.createElement(
         'div',
         'svgMap-tooltip-flag-container svgMap-tooltip-flag-container-' +
-          this.options.flagType,
+        this.options.flagType,
         tooltipContentWrapper
       );
 
@@ -1035,6 +1155,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');
@@ -1044,6 +1168,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
@@ -1056,7 +1184,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
@@ -1357,7 +1511,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'
@@ -1971,15 +2125,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/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:transparent;border:none;border-radius:0;color:inherit;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:30px;height:30px;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:#666;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:#111}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:before{background:#111}.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:#ccc}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button{margin:1px 0 1px 1px}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button:after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-out-button{margin:1px 1px 1px 0}.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 #000;display:none;pointer-events:none;min-width:60px}.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #000}.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 #000;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-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:transparent;border:none;border-radius:0;color:inherit;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:30px;height:30px;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:#666;transition:background-color 250ms}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:before{width:11px;height:3px}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before{width:11px;height:11px;background:0 0;border:2px solid #666}@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:#111}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:before{background:#111}.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:#ccc}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled:before{border:2px solid #ccc;background:0 0}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button{margin:1px 0 1px 1px}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button:after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-out-button{margin:1px 1px 1px 0}.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 #000;display:none;pointer-events:none;min-width:60px}.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #000}.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 #000;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)}