@versatiles/google-cloud
Version:
A server for VersaTiles in Google Cloud Run
47 lines (39 loc) • 1.03 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>VersaTiles</title>
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet">
<style>
body {
margin: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
(async () => {
const origin = location.href.replace(/#.*$/, '').replace(/preview$/, '');
const style = await (await fetch(origin + 'style.json')).json();
const mapOptions = {
container: 'map',
style,
hash: true,
dragRotate: false,
touchZoomRotate: false,
}
const source = Object.values(style.sources)[0];
if (source.bounds) mapOptions.bounds = source.bounds;
const map = new maplibregl.Map(mapOptions);
map.addControl(new maplibregl.NavigationControl({ showCompass: false, visualizePitch: false }));
})()
</script>
</body>
</html>