-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
164 lines (140 loc) · 12.4 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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- <link rel='stylesheet' href='../dist/mapbox-gl.css' /> -->
<style>
#map { width: 960px; height: 540px; }
</style>
</head>
<body>
<div id='map'></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js'></script>
<script src='https://unpkg.com/@mapbox/[email protected]/src/polyline.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' />
<script type="module">
import loadEncoder from 'https://unpkg.com/[email protected]/build/mp4-encoder.js';
import {simd} from 'https://unpkg.com/wasm-feature-detect?module';
const feature = {"type":"Feature","properties":{"geocode":[{"id":"address.1540756498256738","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"street"},"text":"Blue Ridge Parkway","place_name":"Blue Ridge Parkway, Big Island, Virginia 24526, United States","center":[-79.41207511211091,37.5682663742032],"geometry":{"type":"Point","coordinates":[-79.41207511211091,37.5682663742032]},"context":[{"id":"postcode.13390418576177700","text":"24526"},{"id":"place.9918056639311300","wikidata":"Q4905877","text":"Big Island"},{"id":"district.14383824086525580","wikidata":"Q494216","text":"Bedford County"},{"id":"region.7919684583758790","wikidata":"Q1370","short_code":"US-VA","text":"Virginia"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"postcode.13390418576177700","type":"Feature","place_type":["postcode"],"relevance":1,"properties":{},"text":"24526","place_name":"Big Island, Virginia 24526, United States","bbox":[-79.4938419985785,37.452562248612,-79.3181440048118,37.6420390069964],"center":[-79.37,37.56],"geometry":{"type":"Point","coordinates":[-79.37,37.56]},"context":[{"id":"place.9918056639311300","wikidata":"Q4905877","text":"Big Island"},{"id":"district.14383824086525580","wikidata":"Q494216","text":"Bedford County"},{"id":"region.7919684583758790","wikidata":"Q1370","short_code":"US-VA","text":"Virginia"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"place.9918056639311300","type":"Feature","place_type":["place"],"relevance":1,"properties":{"wikidata":"Q4905877"},"text":"Big Island","place_name":"Big Island, Virginia, United States","bbox":[-79.4940454712123,37.4525622310727,-79.3185670087057,37.6573759945913],"center":[-79.3598,37.5337],"geometry":{"type":"Point","coordinates":[-79.3598,37.5337]},"context":[{"id":"district.14383824086525580","wikidata":"Q494216","text":"Bedford County"},{"id":"region.7919684583758790","wikidata":"Q1370","short_code":"US-VA","text":"Virginia"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"district.14383824086525580","type":"Feature","place_type":["district"],"relevance":1,"properties":{"wikidata":"Q494216"},"text":"Bedford County","place_name":"Bedford County, Virginia, United States","bbox":[-79.858405,37.005839,-79.185433,37.618248],"center":[-79.53,37.31],"geometry":{"type":"Point","coordinates":[-79.53,37.31]},"context":[{"id":"region.7919684583758790","wikidata":"Q1370","short_code":"US-VA","text":"Virginia"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"region.7919684583758790","type":"Feature","place_type":["region"],"relevance":1,"properties":{"wikidata":"Q1370","short_code":"US-VA"},"text":"Virginia","place_name":"Virginia, United States","bbox":[-83.6753959969438,36.540855,-75.165704098375,39.4660129984577],"center":[-78.6190526172645,37.677592044],"geometry":{"type":"Point","coordinates":[-78.6190526172645,37.677592044]},"context":[{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]},{"id":"country.19678805456372290","type":"Feature","place_type":["country"],"relevance":1,"properties":{"wikidata":"Q30","short_code":"us"},"text":"United States","place_name":"United States","bbox":[-179.9,18.8163608007951,-66.8847646185949,71.4202919997506],"center":[-97.9222112121185,39.3812661305678],"geometry":{"type":"Point","coordinates":[-97.9222112121185,39.3812661305678]}}],"elevations":[380.7,381.1,380.3,379.7,378.9,379,379.1,380.5,381.8,383.5,384.3,385,385.4,385.3,392.2,396.4,397,397.4,397.6,396.9,396.8,396.6,397.6,399.8,402,406.1,407.3,407.5,407.6,411,413.1,418.9,420.1,420.3,419.8,420,420.7,420.2,420.2,420.3,421.1,422.6,422.2,422.9,423.7,424.5,427,429.6,430.2,430.7,431.8,432.8,433.1,439.5,441.1,442.9,443.1,444.9,445.8,445.6,445.8,446.7,447,448.1,451.1,453.2,453.4,453.5,453.8,454.2,455.1,456.4,462.2,468.6,472.1,471.6,477.3,484.3,484.2,484.1,483.1,481.9,481.4,479.8,478.5],"min_elevation":378.9,"max_elevation":484.3,"elevation_difference":97.80000000000001,"has_tweeted":false},"geometry":{"type":"LineString","coordinates":[[-79.4120751,37.5682664],[-79.412172,37.5683],[-79.412279,37.568318],[-79.412371,37.568317],[-79.41246,37.568302],[-79.412514,37.568284],[-79.412532,37.568278],[-79.412616,37.568236],[-79.412675,37.568194],[-79.412738,37.568133],[-79.412778,37.568079],[-79.412809,37.568021],[-79.412835,37.567929],[-79.412838,37.567866],[-79.412801,37.567508],[-79.412769,37.56731],[-79.412693,37.56695],[-79.412683,37.566805],[-79.412698,37.566535],[-79.412692,37.566336],[-79.412668,37.566004],[-79.41265,37.565893],[-79.412612,37.565756],[-79.412558,37.565623],[-79.412503,37.56552],[-79.41242,37.565397],[-79.412343,37.565303],[-79.412062,37.565019],[-79.411882,37.564815],[-79.411659,37.564533],[-79.411525,37.564339],[-79.411407,37.564139],[-79.411325,37.563974],[-79.411263,37.563829],[-79.411238,37.563722],[-79.411229,37.563613],[-79.41124,37.563474],[-79.411264,37.563344],[-79.411317,37.563192],[-79.411366,37.563095],[-79.411443,37.562975],[-79.411541,37.562852],[-79.411655,37.562738],[-79.411824,37.562602],[-79.411934,37.56253],[-79.41208,37.562459],[-79.412269,37.562395],[-79.4124,37.562355],[-79.412534,37.562323],[-79.412706,37.562296],[-79.41288,37.562283],[-79.413237,37.562282],[-79.413895,37.562302],[-79.414265,37.562298],[-79.414355,37.562289],[-79.414474,37.56227],[-79.414659,37.562223],[-79.415244,37.562055],[-79.415411,37.562],[-79.41559,37.561947],[-79.415737,37.561915],[-79.415849,37.561897],[-79.416038,37.561877],[-79.416245,37.561872],[-79.416451,37.561881],[-79.41658,37.561897],[-79.416809,37.561946],[-79.417034,37.562009],[-79.417208,37.56207],[-79.41741,37.562155],[-79.417616,37.562256],[-79.417865,37.562392],[-79.418158,37.562575],[-79.418479,37.562786],[-79.419213,37.563295],[-79.419398,37.563429],[-79.419663,37.563601],[-79.420112,37.563877],[-79.42018,37.563909],[-79.420271,37.563938],[-79.420367,37.563954],[-79.420485,37.563954],[-79.420581,37.563939],[-79.420673,37.56391],[-79.4207169,37.5638878]]}};
const data = feature.geometry;
// const data = {"type":"LineString","coordinates":[[-79.3325275,37.631786],[-79.332665,37.631668],[-79.332787,37.63158],[-79.332951,37.631479],[-79.333125,37.63139],[-79.333905,37.631044],[-79.3339799,37.63101],[-79.334326,37.630853],[-79.334382,37.630822],[-79.334515,37.630735],[-79.334635,37.630637],[-79.334751,37.630519],[-79.334824,37.630422],[-79.33488,37.630319],[-79.334913,37.630233],[-79.334939,37.630122],[-79.334946,37.629983],[-79.334933,37.629864],[-79.334903,37.629747],[-79.334844,37.629611],[-79.334752,37.629475],[-79.334597,37.62928],[-79.334421,37.629097],[-79.334189,37.628891],[-79.334011,37.628709],[-79.33388,37.628557],[-79.333723,37.628353],[-79.333648,37.628231],[-79.333591,37.628103],[-79.333533,37.627908],[-79.333505,37.627758],[-79.333495,37.627606],[-79.3335,37.627484],[-79.333523,37.627333],[-79.333591,37.627105],[-79.333684,37.626861],[-79.333794,37.626622],[-79.333895,37.626434],[-79.334207,37.625797],[-79.334482,37.625185],[-79.33463,37.624877],[-79.334711,37.62466],[-79.334724,37.624625],[-79.334758,37.624489],[-79.334776,37.624351],[-79.334775,37.624213],[-79.334762,37.624103],[-79.33472,37.62392],[-79.334654,37.623668],[-79.334569,37.623419],[-79.334467,37.623175],[-79.334261,37.622766],[-79.334139,37.622543],[-79.334007,37.622324],[-79.333794,37.621999],[-79.333664,37.621821],[-79.33355,37.621684],[-79.333394,37.62152],[-79.333251,37.62139],[-79.333048,37.621232],[-79.332832,37.621085],[-79.332478,37.620873],[-79.332274,37.620734],[-79.332026,37.62054],[-79.33189,37.620424],[-79.331675,37.620224],[-79.33144,37.619981],[-79.3312021,37.6197158]]};
mapboxgl.accessToken = 'pk.eyJ1IjoiamNzYW5mb3JkIiwiYSI6ImNrZG1kdnU5NzE3bG4yenBkbzU5bDQ2NXMifQ.IMquilPKSANQDaSzf3fjcg';
const map = window.map = new mapboxgl.Map({
container: 'map',
center: data.coordinates[0],
zoom: 14.5,
pitch: 73,
bearing: 320,
// style: 'mapbox://styles/mapbox/satellite-v9'
// style: 'mapbox://styles/jcsanford/cks3bzm7c1ylb17nz0zp4fted'
style: 'mapbox://styles/jcsanford/ckskfetbk072c18lq5eqjwc6z'
});
map.on('load', async () => {
map.addSource('dem', {type: 'raster-dem', url: 'mapbox://mapbox.mapbox-terrain-dem-v1'});
map.setTerrain({source: 'dem', exaggeration: 1.5});
map.setFog({
'range': [0.5, 10],
'color': 'white',
'horizon-blend': 0.1
});
map.addSource('route', {
type: 'geojson',
data: { type: 'LineString', coordinates: []}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#ff7800',
'line-width': 5,
'line-opacity': 0.8
}
});
const coordinates = data.coordinates;
// start by showing just the first coordinate
data.coordinates = [coordinates[0]];
async function animate() {
return new Promise((resolve, reject) => {
let i = 0;
const timer = setInterval(async () => {
if (i < coordinates.length) {
data.coordinates.push(coordinates[i]);
map.getSource('route').setData(data);
map.panTo(coordinates[i]);
// Do we need this?
await map.once('moveend');
i++;
} else {
window.clearInterval(timer);
resolve('ok');
}
}, 250);
});
// await map.once('moveend');
}
// const startAnimatingRoute = () => {
// let i = 0;
// const timer = setInterval(() => {
// if (i < coordinates.length) {
// data.coordinates.push(coordinates[i]);
// map.getSource('route').setData(data);
// map.panTo(coordinates[i]);
// i++;
// } else {
// window.clearInterval(timer);
// }
// }, 100);
// };
// setTimeout(startAnimatingRoute, 2000);
await map.once('idle');
// uncomment to fine-tune animation without recording:
// animate(); return;
// don't forget to enable WebAssembly SIMD in chrome://flags for faster encoding
const supportsSIMD = await simd();
// initialize H264 video encoder
const Encoder = await loadEncoder({simd: supportsSIMD});
const gl = map.painter.context.gl;
const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;
const encoder = Encoder.create({
width,
height,
fps: 60,
kbps: 64000,
rgbFlipY: true
});
// stub performance.now for deterministic rendering per-frame (only available in dev build)
let now = performance.now();
mapboxgl.setNow(now);
const ptr = encoder.getRGBPointer(); // keep a pointer to encoder WebAssembly heap memory
function frame() {
// increment stub time by 16.6ms (60 fps)
now += 1000 / 60;
mapboxgl.setNow(now);
const pixels = encoder.memory().subarray(ptr); // get a view into encoder memory
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // read pixels into encoder
encoder.encodeRGBPointer(); // encode the frame
}
map.on('render', frame); // set up frame-by-frame recording
await animate(); // run all the animations
// stop recording
map.off('render', frame);
mapboxgl.restoreNow();
// download the encoded video file
const mp4 = encoder.end();
const anchor = document.createElement("a");
anchor.href = URL.createObjectURL(new Blob([mp4], {type: "video/mp4"}));
anchor.download = "mapbox-gl";
anchor.click();
// make sure to run `ffmpeg -i mapbox-gl.mp4 mapbox-gl-optimized.mp4` to compress the video
});
</script>
</body>
</html>