-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMapBox_shiga_snow-3D3colors.html
117 lines (110 loc) · 4.43 KB
/
MapBox_shiga_snow-3D3colors.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Yakebitai area 3D course Map (winter)</title>
<meta name="description" content="Sample map to display Nagasaki base map with vector tile overlay using MapLibre" />
<link href="style.css" rel="stylesheet" />
<!-- MapLibre -->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
#map { height: 100vh; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const key = 'pk.eyJ1IjoibWFzYXRhIiwiYSI6ImNsa2hueXN5bTAxOTIzZG1nMDFxMTk4NjIifQ.LrUwW0ONKom7uKZqEonwXQ';
const mapTilerStyleID = 'streets-v2';
const customSource = {
type: 'raster',
tiles: [`https://ajiro3.github.io/Ajiro3.github.io-Shiga3D/shiga_area_snow/{z}/{x}/{y}.png`],
tileSize: 256,
};
const vectorSource = {
type: 'vector',
tiles: ['https://ajiro3.github.io/Ajiro3.github.io-Shiga3D/shiga_ski_courses/{z}/{x}/{y}.pbf'],
minzoom: 4,
maxzoom: 16,
};
const demSource = {
type: 'raster-dem',
tiles: [`https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=${key}`],
tileSize: 256,
maxzoom: 14,
};
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
'air': customSource,
'ski_courses': vectorSource,
'terrain-rgb': demSource,
},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#87CEEB', // Sky blue color
'background-opacity': 0.2, // Adjust opacity
},
},
{
id: 'custom-layer',
type: 'raster',
source: 'air',
},
{
id: 'terrain',
type: 'hillshade',
source: 'terrain-rgb',
},
{
id: 'courses-easy', // Layer for easy courses
type: 'line',
source: 'ski_courses',
'source-layer': 'easy', // layer name for easy courses
paint: {
'line-color': 'lime', // Set the color for easy courses
'line-width': 2,
},
},
{
id: 'courses-intermediate', // Layer for intermediate courses
type: 'line',
source: 'ski_courses',
'source-layer': 'intermediate', // layer name for intermediate courses
paint: {
'line-color': 'deeppink', // Set the color for intermediate courses
'line-width': 2,
},
},
{
id: 'courses-advanced', // Layer for advanced courses
type: 'line',
source: 'ski_courses',
'source-layer': 'advanced', // layer name for advanced courses
paint: {
'line-color': 'black', // Set the color for advanced courses
'line-width': 2,
},
},
],
},
center: [138.5196,36.7450], // ** Yakebitaiyama Prince Hotel
zoom: 14, // Zoom level
pitch: 60, // Adjust pitch to achieve a bird's-eye view
bearing: 0, // Adjust bearing to set the rotation angle
light: {
anchor: 'viewport', color: 'white',
intensity: 1.2, // Adjust the light intensity
},
});
map.addControl(new maplibregl.NavigationControl());
</script>
</body>
</html>