1.3 KiB
<!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>