From c31c1f5f06fbec82e8e4d57fcad6110eb829f1fe Mon Sep 17 00:00:00 2001
From: Sam <samual.shop@proton.me>
Date: Wed, 4 Sep 2024 18:49:40 +0100
Subject: [PATCH] add map

---
 content/data-lab/protected-mangroves.md | 11 ++++++++
 hugo.toml                               |  2 +-
 layouts/partials/map.html               | 34 +++++++++++++++++++++++++
 layouts/shortcodes/download-data.html   |  4 ++-
 layouts/shortcodes/map.html             |  1 +
 layouts/shortcodes/table.html           |  4 +--
 6 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 content/data-lab/protected-mangroves.md
 create mode 100644 layouts/partials/map.html
 create mode 100644 layouts/shortcodes/map.html

diff --git a/content/data-lab/protected-mangroves.md b/content/data-lab/protected-mangroves.md
new file mode 100644
index 0000000..b64db1b
--- /dev/null
+++ b/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 >}}
+
diff --git a/hugo.toml b/hugo.toml
index 7b94e55..cc8d204 100644
--- a/hugo.toml
+++ b/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
diff --git a/layouts/partials/map.html b/layouts/partials/map.html
new file mode 100644
index 0000000..8f1d8f5
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/download-data.html b/layouts/shortcodes/download-data.html
index 894e09b..606b54b 100644
--- a/layouts/shortcodes/download-data.html
+++ b/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');
       }
diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
new file mode 100644
index 0000000..ee3d1ff
--- /dev/null
+++ b/layouts/shortcodes/map.html
@@ -0,0 +1 @@
+{{ partial "map.html" }}
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
index 3148eab..93ed4d3 100644
--- a/layouts/shortcodes/table.html
+++ b/layouts/shortcodes/table.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) }}