forked from ArthurBeaulieu/WorldMap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-global-scope.html
73 lines (60 loc) · 3.03 KB
/
example-global-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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MzkWorldMap 0.9.3 - Global 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)
Global scope implementation mean that MzkWorldMap is attached to the window object when
js bundle is included in a HTML file. This way it can be used as a plugin for ManaZeak.
THREE js is already shipped in CustomThreeModule.js. You need to link the dist minified
files (css and js) in your HTML to make MzkWorldMap globally available in your app.
-->
<body style="background:black;margin:0;overflow:hidden;">
<!-- The MzkWorldMap parent DOM element -->
<div class="worldmap"></div>
<!-- Include minified js bundle to attach MzkWorldMap to window -->
<script src="./dist/mzkworldmap.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* ---------- 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 using the global Js scope ---------- */
// Build MzkWorldMap with required data
const map = new window.MzkWorldMap({ // 'window.' optional but used here to be demonstrative...)
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>