Skip to content

Commit 722795e

Browse files
jseppijseppi
committed
stepped dem
1 parent 0d1714c commit 722795e

File tree

1 file changed

+145
-0
lines changed

1 file changed

+145
-0
lines changed

‎tanaka/index.html

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mapbox GL JS 3D Custom DEM</title>
5+
<meta charset="utf-8" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, user-scalable=no"
9+
/>
10+
<link
11+
href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css"
12+
rel="stylesheet"
13+
/>
14+
<link
15+
rel="stylesheet"
16+
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
17+
type="text/css"
18+
/>
19+
<style>
20+
body {
21+
margin: 0;
22+
padding: 0;
23+
}
24+
html,
25+
body,
26+
#map {
27+
height: 100%;
28+
}
29+
.dg.a {
30+
float: left !important;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<div id="map"></div>
37+
38+
<script
39+
type="text/javascript"
40+
src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"
41+
></script>
42+
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
43+
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
44+
45+
<script>
46+
mapboxgl.accessToken =
47+
"pk.eyJ1IjoianNlcHBpbWJ4IiwiYSI6ImNraW9wdWNxdTAyOWQzNG1zMXloOXRhNWoifQ.8rYHD7PVVfW8qme2J-FVVg";
48+
49+
const TILESET = "jseppimbx.9y6ifgdq"; // base-val -10000
50+
51+
const map = (window.map = new mapboxgl.Map({
52+
container: "map",
53+
zoom: 15,
54+
center: [-101.62605, 34.92921],
55+
pitch: 0,
56+
bearing: 0,
57+
hash: true,
58+
transformRequest: (r, t) => {
59+
if (t === "Tile" && r.includes(TILESET)) {
60+
return { url: r.replace("webp", "pngraw") };
61+
}
62+
},
63+
style: {
64+
version: 8,
65+
sources: {
66+
rasterdem: {
67+
type: "raster-dem",
68+
url: `mapbox://${TILESET}`,
69+
},
70+
raster: {
71+
type: "raster",
72+
url: `mapbox://${TILESET}`,
73+
tileSize: 512,
74+
},
75+
},
76+
layers: [
77+
{
78+
id: "background",
79+
type: "background",
80+
paint: { "background-color": "white" },
81+
},
82+
{
83+
id: "hillshade",
84+
source: "rasterdem",
85+
type: "hillshade",
86+
paint: {
87+
"hillshade-exaggeration": 0.5,
88+
"hillshade-shadow-color": "#444444",
89+
"hillshade-illumination-direction": 315,
90+
"hillshade-accent-color": "black",
91+
},
92+
},
93+
// {
94+
// id: "raster",
95+
// source: "raster",
96+
// type: "raster",
97+
// },
98+
],
99+
},
100+
}));
101+
102+
map.addControl(
103+
new MapboxGeocoder({
104+
accessToken: mapboxgl.accessToken,
105+
mapboxgl: mapboxgl,
106+
collapsed: true,
107+
})
108+
);
109+
110+
map.addControl(new mapboxgl.NavigationControl());
111+
112+
map.on("style.load", () => {
113+
map.addLayer({
114+
id: "sky",
115+
type: "sky",
116+
paint: {
117+
"sky-type": "atmosphere",
118+
"sky-opacity": [
119+
"interpolate",
120+
["exponential", 0.1],
121+
["zoom"],
122+
5,
123+
0,
124+
22,
125+
1,
126+
],
127+
},
128+
});
129+
130+
const DEM_SOURCE_ID = "tanaka-dem";
131+
132+
map.addSource(DEM_SOURCE_ID, {
133+
type: "raster-dem",
134+
url: `mapbox://${TILESET}`,
135+
// url: `mapbox://mapbox.terrain-rgb`,
136+
tileSize: 512,
137+
});
138+
139+
// add the DEM source as a terrain layer with exaggerated height
140+
map.setTerrain({ source: DEM_SOURCE_ID, exaggeration: 2 });
141+
// map.setTerrain({ source: DEM_SOURCE_ID, exaggeration: 0.1 });
142+
});
143+
</script>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)