baseddata.io/layouts/partials/map.html

35 lines
950 B
HTML

<script src="https://labs.geomatico.es/maplibre-cog-protocol/dist/index.js"></script>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
/>
<section class="map-container">
<div id="map" style="height: 400px"></div>
<script>
let map = new maplibregl.Map({
container: "map",
style: "https://tiles.semitamaps.com/styles/maptiler-basic/style.json",
center: [117.9588, 5.81513],
zoom: 11,
});
maplibregl.addProtocol("cog", MaplibreCOGProtocol.cogProtocol);
map.on("load", () => {
map.addSource("imageSource", {
type: "raster",
url: "cog://http://localhost:5000/download/10072.tif",
tileSize: 256,
minzoom: 0,
});
map.addLayer({
id: "imageLayer",
source: "imageSource",
type: "raster",
});
});
</script>
</section>