add map
This commit is contained in:
parent
8788de1717
commit
c31c1f5f06
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Global Protected Mangroves"
|
||||
date: 2024-09-04T16:00:57+01:00
|
||||
author:
|
||||
name: "Sam Chance"
|
||||
header_image: "/pics/charts/price.webp"
|
||||
summary: "Daily bitcoin price. Data is obtained from CoinGecko using their public API."
|
||||
tags: ["Bitcoin", "Stats"]
|
||||
---
|
||||
{{< map >}}
|
||||
|
|
@ -3,7 +3,7 @@ languageCode = 'en-gb'
|
|||
title = 'Based Data'
|
||||
|
||||
[params]
|
||||
apiURL = 'https://api.baseddata.io'
|
||||
apiURL = 'http://localhost:5000'
|
||||
|
||||
[markup.highlight]
|
||||
pygmentsUseClasses = false
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
<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>
|
|
@ -5,7 +5,9 @@
|
|||
<script>
|
||||
async function downloadFile(url, name) {
|
||||
try {
|
||||
const response = await fetch(`${"{{ .Site.Params.apiURL }}"}/download${url}`);
|
||||
downloadUrl = `${"{{ .Site.Params.apiURL }}"}/download${url}`
|
||||
console.log("Downloading from url:",downloadUrl)
|
||||
const response = await fetch(downloadUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
{{ partial "map.html" }}
|
|
@ -1,2 +1,2 @@
|
|||
{{ $id := .Get "src" | md5 }}
|
||||
{{ partial "table.html" (dict "src" (.Get "src") "id" $id) }}
|
||||
{{ $id := .Get "src" | md5 }} {{ partial "table.html" (dict "src" (.Get "src")
|
||||
"id" $id) }}
|
||||
|
|
Loading…
Reference in New Issue