svgmap 2.7.2 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,10 +6,10 @@
6
6
  "license": "MIT",
7
7
  "main": "index.js",
8
8
  "dependencies": {
9
- "svgmap": "2.7.0"
9
+ "svgmap": "2.9.0"
10
10
  },
11
11
  "devDependencies": {
12
- "snowpack": "^3.8.3"
12
+ "snowpack": "^3.8.8"
13
13
  },
14
14
  "scripts": {
15
15
  "start": "snowpack dev"
@@ -45,7 +45,8 @@
45
45
  data: svgMapDataPopulation,
46
46
  flagType: 'emoji',
47
47
  mouseWheelZoomEnabled: true,
48
- mouseWheelZoomWithKey: true
48
+ mouseWheelZoomWithKey: true,
49
+ showContinentSelector: true
49
50
  });
50
51
  </script>
51
52
  </div>
@@ -70,7 +71,8 @@
70
71
  mouseWheelZoomEnabled: true,
71
72
  mouseWheelZoomWithKey: true,
72
73
  mouseWheelKeyMessage: 'Bitte [ALT] drücken um zu zoomen',
73
- mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen'
74
+ mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen',
75
+ showZoomReset: true
74
76
  });
75
77
  </script>
76
78
  </div>
package/dist/svgMap.css CHANGED
@@ -114,6 +114,12 @@
114
114
  width: 11px;
115
115
  height: 3px;
116
116
  }
117
+ .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before {
118
+ width: 11px;
119
+ height: 11px;
120
+ background: none;
121
+ border: 2px solid #666;
122
+ }
117
123
  @media (hover: hover) {
118
124
  .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:after {
119
125
  background: #111;
@@ -125,6 +131,10 @@
125
131
  .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:after {
126
132
  background: #ccc;
127
133
  }
134
+ .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled:before {
135
+ border: 2px solid #ccc;
136
+ background: none;
137
+ }
128
138
  .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button {
129
139
  margin: 1px 0 1px 1px;
130
140
  }
@@ -135,6 +145,15 @@
135
145
  .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-out-button {
136
146
  margin: 1px 1px 1px 0;
137
147
  }
148
+ .svgMap-map-wrapper .svgMap-map-continent-controls-wrapper {
149
+ position: absolute;
150
+ top: 10px;
151
+ right: 10px;
152
+ z-index: 1;
153
+ display: flex;
154
+ border-radius: 2px;
155
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
156
+ }
138
157
  .svgMap-map-wrapper .svgMap-country {
139
158
  stroke: #fff;
140
159
  stroke-width: 1;
package/dist/svgMap.js CHANGED
@@ -57,6 +57,9 @@ function svgMapWrapper(svgPanZoom) {
57
57
 
58
58
  // Decide whether to show the flag option or not
59
59
  hideFlag: false,
60
+
61
+ // Whether attributes with no data should be displayed
62
+ hideMissingData: false,
60
63
 
61
64
  // The default text to be shown when no data is present
62
65
  noDataText: 'No data available',
@@ -64,6 +67,9 @@ function svgMapWrapper(svgPanZoom) {
64
67
  // Set to true to open the link on mobile devices, set to false (default) to show the tooltip
65
68
  touchLink: false,
66
69
 
70
+ // Set to true to show the to show a zoom reset button
71
+ showZoomReset: false,
72
+
67
73
  // Called when a tooltip is created to custimize the tooltip content
68
74
  onGetTooltip: function (tooltipDiv, countryID, countryValues) {
69
75
  return null;
@@ -76,7 +82,10 @@ function svgMapWrapper(svgPanZoom) {
76
82
 
77
83
  // Crimea: Set to 'RU' to make the Crimea part of Russia, by default it is part of the Ukraine
78
84
  Crimea: 'UA'
79
- }
85
+ },
86
+
87
+ // Set to true to show a drop down menu with the continents
88
+ showContinentSelector: false,
80
89
  };
81
90
 
82
91
  this.options = Object.assign({}, defaultOptions, options || {});
@@ -679,6 +688,69 @@ function svgMapWrapper(svgPanZoom) {
679
688
  ZW: '🇿🇼'
680
689
  };
681
690
 
691
+ svgMap.prototype.continents = {
692
+ "EA": {
693
+ "iso": "EA",
694
+ "name": "World"
695
+ },
696
+ "AF": {
697
+ "iso": "AF",
698
+ "name": "Africa",
699
+ "pan": {
700
+ x: 454, y: 250
701
+ },
702
+ "zoom": 1.90
703
+ },
704
+ "AS": {
705
+ "iso": "AS",
706
+ "name": "Asia",
707
+ "pan": {
708
+ x: 904, y: 80
709
+ },
710
+ "zoom": 1.8
711
+ },
712
+ "EU": {
713
+ "iso": "EU",
714
+ "name": "Europe",
715
+ "pan": {
716
+ x: 404, y: 80
717
+ },
718
+ "zoom": 5
719
+ },
720
+ "NA": {
721
+ "iso": "NA",
722
+ "name": "North America",
723
+ "pan": {
724
+ x: 104, y: 55
725
+ },
726
+ "zoom": 2.6
727
+ },
728
+
729
+ "MA": {
730
+ "iso": "MA",
731
+ "name": "Middle America",
732
+ "pan": {
733
+ x: 104, y: 200
734
+ },
735
+ "zoom": 2.6
736
+ },
737
+ "SA": {
738
+ "iso": "SA",
739
+ "name": "South America",
740
+ "pan": {
741
+ x: 104, y: 340
742
+ },
743
+ "zoom": 2.2
744
+ },
745
+ "OC": {
746
+ "iso": "OC",
747
+ "name": "Oceania",
748
+ "pan": {
749
+ x: 954, y: 350
750
+ },
751
+ "zoom": 1.90
752
+ },
753
+ }
682
754
  // Create the SVG map
683
755
 
684
756
  svgMap.prototype.createMap = function () {
@@ -699,6 +771,7 @@ function svgMapWrapper(svgPanZoom) {
699
771
  this.mapImage.classList.add('svgMap-map-image');
700
772
  this.mapWrapper.appendChild(this.mapImage);
701
773
 
774
+
702
775
  // Add controls
703
776
  var mapControlsWrapper = this.createElement(
704
777
  'div',
@@ -710,25 +783,27 @@ function svgMapWrapper(svgPanZoom) {
710
783
  'svgMap-map-controls-zoom',
711
784
  mapControlsWrapper
712
785
  );
713
- ['in', 'out'].forEach(
786
+ ['in', 'out', 'reset'].forEach(
714
787
  function (item) {
715
- var zoomControlName =
716
- 'zoomControl' + item.charAt(0).toUpperCase() + item.slice(1);
717
- this[zoomControlName] = this.createElement(
718
- 'button',
719
- 'svgMap-control-button svgMap-zoom-button svgMap-zoom-' +
788
+ if (item === 'reset' && this.options.showZoomReset || item !== 'reset') {
789
+ var zoomControlName =
790
+ 'zoomControl' + item.charAt(0).toUpperCase() + item.slice(1);
791
+ this[zoomControlName] = this.createElement(
792
+ 'button',
793
+ 'svgMap-control-button svgMap-zoom-button svgMap-zoom-' +
720
794
  item +
721
795
  '-button',
722
- zoomContainer
723
- );
724
- this[zoomControlName].type = 'button';
725
- this[zoomControlName].addEventListener(
726
- 'click',
727
- function () {
728
- this.zoomMap(item);
729
- }.bind(this),
730
- { passive: true }
731
- );
796
+ zoomContainer
797
+ );
798
+ this[zoomControlName].type = 'button';
799
+ this[zoomControlName].addEventListener(
800
+ 'click',
801
+ function () {
802
+ this.zoomMap(item);
803
+ }.bind(this),
804
+ { passive: true }
805
+ );
806
+ }
732
807
  }.bind(this)
733
808
  );
734
809
 
@@ -736,6 +811,41 @@ function svgMapWrapper(svgPanZoom) {
736
811
  this.zoomControlIn.setAttribute('aria-label', 'Zoom in');
737
812
  this.zoomControlOut.setAttribute('aria-label', 'Zoom out');
738
813
 
814
+ if (this.options.showContinentSelector) {
815
+ // Add continent controls
816
+ var mapContinentControlsWrapper = this.createElement(
817
+ 'div',
818
+ 'svgMap-map-continent-controls-wrapper',
819
+ this.mapWrapper
820
+ );
821
+ this["continentSelect"] = this.createElement(
822
+ 'select',
823
+ 'svgMap-continent-select',
824
+ mapContinentControlsWrapper
825
+ );
826
+ var that = this;
827
+ Object.keys(svgMap.prototype.continents).forEach(
828
+ function (item) {
829
+ let element = that.createElement(
830
+ 'option',
831
+ 'svgMap-continent-option svgMap-continent-iso-' + svgMap.prototype.continents[item].iso,
832
+ that["continentSelect"],
833
+ svgMap.prototype.continents[item].name
834
+ );
835
+ element.value = item
836
+ }
837
+ );
838
+
839
+ this.continentSelect.addEventListener(
840
+ 'change',
841
+ function (e) {
842
+ const continent = e.target.value;
843
+ if (continent) this.zoomContinent(e.target.value);
844
+ }.bind(that),
845
+ { passive: true }
846
+ );
847
+ mapContinentControlsWrapper.setAttribute('aria-label', 'Select continent');
848
+ }
739
849
  // Fix countries
740
850
  var mapPaths = Object.assign({}, this.mapPaths);
741
851
 
@@ -847,13 +957,13 @@ function svgMapWrapper(svgPanZoom) {
847
957
  }
848
958
 
849
959
  let dragged = false;
850
- countryElement.addEventListener('mousedown', function(){dragged = false});
851
- countryElement.addEventListener('touchstart', function(){dragged = false});
852
- countryElement.addEventListener('mousemove', function(){dragged = true});
853
- countryElement.addEventListener('touchmove', function(){dragged = true});
960
+ countryElement.addEventListener('mousedown', function () { dragged = false });
961
+ countryElement.addEventListener('touchstart', function () { dragged = false });
962
+ countryElement.addEventListener('mousemove', function () { dragged = true });
963
+ countryElement.addEventListener('touchmove', function () { dragged = true });
854
964
  const clickHandler = function (e) {
855
965
  if (dragged) {
856
- return;
966
+ return;
857
967
  }
858
968
 
859
969
  const link = countryElement.getAttribute('data-link');
@@ -982,7 +1092,7 @@ function svgMapWrapper(svgPanZoom) {
982
1092
  var flagContainer = this.createElement(
983
1093
  'div',
984
1094
  'svgMap-tooltip-flag-container svgMap-tooltip-flag-container-' +
985
- this.options.flagType,
1095
+ this.options.flagType,
986
1096
  tooltipContentWrapper
987
1097
  );
988
1098
 
@@ -1025,14 +1135,16 @@ function svgMapWrapper(svgPanZoom) {
1025
1135
  function (key) {
1026
1136
  var item = this.options.data.data[key];
1027
1137
  var value = this.options.data.values[countryID][key];
1028
- item.floatingNumbers && (value = value.toFixed(1));
1029
- item.thousandSeparator &&
1030
- (value = this.numberWithCommas(value, item.thousandSeparator));
1031
- value = item.format
1032
- ? item.format.replace('{0}', '<span>' + value + '</span>')
1033
- : '<span>' + value + '</span>';
1034
- tooltipContentTable +=
1035
- '<tr><td>' + (item.name || '') + '</td><td>' + value + '</td></tr>';
1138
+ if ((value !== undefined && this.options.hideMissingData === true) || this.options.hideMissingData === false) {
1139
+ item.floatingNumbers && (value = value.toFixed(1));
1140
+ item.thousandSeparator &&
1141
+ (value = this.numberWithCommas(value, item.thousandSeparator));
1142
+ value = item.format
1143
+ ? item.format.replace('{0}', '<span>' + value + '</span>')
1144
+ : '<span>' + value + '</span>';
1145
+ tooltipContentTable +=
1146
+ '<tr><td>' + (item.name || '') + '</td><td>' + value + '</td></tr>';
1147
+ }
1036
1148
  }.bind(this)
1037
1149
  );
1038
1150
  tooltipContentTable += '</table>';
@@ -1048,6 +1160,10 @@ function svgMapWrapper(svgPanZoom) {
1048
1160
  this.zoomControlIn.setAttribute('aria-disabled', 'false');
1049
1161
  this.zoomControlOut.classList.remove('svgMap-disabled');
1050
1162
  this.zoomControlOut.setAttribute('aria-disabled', 'false');
1163
+ if (this.options.showZoomReset) {
1164
+ this.zoomControlReset.classList.remove('svgMap-disabled');
1165
+ this.zoomControlReset.setAttribute('aria-disabled', 'false');
1166
+ }
1051
1167
 
1052
1168
  if (this.mapPanZoom.getZoom().toFixed(3) <= this.options.minZoom) {
1053
1169
  this.zoomControlOut.classList.add('svgMap-disabled');
@@ -1057,6 +1173,10 @@ function svgMapWrapper(svgPanZoom) {
1057
1173
  this.zoomControlIn.classList.add('svgMap-disabled');
1058
1174
  this.zoomControlIn.setAttribute('aria-disabled', 'true');
1059
1175
  }
1176
+ if (this.options.showZoomReset && this.mapPanZoom.getZoom().toFixed(3) == this.options.initialZoom) {
1177
+ this.zoomControlReset.classList.add('svgMap-disabled');
1178
+ this.zoomControlReset.setAttribute('aria-disabled', 'true');
1179
+ }
1060
1180
  };
1061
1181
 
1062
1182
  // Zoom map
@@ -1069,7 +1189,33 @@ function svgMapWrapper(svgPanZoom) {
1069
1189
  ) {
1070
1190
  return false;
1071
1191
  }
1072
- this.mapPanZoom[direction == 'in' ? 'zoomIn' : 'zoomOut']();
1192
+ if (direction === 'reset') {
1193
+ this.mapPanZoom.reset();
1194
+ if (this.options.initialPan.x != 0 || this.options.initialPan.y != 0) {
1195
+ // Init zoom and pan
1196
+ this.mapPanZoom.zoomAtPointBy(this.options.initialZoom, {
1197
+ x: this.options.initialPan.x,
1198
+ y: this.options.initialPan.y
1199
+ });
1200
+ } else {
1201
+ // Init zoom
1202
+ this.mapPanZoom.zoom(this.options.initialZoom);
1203
+ }
1204
+ } else {
1205
+ this.mapPanZoom[direction == 'in' ? 'zoomIn' : 'zoomOut']();
1206
+ }
1207
+ };
1208
+
1209
+ // Zoom to Contient
1210
+
1211
+ svgMap.prototype.zoomContinent = function (contientIso) {
1212
+
1213
+ const continent = this.continents[contientIso];
1214
+ if (continent.iso == "EA") this.mapPanZoom.reset()
1215
+ else if (continent.pan) {
1216
+ this.mapPanZoom.reset()
1217
+ this.mapPanZoom.zoomAtPoint(continent.zoom, continent.pan);
1218
+ }
1073
1219
  };
1074
1220
 
1075
1221
  // Add elements to show the zoom with keys notice
@@ -1370,7 +1516,7 @@ function svgMapWrapper(svgPanZoom) {
1370
1516
  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'
1371
1517
  },
1372
1518
  'GQ': {
1373
- d: 'M1040.1,557.8l-9.2-0.2l-1.9,7.2l1,0.9l1.9-0.3h8.2V557.8L1040.1,557.8z'
1519
+ 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'
1374
1520
  },
1375
1521
  'ER': {
1376
1522
  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'
@@ -1984,15 +2130,15 @@ function svgMapWrapper(svgPanZoom) {
1984
2130
  ratio = parseFloat(ratio).toFixed(1);
1985
2131
  var r = Math.ceil(
1986
2132
  parseInt(color1.substring(0, 2), 16) * ratio +
1987
- parseInt(color2.substring(0, 2), 16) * (1 - ratio)
2133
+ parseInt(color2.substring(0, 2), 16) * (1 - ratio)
1988
2134
  );
1989
2135
  var g = Math.ceil(
1990
2136
  parseInt(color1.substring(2, 4), 16) * ratio +
1991
- parseInt(color2.substring(2, 4), 16) * (1 - ratio)
2137
+ parseInt(color2.substring(2, 4), 16) * (1 - ratio)
1992
2138
  );
1993
2139
  var b = Math.ceil(
1994
2140
  parseInt(color1.substring(4, 6), 16) * ratio +
1995
- parseInt(color2.substring(4, 6), 16) * (1 - ratio)
2141
+ parseInt(color2.substring(4, 6), 16) * (1 - ratio)
1996
2142
  );
1997
2143
  return '#' + this.getHex(r) + this.getHex(g) + this.getHex(b);
1998
2144
  };
@@ -1,2 +1,2 @@
1
1
  /*! svgMap | https://github.com/StephanWagner/svgMap | MIT License | Copyright Stephan Wagner | https://stephanwagner.me */
2
- .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)}
2
+ .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)}