2020-12-18 23:36:19 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2021-02-04 21:35:31 +03:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { default as init } from './osm_viewer.js';
|
|
|
|
|
|
2021-02-07 06:04:43 +03:00
|
|
|
function isWebGL1Supported() {
|
2021-02-04 21:35:31 +03:00
|
|
|
try {
|
2021-02-07 06:04:43 +03:00
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
return !!canvas.getContext('webgl');
|
|
|
|
|
} catch(e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function isWebGL2Supported() {
|
|
|
|
|
try {
|
|
|
|
|
var canvas = document.createElement('canvas');
|
2021-02-04 21:35:31 +03:00
|
|
|
return !!canvas.getContext('webgl2');
|
|
|
|
|
} catch(e) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function prettyPrintBytes(bytes) {
|
|
|
|
|
if (bytes < 1024 ** 2) {
|
|
|
|
|
return Math.round(bytes / 1024) + " KB";
|
|
|
|
|
}
|
|
|
|
|
return Math.round(bytes / 1024 ** 2) + " MB";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function main() {
|
2021-02-07 06:04:43 +03:00
|
|
|
let webGL1Supported = isWebGL1Supported();
|
|
|
|
|
let webGL2Supported = isWebGL2Supported();
|
|
|
|
|
console.log("supports WebGL 1.0: " + webGL1Supported + ", WebGL 2.0: " + webGL2Supported);
|
|
|
|
|
if (webGL1Supported || webGL2Supported) {
|
2021-02-04 21:35:31 +03:00
|
|
|
fetchWithProgress();
|
|
|
|
|
} else {
|
|
|
|
|
showUnsupported();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setElementVisibility(elementId, isVisible) {
|
|
|
|
|
let el = document.getElementById(elementId);
|
|
|
|
|
if (!el) {
|
|
|
|
|
console.error("element missing: ", elementId);
|
|
|
|
|
}
|
|
|
|
|
if (isVisible) {
|
|
|
|
|
el.style.display = "block";
|
|
|
|
|
} else {
|
|
|
|
|
el.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showUnsupported() {
|
|
|
|
|
setElementVisibility('progress', false);
|
|
|
|
|
setElementVisibility('unsupported', true);
|
|
|
|
|
document.getElementById('unsupported-proceed-btn').onclick = function() {
|
|
|
|
|
fetchWithProgress();
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function fetchWithProgress() {
|
|
|
|
|
setElementVisibility('progress', true);
|
|
|
|
|
setElementVisibility('unsupported', false);
|
|
|
|
|
const t0 = performance.now();
|
|
|
|
|
console.log("Started loading WASM");
|
|
|
|
|
let response = await fetch('./osm_viewer_bg.wasm');
|
|
|
|
|
const contentLength = response.headers.get('Content-Length');
|
|
|
|
|
const reader = response.body.getReader();
|
|
|
|
|
let receivedLength = 0;
|
|
|
|
|
let chunks = [];
|
|
|
|
|
while (true) {
|
|
|
|
|
const {done, value} = await reader.read();
|
|
|
|
|
if (done) {
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
chunks.push(value);
|
|
|
|
|
receivedLength += value.length;
|
|
|
|
|
document.getElementById("progress-text").innerText = prettyPrintBytes(receivedLength) + " / " + prettyPrintBytes(contentLength);
|
|
|
|
|
document.getElementById("progress-bar").style.width = (100.0 * receivedLength / contentLength) + "%";
|
|
|
|
|
}
|
|
|
|
|
document.getElementById("progress-text").innerText = "Loaded " + prettyPrintBytes(contentLength) + ", now initializing WASM module";
|
|
|
|
|
let blob = new Blob(chunks);
|
|
|
|
|
let buffer = await blob.arrayBuffer();
|
|
|
|
|
const t1 = performance.now();
|
|
|
|
|
console.log(`It took ${t1 - t0} ms to download WASM, now initializing it`);
|
|
|
|
|
await init(buffer);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main();
|
|
|
|
|
</script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
background-color: white;
|
|
|
|
|
}
|
|
|
|
|
#loading {
|
|
|
|
|
background-color: #94C84A;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
color: black;
|
|
|
|
|
font-family: arial;
|
|
|
|
|
border: solid black 3px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
max-width: 500px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
#progress-bar {
|
|
|
|
|
/* complementary to #loading:background-color */
|
|
|
|
|
background-color: #FF5733;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
#loading h1 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
#unsupported-proceed-btn {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2020-12-18 23:36:19 +03:00
|
|
|
</head>
|
2021-02-04 21:35:31 +03:00
|
|
|
<body>
|
2021-02-23 22:45:39 +03:00
|
|
|
<div id="widgetry-canvas"><div id="loading">
|
2021-02-04 21:35:31 +03:00
|
|
|
<h1>OpenStreetMap Viewer</h1>
|
|
|
|
|
<div id="progress" style="display: none">
|
|
|
|
|
<h2>Loading...</h2>
|
|
|
|
|
<div style="width: 100%; background-color: white;">
|
|
|
|
|
<div style="width: 1%; height: 30px;" id="progress-bar"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="progress-text"></div>
|
|
|
|
|
<p>If you think something has broken, check your browser's developer console (Ctrl+Shift+I or similar)</p>
|
2021-02-07 06:04:43 +03:00
|
|
|
<p>(Your browser must support WebGL and WebAssembly)</p>
|
2021-02-04 21:35:31 +03:00
|
|
|
</div>
|
|
|
|
|
<div id="unsupported" style="display: none;">
|
2021-02-07 06:04:43 +03:00
|
|
|
<h2>😭 Looks like your browser doesn't support WebGL.</h2>
|
2021-02-04 21:35:31 +03:00
|
|
|
|
|
|
|
|
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
|
2021-02-07 06:04:43 +03:00
|
|
|
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
|
2021-02-04 21:35:31 +03:00
|
|
|
</div>
|
2021-02-23 22:45:39 +03:00
|
|
|
</div></div>
|
2020-12-18 23:36:19 +03:00
|
|
|
</body>
|
|
|
|
|
<html>
|
