svg-map-extra
Version:
svg-map-extra is an extended JavaScript library that lets you easily create an interactable world map comparing customizable data for each country inspired by the original svgMap.
88 lines (71 loc) • 2.12 kB
HTML
<html lang="en">
<head>
<title>SVGMap demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link href="demo.css" rel="stylesheet">
<link href="../dist/svg-map.css" rel="stylesheet">
<script src="../dist/svg-map.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
});
</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'
});
</script>
</div>
<!-- Demo ugandans -->
<div class="demo-container">
<h2>Ugandan Nationalities In the World (fit to data)</h2>
<div id="svgUgPopulation"></div>
<script src="../data/ug-world-population.js"></script>
<script>
new SVGMap({
targetElement: document.getElementById('svgUgPopulation'),
data: svgMapDataUgPopulation,
fitToData: 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: '#FFF0F9',
colorMax: '#730B62',
hideFlag: true,
noDataText: 'Keine Daten vorhanden'
});
</script>
</div>
</div>
</body>
</html>