forked from ArthurBeaulieu/WorldMap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-module-scope.html
76 lines (61 loc) · 2.93 KB
/
example-module-scope.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MzkWorldMap 0.9.3 - Module scope</title>
<!-- Include minified css bundle -->
<link rel="stylesheet" href="./dist/mzkworldmap.min.css">
</head>
<!--
MzkWorldMap 2019-2020
@author Arthur Beaulieu - https://github.com/ArthurBeaulieu
Allow CORS on your brower to locally test the module (revoke CORS permission afterwards)
To use MzkWorldMap as an ES6 Module, you must ensure that assets, css and js
folder keep the same tree structure (or change yourself pathes in classes).
THREE js is already shipped in CustomThreeModule.js, and you don't need to add
any script import to your HTML file. However, the css file must be linked in
HTML head to properly set style rules.
-->
<body style="background:black;margin:0;overflow:hidden;">
<!-- The MzkWorldMap parent DOM element -->
<div class="worldmap"></div>
<script type="module">
/* ---------- Import ES6 module (replace path with yours) ---------- */
import MzkWorldMap from './js/MzkWorldMap.js';
/* ---------- Optional, callback and data preparation ---------- */
/** Country clicked callback (plugin exit point)
* @param {String} country.name - The country name
* @param {String} country.trigram - The country NATO country code (TRIGRAM)
* @param {Boolean} country.hasData - Does the clicked country has data?
* @param {Boolean} country.unselect - If user didn't clicked on a country
* @param {Array} country.artists - The clicked country artists (same format as in libraryData)
* These are the main country attributes, but it does contains several other information.
* - From MzkWorldMap data, the capital city and country center coordinates are embedded in info.
* - From geojson data, there are a lot more information you can exploit in here. */
const countryClicked = country => { console.log(country); };
// Sample data that need to be sent to MzkWorldMap to display country with artists
const userData = {
type: 'artists',
countries: [{
trigram: 'FRA',
artists: [{
name: 'Habstrakt',
id: '42'
}]
}]
};
/* ---------- MzkWorldMap usage as a module ---------- */
// Build MzkWorldMap with required data
const map = new MzkWorldMap({
assetsUrl: './assets/', // Must indicate the assets path to properly retrieve its own assets, must end with a slash
renderTo: document.querySelector('.worldmap'), // The parent div to render the canvas to
countryClicked: countryClicked, // Optional (default null), the callback that is trigger each time a country is clicked
data: userData, // Optional (default {}), must contain all artists per country (NAME/ID for each)
centerOn: 'FRA' // Optional (default FRA), the country NATO trigram to center at MzkWorldMap init and select country
});
// When done with module, destroy it to clean WebGL context
// map.destroy();
/* ---------- Et voila ! ---------- */
</script>
</body>
</html>