diff --git a/static/js/mangrove-map.js b/static/js/mangrove-map.js
new file mode 100644
index 0000000..efdc0db
--- /dev/null
+++ b/static/js/mangrove-map.js
@@ -0,0 +1,20 @@
+maplibregl.addProtocol("cog", MaplibreCOGProtocol.cogProtocol);
+
+map.on("load", () => {
+  map.addSource("imageSource", {
+    type: "raster",
+    url: `cog://http://localhost:5000/cog?year=${year}&pid=${pid}`,
+    tileSize: 256,
+    minzoom: 0,
+  });
+
+  map.addLayer({
+    id: "imageLayer",
+    source: "imageSource",
+    type: "raster",
+  });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  fetchDataForTable();
+});