svgmap 2.6.0 → 2.7.2
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/LICENSE +1 -1
- package/README.md +43 -74
- package/assets/map-optimized.svg +70 -19
- package/demo/es6/data/gdp.js +1729 -193
- package/demo/es6/data/personHeight.js +190 -190
- package/demo/es6/data/population.js +245 -245
- package/demo/es6/index.js +16 -2
- package/demo/es6/package-lock.json +29 -13
- package/demo/es6/package.json +1 -1
- package/demo/html/data/gdp.js +1729 -193
- package/demo/html/data/personHeight.js +190 -190
- package/demo/html/data/population.js +245 -245
- package/demo/html/index.html +180 -168
- package/dist/svgMap.css +53 -5
- package/dist/svgMap.js +243 -38
- package/dist/svgMap.min.css +1 -1
- package/dist/svgMap.min.js +1 -1
- package/package.json +3 -3
- package/src/js/svgMap.js +243 -38
- package/src/scss/map.scss +58 -6
package/demo/html/index.html
CHANGED
|
@@ -1,177 +1,189 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</head>
|
|
15
|
-
|
|
16
|
-
<body>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>svgMap HTML demos</title>
|
|
5
|
+
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
|
10
|
+
|
|
11
|
+
<link href="./demo.css" rel="stylesheet" />
|
|
12
|
+
<link href="../../dist/svgMap.css" rel="stylesheet" />
|
|
13
|
+
<script src="../../dist/svgMap.js"></script>
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<div class="demo-wrapper">
|
|
18
|
+
<!-- Demo GPD -->
|
|
19
|
+
|
|
20
|
+
<div class="demo-container">
|
|
21
|
+
<h2>GDP per capita (PPP)</h2>
|
|
22
|
+
|
|
23
|
+
<div id="svgMapGPD"></div>
|
|
24
|
+
<script src="./data/gdp.js"></script>
|
|
25
|
+
<script>
|
|
26
|
+
new svgMap({
|
|
27
|
+
targetElementID: 'svgMapGPD',
|
|
28
|
+
data: svgMapDataGPD,
|
|
29
|
+
mouseWheelZoomEnabled: true,
|
|
30
|
+
mouseWheelZoomWithKey: true
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<!-- Demo population -->
|
|
36
|
+
|
|
37
|
+
<div class="demo-container">
|
|
38
|
+
<h2>Population desity (emojis as flags)</h2>
|
|
39
|
+
|
|
40
|
+
<div id="svgMapPopulation"></div>
|
|
41
|
+
<script src="./data/population.js"></script>
|
|
42
|
+
<script>
|
|
43
|
+
new svgMap({
|
|
44
|
+
targetElementID: 'svgMapPopulation',
|
|
45
|
+
data: svgMapDataPopulation,
|
|
46
|
+
flagType: 'emoji',
|
|
47
|
+
mouseWheelZoomEnabled: true,
|
|
48
|
+
mouseWheelZoomWithKey: true
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<!-- Demo person height in German -->
|
|
54
|
+
|
|
55
|
+
<div class="demo-container">
|
|
56
|
+
<h2>Average person height (no flags, German language)</h2>
|
|
57
|
+
|
|
58
|
+
<div id="svgMapPersonHeight"></div>
|
|
59
|
+
<script src="./data/personHeight.js"></script>
|
|
60
|
+
<script src="./local/countriesDE.js"></script>
|
|
61
|
+
<script>
|
|
62
|
+
new svgMap({
|
|
63
|
+
targetElementID: 'svgMapPersonHeight',
|
|
64
|
+
countryNames: svgMapCountryNamesDE,
|
|
65
|
+
data: svgMapDataPersonHeight,
|
|
66
|
+
colorMin: '#FFF0F9',
|
|
67
|
+
colorMax: '#730B62',
|
|
68
|
+
hideFlag: true,
|
|
69
|
+
noDataText: 'Keine Daten vorhanden',
|
|
70
|
+
mouseWheelZoomEnabled: true,
|
|
71
|
+
mouseWheelZoomWithKey: true,
|
|
72
|
+
mouseWheelKeyMessage: 'Bitte [ALT] drücken um zu zoomen',
|
|
73
|
+
mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen'
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- Demo EURO as currency -->
|
|
79
|
+
|
|
80
|
+
<div class="demo-container">
|
|
81
|
+
<h2>Countries using Euro as currency (custom tooltips)</h2>
|
|
82
|
+
|
|
83
|
+
<div id="svgMapEuroCurrency"></div>
|
|
84
|
+
<script>
|
|
85
|
+
var svgMapEuroCurrency = new svgMap({
|
|
86
|
+
targetElementID: 'svgMapEuroCurrency',
|
|
82
87
|
data: {
|
|
83
|
-
|
|
88
|
+
data: {
|
|
89
|
+
euro: {}
|
|
90
|
+
},
|
|
91
|
+
applyData: 'euro',
|
|
92
|
+
values: {
|
|
93
|
+
AT: { euro: 1, eurozone: 1 }, // Austria
|
|
94
|
+
BE: { euro: 1, eurozone: 1 }, // Belgium
|
|
95
|
+
CY: { euro: 1, eurozone: 1 }, // Cyprus
|
|
96
|
+
EE: { euro: 1, eurozone: 1 }, // Estonia
|
|
97
|
+
FI: { euro: 1, eurozone: 1 }, // Finland
|
|
98
|
+
FR: { euro: 1, eurozone: 1 }, // France
|
|
99
|
+
DE: { euro: 1, eurozone: 1 }, // Germany
|
|
100
|
+
GR: { euro: 1, eurozone: 1 }, // Greece
|
|
101
|
+
IE: { euro: 1, eurozone: 1 }, // Ireland
|
|
102
|
+
IT: { euro: 1, eurozone: 1 }, // Italy
|
|
103
|
+
LV: { euro: 1, eurozone: 1 }, // Latvia
|
|
104
|
+
LT: { euro: 1, eurozone: 1 }, // Lithuania
|
|
105
|
+
LU: { euro: 1, eurozone: 1 }, // Luxembourg
|
|
106
|
+
MT: { euro: 1, eurozone: 1 }, // Malta
|
|
107
|
+
NL: { euro: 1, eurozone: 1 }, // Netherlands
|
|
108
|
+
PT: { euro: 1, eurozone: 1 }, // Portugal
|
|
109
|
+
ES: { euro: 1, eurozone: 1 }, // Spain
|
|
110
|
+
SI: { euro: 1, eurozone: 1 }, // Slovenia
|
|
111
|
+
SK: { euro: 1, eurozone: 1 }, // Slovakia
|
|
112
|
+
|
|
113
|
+
// Countries using euro but not in eurozone
|
|
114
|
+
XK: { euro: 1, eurozone: 0, color: '#528FCC' }, // Kosovo
|
|
115
|
+
ME: { euro: 1, eurozone: 0, color: '#528FCC' }, // Montenegro
|
|
116
|
+
AD: { euro: 1, eurozone: 0, color: '#528FCC' }, // Andorra
|
|
117
|
+
MC: { euro: 1, eurozone: 0, color: '#528FCC' }, // Monaco
|
|
118
|
+
SM: { euro: 1, eurozone: 0, color: '#528FCC' }, // San Marino
|
|
119
|
+
VA: { euro: 1, eurozone: 0, color: '#528FCC' }, // Vatican City
|
|
120
|
+
|
|
121
|
+
// Countries in eurozone but not using euro
|
|
122
|
+
BG: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Bulgaria
|
|
123
|
+
CZ: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Czech Republic
|
|
124
|
+
DK: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Denmark
|
|
125
|
+
HR: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Croatia
|
|
126
|
+
HU: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Hungary
|
|
127
|
+
PL: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Poland
|
|
128
|
+
RO: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Romania
|
|
129
|
+
SE: { euro: 0, eurozone: 1, color: '#a6d2ff' } // Sweden
|
|
130
|
+
}
|
|
84
131
|
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
MC: { euro: 1, eurozone: 0, color: '#528FCC' }, // Monaco
|
|
112
|
-
SM: { euro: 1, eurozone: 0, color: '#528FCC' }, // San Marino
|
|
113
|
-
VA: { euro: 1, eurozone: 0, color: '#528FCC' }, // Vatican City
|
|
114
|
-
|
|
115
|
-
// Countries in eurozone but not using euro
|
|
116
|
-
BG: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Bulgaria
|
|
117
|
-
CZ: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Czech Republic
|
|
118
|
-
DK: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Denmark
|
|
119
|
-
HR: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Croatia
|
|
120
|
-
HU: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Hungary
|
|
121
|
-
PL: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Poland
|
|
122
|
-
RO: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Romania
|
|
123
|
-
SE: { euro: 0, eurozone: 1, color: '#a6d2ff' } // Sweden
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
colorMin: '#E2E2E2',
|
|
127
|
-
colorMax: '#297ACC',
|
|
128
|
-
colorNoData: '#E2E2E2',
|
|
129
|
-
thresholdMax: 1,
|
|
130
|
-
thresholdMin: 0,
|
|
131
|
-
initialZoom: 3,
|
|
132
|
-
initialPan: {
|
|
133
|
-
x: 420,
|
|
134
|
-
y: 50
|
|
135
|
-
},
|
|
136
|
-
onGetTooltip: function (tooltipDiv, countryID, countryValues) {
|
|
137
|
-
// Geting the list of countries
|
|
138
|
-
var countries = svgMapEuroCurrency.countries;
|
|
139
|
-
|
|
140
|
-
// Create tooltip content element
|
|
141
|
-
var tooltipContentElement = document.createElement('div');
|
|
142
|
-
tooltipContentElement.style.padding = '16px 24px';
|
|
143
|
-
|
|
144
|
-
// Fill content
|
|
145
|
-
var innerHTML =
|
|
146
|
-
'<div style="min-width: 180px; font-weight: bold; margin: 0 0 15px; text-align: center">' +
|
|
147
|
-
countries[countryID] +
|
|
148
|
-
'</div>';
|
|
149
|
-
|
|
150
|
-
if (countryValues && countryValues.eurozone == 1) {
|
|
151
|
-
innerHTML +=
|
|
152
|
-
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Part of eurozone</div>';
|
|
153
|
-
} else {
|
|
154
|
-
innerHTML +=
|
|
155
|
-
'<div style="margin-bottom: 8px; color: #aaa"><span style="color: #f03; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✘</span>Not a part of eurozone</div>';
|
|
156
|
-
}
|
|
132
|
+
colorMin: '#E2E2E2',
|
|
133
|
+
colorMax: '#297ACC',
|
|
134
|
+
colorNoData: '#E2E2E2',
|
|
135
|
+
thresholdMax: 1,
|
|
136
|
+
thresholdMin: 0,
|
|
137
|
+
initialZoom: 3,
|
|
138
|
+
initialPan: {
|
|
139
|
+
x: 420,
|
|
140
|
+
y: 50
|
|
141
|
+
},
|
|
142
|
+
mouseWheelZoomEnabled: true,
|
|
143
|
+
mouseWheelZoomWithKey: true,
|
|
144
|
+
onGetTooltip: function (tooltipDiv, countryID, countryValues) {
|
|
145
|
+
// Geting the list of countries
|
|
146
|
+
var countries = svgMapEuroCurrency.countries;
|
|
147
|
+
|
|
148
|
+
// Create tooltip content element
|
|
149
|
+
var tooltipContentElement = document.createElement('div');
|
|
150
|
+
tooltipContentElement.style.padding = '16px 24px';
|
|
151
|
+
|
|
152
|
+
// Fill content
|
|
153
|
+
var innerHTML =
|
|
154
|
+
'<div style="margin: 0 0 10px; text-align: center"><img src="https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg" alt="" style="height: 40px; width: auto; border: 2px solid #eee"></div>'.replace(
|
|
155
|
+
'{0}',
|
|
156
|
+
countryID.toLowerCase()
|
|
157
|
+
);
|
|
157
158
|
|
|
158
|
-
if (countryValues && countryValues.euro == 1) {
|
|
159
|
-
innerHTML +=
|
|
160
|
-
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Uses Euro</div>';
|
|
161
|
-
} else {
|
|
162
159
|
innerHTML +=
|
|
163
|
-
'<div style="
|
|
160
|
+
'<div style="min-width: 180px; font-weight: bold; margin: 0 0 15px; text-align: center">' +
|
|
161
|
+
countries[countryID] +
|
|
162
|
+
'</div>';
|
|
163
|
+
|
|
164
|
+
if (countryValues && countryValues.eurozone == 1) {
|
|
165
|
+
innerHTML +=
|
|
166
|
+
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Part of eurozone</div>';
|
|
167
|
+
} else {
|
|
168
|
+
innerHTML +=
|
|
169
|
+
'<div style="margin-bottom: 8px; color: #aaa"><span style="color: #f03; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✘</span>Not a part of eurozone</div>';
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
if (countryValues && countryValues.euro == 1) {
|
|
173
|
+
innerHTML +=
|
|
174
|
+
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Uses Euro</div>';
|
|
175
|
+
} else {
|
|
176
|
+
innerHTML +=
|
|
177
|
+
'<div style="margin-bottom: 8px; color: #aaa"><span style="color: #f03; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✘</span>Does not use Euro</div>';
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// Return element with custom content
|
|
181
|
+
tooltipContentElement.innerHTML = innerHTML;
|
|
182
|
+
return tooltipContentElement;
|
|
164
183
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
return tooltipContentElement;
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
</script>
|
|
184
|
+
});
|
|
185
|
+
</script>
|
|
186
|
+
</div>
|
|
172
187
|
</div>
|
|
173
|
-
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
</body>
|
|
188
|
+
</body>
|
|
177
189
|
</html>
|
package/dist/svgMap.css
CHANGED
|
@@ -1,4 +1,43 @@
|
|
|
1
1
|
/*! svgMap | https://github.com/StephanWagner/svgMap | MIT License | Copyright Stephan Wagner | https://stephanwagner.me */
|
|
2
|
+
.svgMap-wrapper,
|
|
3
|
+
.svgMap-container {
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.svgMap-block-zoom-notice {
|
|
8
|
+
position: absolute;
|
|
9
|
+
z-index: 2;
|
|
10
|
+
top: 100%;
|
|
11
|
+
left: 0;
|
|
12
|
+
right: 0;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
background: rgba(0, 0, 0, 0.8);
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
opacity: 0;
|
|
17
|
+
color: #fff;
|
|
18
|
+
transition: opacity 250ms;
|
|
19
|
+
}
|
|
20
|
+
.svgMap-block-zoom-notice-active .svgMap-block-zoom-notice {
|
|
21
|
+
pointer-events: all;
|
|
22
|
+
top: 0;
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
.svgMap-block-zoom-notice > div {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 50%;
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
text-align: center;
|
|
31
|
+
padding: 0 32px;
|
|
32
|
+
transform: translateY(-50%);
|
|
33
|
+
font-size: 28px;
|
|
34
|
+
}
|
|
35
|
+
@media (max-width: 900px) {
|
|
36
|
+
.svgMap-block-zoom-notice > div {
|
|
37
|
+
font-size: 22px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
2
41
|
.svgMap-map-wrapper {
|
|
3
42
|
position: relative;
|
|
4
43
|
width: 100%;
|
|
@@ -69,13 +108,18 @@
|
|
|
69
108
|
left: 50%;
|
|
70
109
|
transform: translate(-50%, -50%);
|
|
71
110
|
background: #666;
|
|
72
|
-
transition: background-color
|
|
111
|
+
transition: background-color 250ms;
|
|
73
112
|
}
|
|
74
113
|
.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:before {
|
|
75
114
|
width: 11px;
|
|
76
115
|
height: 3px;
|
|
77
116
|
}
|
|
78
|
-
|
|
117
|
+
@media (hover: hover) {
|
|
118
|
+
.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover:after {
|
|
119
|
+
background: #111;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active:after {
|
|
79
123
|
background: #111;
|
|
80
124
|
}
|
|
81
125
|
.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:before, .svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled:after {
|
|
@@ -96,15 +140,19 @@
|
|
|
96
140
|
stroke-width: 1;
|
|
97
141
|
stroke-linejoin: round;
|
|
98
142
|
vector-effect: non-scaling-stroke;
|
|
99
|
-
transition: fill
|
|
143
|
+
transition: fill 250ms, stroke 250ms;
|
|
100
144
|
}
|
|
101
145
|
.svgMap-map-wrapper .svgMap-country[data-link] {
|
|
102
146
|
cursor: pointer;
|
|
103
147
|
}
|
|
104
|
-
|
|
105
|
-
|
|
148
|
+
@media (hover: hover) {
|
|
149
|
+
.svgMap-map-wrapper .svgMap-country:hover {
|
|
150
|
+
stroke: #333;
|
|
151
|
+
stroke-width: 1.5;
|
|
152
|
+
}
|
|
106
153
|
}
|
|
107
154
|
.svgMap-map-wrapper .svgMap-country.svgMap-active {
|
|
155
|
+
stroke: #333;
|
|
108
156
|
stroke-width: 1.5;
|
|
109
157
|
}
|
|
110
158
|
|