-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3d-streets.html
129 lines (123 loc) · 4.03 KB
/
3d-streets.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
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script src="https://mapbox.github.io/mapbox-gl-language/index.js"></script>
<script src="https://unpkg.com/@rtirl/api@latest/lib/index.min.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div style="position: relative; width: 100%; height: 100%">
<div id="map" style="width: 300px; height: 250px"></div>
<div
id="marker"
style="
background-color: cyan;
height: 12px;
width: 12px;
position: absolute;
border-radius: 50%;
top: 119px;
left: 144px;
box-shadow: 0 0 10px cyan;
"
></div>
</div>
<script>
var params = new URLSearchParams(window.location.search);
if (params.get("fullscreen")) {
document.documentElement.setAttribute(
"style",
"margin: 0; padding: 0; width: 100%; height: 100%;"
);
document.body.setAttribute(
"style",
"margin: 0; padding: 0; width: 100%; height: 100%;"
);
document
.getElementById("map")
.setAttribute("style", "height: 100%; width: 100%;");
document.getElementById("marker").style.top = "calc(50% - 6px)";
document.getElementById("marker").style.left = "calc(50% - 6px)";
}
mapboxgl.accessToken =
"pk.eyJ1IjoiampqampqampqampqampqampqaiIsImEiOiJjbDU4b3UzejQwMmQwM2VxcWpxcGwzY2pxIn0.DiKbniZAe4dj4LegD3iBqA";
var zoom = params.get("zoom");
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
interactive: false,
attributionControl: false,
zoom: 17.5,
pitch: 45,
bearing: -10.6,
antialias: true,
});
map.on("load", () => {
// Insert the layer beneath any symbol layer.
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === "symbol" && layer.layout["text-field"]
).id;
// The 'building' layer in the Mapbox Streets
// vector tileset contains building height data
// from OpenStreetMap.
map.addLayer(
{
id: "add-3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
paint: {
"fill-extrusion-color": "#aaa",
// Use an 'interpolate' expression to
// add a smooth transition effect to
// the buildings as the user zooms in.
"fill-extrusion-height": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "height"],
],
"fill-extrusion-base": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "min_height"],
],
"fill-extrusion-opacity": 0.6,
},
},
labelLayerId
);
});
map.addControl(
new MapboxLanguage({ defaultLanguage: params.get("lang") || "en" })
);
const pullKey = new URLSearchParams(window.location.search).get("key");
RealtimeIRL.forPullKey(pullKey).addLocationListener(function (location) {
console.log(location);
map.panTo([location.longitude, location.latitude], {
duration: 1500,
easing: (x) => x,
});
});
RealtimeIRL.forPullKey(pullKey).addHeadingListener(function (heading) {
console.log(heading);
map.setBearing(heading);
});
</script>
</body>
</html>