-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
54 lines (47 loc) · 1.36 KB
/
index.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
<html>
<head>
<script src="./node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="./node_modules/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script type="module">
import StyleFlipperControl from "./node_modules/maplibre-gl-style-flipper/index.js";
const mapStyles = {
"historical": {
code: "historical",
image: "./img/historical.png",
url: "./historical/historical.json"
},
"japanese_scroll": {
code: "japanese_scroll",
image: "./img/japanese_scroll.png",
url: "./japanese_scroll/japanese_scroll.json"
},
"railway": {
code: "railway",
image: "./img/railway.png",
url: "./railway/railway.json"
},
"woodblock": {
code: "woodblock",
image: "./img/woodblock.png",
url: "./woodblock/woodblock.json"
},
};
var map = new maplibregl.Map({
container: 'map',
style: mapStyles["historical"].url,
center: [-74.033, 40.6259],
zoom: 11.73,
hash: true
})
// Create an instance of StyleFlipperControl
const styleFlipperControl = new StyleFlipperControl(mapStyles);
// Set the initial style code
styleFlipperControl.setCurrentStyleCode("historical");
// Add the control to the map
map.addControl(styleFlipperControl, "bottom-right");
</script>
</body>
</html>