Skip to content

Commit e5f27fa

Browse files
jonathanluriejonathanlurie
committed
Adding sky examples
1 parent e304805 commit e5f27fa

File tree

2 files changed

+290
-0
lines changed

2 files changed

+290
-0
lines changed

‎demos/sky_day.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<html>
2+
<head>
3+
<title>MapTiler JS SDK example</title>
4+
<style>
5+
html, body {
6+
margin: 0;
7+
}
8+
9+
#map-container {
10+
position: absolute;
11+
width: 100vw;
12+
height: 100vh;
13+
background: #ccc;
14+
/* background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%); */
15+
}
16+
17+
#style-picker-container {
18+
position: absolute;
19+
z-index: 2;
20+
margin: 10px;
21+
}
22+
23+
</style>
24+
25+
<link rel="stylesheet" href="../build/maptiler-sdk.css">
26+
</head>
27+
28+
<body>
29+
<div id="map-container"></div>
30+
<div id="style-picker-container">
31+
<div>
32+
<label for="sky-color">sky-color</label>
33+
<input id="sky-color" type="color" value="#027bdb"></input>
34+
</div>
35+
36+
<div>
37+
<label for="horizon-color">horizon-color</label>
38+
<input id="horizon-color" type="color" value="#ffffff"></input>
39+
</div>
40+
41+
<div>
42+
<label for="fog-color">fog-color</label>
43+
<input id="fog-color" type="color" value="#ffffff"></input>
44+
</div>
45+
46+
<div>
47+
<label for="fog-ground-blend">fog-ground-blend</label>
48+
<input id="fog-ground-blend" type="range" min="0" max="1" step="0.01" value="0.1"></input>
49+
</div>
50+
51+
<div>
52+
<label for="horizon-fog-blend">horizon-fog-blend</label>
53+
<input id="horizon-fog-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
54+
</div>
55+
56+
<div>
57+
<label for="sky-horizon-blend">sky-horizon-blend</label>
58+
<input id="sky-horizon-blend" type="range" min="0" max="1" step="0.01" value="0.75"></input>
59+
</div>
60+
61+
<div>
62+
<label for="atmosphere-blend">atmosphere-blend</label>
63+
<input id="atmosphere-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
64+
</div>
65+
</div>
66+
67+
<script src ="../build/maptiler-sdk.umd.js"></script>
68+
69+
<script>
70+
maptilersdk.config.apiKey = "YOUR_API_KEY";
71+
72+
const map = new maptilersdk.Map({
73+
container: document.getElementById("map-container"),
74+
style: maptilersdk.MapStyle.OUTDOOR,
75+
hash: true,
76+
terrainControl: true,
77+
geolocate: true,
78+
maxPitch: 85,
79+
terrain: true,
80+
pitch: 80,
81+
bearing: 32.8,
82+
center: [7.8097, 46.0739],
83+
zoom: 11.45,
84+
})
85+
86+
87+
document.getElementById("sky-color").addEventListener("input", (e) => {
88+
map.setSky({
89+
"sky-color": e.target.value,
90+
});
91+
});
92+
93+
document.getElementById("horizon-color").addEventListener("input", (e) => {
94+
map.setSky({
95+
"horizon-color": e.target.value,
96+
});
97+
});
98+
99+
document.getElementById("fog-color").addEventListener("input", (e) => {
100+
map.setSky({
101+
"fog-color": e.target.value,
102+
});
103+
});
104+
105+
document.getElementById("fog-ground-blend").addEventListener("input", (e) => {
106+
map.setSky({
107+
"fog-ground-blend": parseFloat(e.target.value),
108+
});
109+
});
110+
111+
document.getElementById("horizon-fog-blend").addEventListener("input", (e) => {
112+
map.setSky({
113+
"horizon-fog-blend": parseFloat(e.target.value),
114+
});
115+
});
116+
117+
document.getElementById("sky-horizon-blend").addEventListener("input", (e) => {
118+
map.setSky({
119+
"sky-horizon-blend": parseFloat(e.target.value),
120+
});
121+
});
122+
123+
document.getElementById("atmosphere-blend").addEventListener("input", (e) => {
124+
map.setSky({
125+
"atmosphere-blend": parseFloat(e.target.value),
126+
});
127+
});
128+
129+
130+
map.on("ready", () => {
131+
map.setSky({
132+
"sky-color": "#027bdb",
133+
"horizon-color": "#ffffff",
134+
"fog-color": "#ffffff",
135+
"fog-ground-blend": 0.1,
136+
"horizon-fog-blend": 0.5,
137+
"sky-horizon-blend": 0.75,
138+
"atmosphere-blend": 0.5,
139+
})
140+
})
141+
142+
</script>
143+
</body>
144+
</html>

‎demos/sky_night.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<html>
2+
<head>
3+
<title>MapTiler JS SDK example</title>
4+
<style>
5+
html, body {
6+
margin: 0;
7+
}
8+
9+
#map-container {
10+
position: absolute;
11+
width: 100vw;
12+
height: 100vh;
13+
background: #ccc;
14+
/* background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%); */
15+
}
16+
17+
#ctrl-panel {
18+
position: absolute;
19+
z-index: 2;
20+
margin: 10px;
21+
color: white;
22+
}
23+
24+
</style>
25+
26+
<link rel="stylesheet" href="../build/maptiler-sdk.css">
27+
</head>
28+
29+
<body>
30+
<div id="map-container"></div>
31+
<div id="ctrl-panel">
32+
<div>
33+
<label for="sky-color">sky-color</label>
34+
<input id="sky-color" type="color" value="#0C2E4B"></input>
35+
</div>
36+
37+
<div>
38+
<label for="horizon-color">horizon-color</label>
39+
<input id="horizon-color" type="color" value="#09112F"></input>
40+
</div>
41+
42+
<div>
43+
<label for="fog-color">fog-color</label>
44+
<input id="fog-color" type="color" value="#09112F"></input>
45+
</div>
46+
47+
<div>
48+
<label for="fog-ground-blend">fog-ground-blend</label>
49+
<input id="fog-ground-blend" type="range" min="0" max="1" step="0.01" value="0.0"></input>
50+
</div>
51+
52+
<div>
53+
<label for="horizon-fog-blend">horizon-fog-blend</label>
54+
<input id="horizon-fog-blend" type="range" min="0" max="1" step="0.01" value="0.1"></input>
55+
</div>
56+
57+
<div>
58+
<label for="sky-horizon-blend">sky-horizon-blend</label>
59+
<input id="sky-horizon-blend" type="range" min="0" max="1" step="0.01" value="1.0"></input>
60+
</div>
61+
62+
<div>
63+
<label for="atmosphere-blend">atmosphere-blend</label>
64+
<input id="atmosphere-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
65+
</div>
66+
</div>
67+
68+
<script src ="../build/maptiler-sdk.umd.js"></script>
69+
70+
<script>
71+
maptilersdk.config.apiKey = "YOUR_API_KEY";
72+
73+
const map = new maptilersdk.Map({
74+
container: document.getElementById("map-container"),
75+
style: maptilersdk.MapStyle.OUTDOOR.DARK,
76+
hash: true,
77+
terrainControl: true,
78+
geolocate: true,
79+
maxPitch: 85,
80+
terrain: true,
81+
pitch: 80,
82+
bearing: 32.8,
83+
center: [7.8097, 46.0739],
84+
zoom: 11.45,
85+
});
86+
87+
88+
document.getElementById("sky-color").addEventListener("input", (e) => {
89+
map.setSky({
90+
"sky-color": e.target.value,
91+
});
92+
});
93+
94+
document.getElementById("horizon-color").addEventListener("input", (e) => {
95+
map.setSky({
96+
"horizon-color": e.target.value,
97+
});
98+
});
99+
100+
document.getElementById("fog-color").addEventListener("input", (e) => {
101+
map.setSky({
102+
"fog-color": e.target.value,
103+
});
104+
});
105+
106+
document.getElementById("fog-ground-blend").addEventListener("input", (e) => {
107+
map.setSky({
108+
"fog-ground-blend": parseFloat(e.target.value),
109+
});
110+
});
111+
112+
document.getElementById("horizon-fog-blend").addEventListener("input", (e) => {
113+
map.setSky({
114+
"horizon-fog-blend": parseFloat(e.target.value),
115+
});
116+
});
117+
118+
document.getElementById("sky-horizon-blend").addEventListener("input", (e) => {
119+
map.setSky({
120+
"sky-horizon-blend": parseFloat(e.target.value),
121+
});
122+
});
123+
124+
document.getElementById("atmosphere-blend").addEventListener("input", (e) => {
125+
map.setSky({
126+
"atmosphere-blend": parseFloat(e.target.value),
127+
});
128+
});
129+
130+
131+
map.on("ready", () => {
132+
map.setSky({
133+
"sky-color": "#0C2E4B",
134+
"horizon-color": "#09112F",
135+
"fog-color": "#09112F",
136+
"fog-ground-blend": 0.0,
137+
"horizon-fog-blend": 0.1,
138+
"sky-horizon-blend": 1.0,
139+
"atmosphere-blend": 0.5,
140+
})
141+
})
142+
143+
144+
</script>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)