add map

content/data-lab/protected-mangroves.md

@@ -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 >}}
+

hugo.toml

@@ -3,7 +3,7 @@ languageCode = 'en-gb'
 title = 'Based Data'
 
 [params]
-    apiURL = 'https://api.baseddata.io'
+    apiURL = 'http://localhost:5000'
 
 [markup.highlight]
     pygmentsUseClasses = false

layouts/partials/map.html

@@ -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>

layouts/shortcodes/download-data.html

@@ -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');
       }

layouts/shortcodes/map.html

@@ -0,0 +1 @@
+{{ partial "map.html" }}

layouts/shortcodes/table.html

@@ -1,2 +1,2 @@
-{{ $id := .Get "src" | md5 }} 
+{{ $id := .Get "src" | md5 }} {{ partial "table.html" (dict "src" (.Get "src")
-{{ partial "table.html" (dict "src" (.Get "src") "id" $id) }}
+"id" $id) }}