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.
- package/README.md +4 -2
- package/assets/create-map-paths.html +1 -2
- package/assets/map-optimized.svg +1 -1
- package/demo/es6/package-lock.json +438 -421
- package/demo/es6/package.json +2 -2
- package/demo/html/index.html +4 -2
- package/dist/svgMap.css +19 -0
- package/dist/svgMap.js +182 -36
- package/dist/svgMap.min.css +1 -1
- package/dist/svgMap.min.js +1 -1
- package/package.json +4 -4
- package/src/js/svgMap.js +182 -36
- package/src/scss/map.scss +24 -1
package/demo/es6/package.json
CHANGED
package/demo/html/index.html
CHANGED
|
@@ -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
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
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
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
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
|
-
|
|
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: '
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
};
|
package/dist/svgMap.min.css
CHANGED
|
@@ -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)}
|