svgmap
Version:
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
192 lines (168 loc) • 7.79 kB
HTML
<html>
<head>
<title>svgMap HTML demos</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
<link href="./demo.css" rel="stylesheet" />
<link href="../../dist/svgMap.css" rel="stylesheet" />
<script src="../../dist/svgMap.js"></script>
</head>
<body>
<div class="demo-wrapper">
<!-- Demo GPD -->
<div class="demo-container">
<h2>GDP per capita (PPP)</h2>
<div id="svgMapGPD"></div>
<script src="./data/gdp.js"></script>
<script>
new svgMap({
targetElementID: 'svgMapGPD',
data: svgMapDataGPD,
mouseWheelZoomEnabled: true,
mouseWheelZoomWithKey: true
});
</script>
</div>
<!-- Demo population -->
<div class="demo-container">
<h2>Population desity (emojis as flags)</h2>
<div id="svgMapPopulation"></div>
<script src="./data/population.js"></script>
<script>
new svgMap({
targetElementID: 'svgMapPopulation',
data: svgMapDataPopulation,
flagType: 'emoji',
mouseWheelZoomEnabled: true,
mouseWheelZoomWithKey: true,
showContinentSelector: true
});
</script>
</div>
<!-- Demo person height in German -->
<div class="demo-container">
<h2>Average person height (no flags, German language)</h2>
<div id="svgMapPersonHeight"></div>
<script src="./data/personHeight.js"></script>
<script src="./local/countriesDE.js"></script>
<script>
new svgMap({
targetElementID: 'svgMapPersonHeight',
countryNames: svgMapCountryNamesDE,
data: svgMapDataPersonHeight,
colorMin: 'rgb(255, 240, 249)',
colorMax: 'rgb(115, 11, 98)',
hideFlag: true,
noDataText: 'Keine Daten vorhanden',
mouseWheelZoomEnabled: true,
mouseWheelZoomWithKey: true,
mouseWheelKeyMessage: 'Bitte [ALT] drücken um zu zoomen',
mouseWheelKeyMessageMac: 'Bitte [COMMAND] drücken um zu zoomen',
showZoomReset: true
});
</script>
</div>
<!-- Demo EURO as currency -->
<div class="demo-container">
<h2>Countries using Euro as currency (custom tooltips)</h2>
<div id="svgMapEuroCurrency"></div>
<script>
var svgMapEuroCurrency = new svgMap({
targetElementID: 'svgMapEuroCurrency',
data: {
data: {
euro: {}
},
applyData: 'euro',
values: {
AT: { euro: 1, eurozone: 1 }, // Austria
BE: { euro: 1, eurozone: 1 }, // Belgium
CY: { euro: 1, eurozone: 1 }, // Cyprus
EE: { euro: 1, eurozone: 1 }, // Estonia
FI: { euro: 1, eurozone: 1 }, // Finland
FR: { euro: 1, eurozone: 1 }, // France
DE: { euro: 1, eurozone: 1 }, // Germany
GR: { euro: 1, eurozone: 1 }, // Greece
IE: { euro: 1, eurozone: 1 }, // Ireland
IT: { euro: 1, eurozone: 1 }, // Italy
LV: { euro: 1, eurozone: 1 }, // Latvia
LT: { euro: 1, eurozone: 1 }, // Lithuania
LU: { euro: 1, eurozone: 1 }, // Luxembourg
MT: { euro: 1, eurozone: 1 }, // Malta
NL: { euro: 1, eurozone: 1 }, // Netherlands
PT: { euro: 1, eurozone: 1 }, // Portugal
ES: { euro: 1, eurozone: 1 }, // Spain
SI: { euro: 1, eurozone: 1 }, // Slovenia
SK: { euro: 1, eurozone: 1 }, // Slovakia
// Countries using euro but not in eurozone
XK: { euro: 1, eurozone: 0, color: '#528FCC' }, // Kosovo
ME: { euro: 1, eurozone: 0, color: '#528FCC' }, // Montenegro
AD: { euro: 1, eurozone: 0, color: '#528FCC' }, // Andorra
MC: { euro: 1, eurozone: 0, color: '#528FCC' }, // Monaco
SM: { euro: 1, eurozone: 0, color: '#528FCC' }, // San Marino
VA: { euro: 1, eurozone: 0, color: '#528FCC' }, // Vatican City
// Countries in eurozone but not using euro
BG: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Bulgaria
CZ: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Czech Republic
DK: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Denmark
HR: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Croatia
HU: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Hungary
PL: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Poland
RO: { euro: 0, eurozone: 1, color: '#a6d2ff' }, // Romania
SE: { euro: 0, eurozone: 1, color: '#a6d2ff' } // Sweden
}
},
colorMin: '#E2E2E2',
colorMax: '#297ACC',
colorNoData: '#E2E2E2',
thresholdMax: 1,
thresholdMin: 0,
initialZoom: 3,
initialPan: {
x: 420,
y: 50
},
mouseWheelZoomEnabled: true,
mouseWheelZoomWithKey: true,
onGetTooltip: function (tooltipDiv, countryID, countryValues) {
// Geting the list of countries
var countries = svgMapEuroCurrency.countries;
// Create tooltip content element
var tooltipContentElement = document.createElement('div');
tooltipContentElement.style.padding = '16px 24px';
// Fill content
var innerHTML =
'<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(
'{0}',
countryID.toLowerCase()
);
innerHTML +=
'<div style="min-width: 180px; font-weight: bold; margin: 0 0 15px; text-align: center">' +
countries[countryID] +
'</div>';
if (countryValues && countryValues.eurozone == 1) {
innerHTML +=
'<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>';
} else {
innerHTML +=
'<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>';
}
if (countryValues && countryValues.euro == 1) {
innerHTML +=
'<div style="margin-bottom: 8px"><span style="color: #6d0; display: inline-block; margin-right: 4px; width: 20px; text-align: center">✔</span>Uses Euro</div>';
} else {
innerHTML +=
'<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>';
}
// Return element with custom content
tooltipContentElement.innerHTML = innerHTML;
return tooltipContentElement;
}
});
</script>
</div>
</div>
</body>
</html>