Daten befuellen

2025-05-29 19:10:09 +02:00 · 2025-05-29 19:10:09 +02:00 · efffad1a94
commit efffad1a94
parent f4a56848aa
4 changed files with 198 additions and 0 deletions
--- a/data/index.html.org
+++ b/data/index.html.org
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GeoTIFF Viewer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <style>
+    html, body, #map { height: 100%; margin: 0; padding: 0; }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/georaster"></script>
+  <script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
+  <script>
+    const map = L.map("map").setView([50.0, 8.25], 10);
+
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "© OpenStreetMap contributors"
+    }).addTo(map);
+
+    fetch("class_Mainz_maxlike_gold.tif")
+      .then(response => response.arrayBuffer())
+      .then(tiffData => {
+        parseGeoraster(tiffData).then(georaster => {
+          const layer = new GeoRasterLayer({
+            georaster: georaster,
+            pixelValuesToColorFn: values => {
+              const val = values[0];
+              return `rgba(${val}, ${val}, ${val}, 0.7)`;
+            },
+            resolution: 64
+          });
+          layer.addTo(map);
+          map.fitBounds(layer.getBounds());
+        });
+      });
+  </script>
+</body>
+</html>
+