Created
February 18, 2024 11:13
-
-
Save davidoesch/180b708760f656578f2343a37a17bf65 to your computer and use it in GitHub Desktop.
leaflet_EPSG3857
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/> | |
| <style> | |
| #map { | |
| bottom: 0; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://unpkg.com/proj4"></script> | |
| <script src="https://unpkg.com/georaster"></script> | |
| <script src="https://unpkg.com/georaster-layer-for-leaflet"></script> | |
| <script> | |
| // Initialize Leaflet map | |
| var map = L.map('map').setView([0, 0], 5); | |
| // Add OpenStreetMap basemap | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| const url_to_geotiff_file = new URLSearchParams(location.search).get("url"); | |
| console.log("url_to_geotiff_file:", url_to_geotiff_file); | |
| if (!url_to_geotiff_file) { | |
| setTimeout(function() { | |
| // If no URL is provided, redirect to a sample GeoTIFF | |
| const parser = new URL(window.location); | |
| parser.searchParams.set("url", "https://d29cp2gnktw6by.cloudfront.net/data/S2_LEVEL_2A/20240101T102431/S2_L2A_SR_20240101T102431_20240101T102428_10M_run20240102.tif"); | |
| window.location = parser.href; | |
| }, 2 * 1000); | |
| } else { | |
| console.log("url_to_geotiff_file:", url_to_geotiff_file); | |
| //https://custom-scripts.sentinel-hub.com/custom-scripts/sentinel-2/l2a_optimized/ | |
| parseGeoraster(url_to_geotiff_file).then(function (georaster) { | |
| console.log("georaster:", georaster); | |
| const vizParamsWATER = { | |
| bands: ['B4', 'B3', 'B2'], | |
| min: 400, | |
| max: 3200, | |
| gamma: [1.7, 1.7, 1.4] | |
| }; | |
| const layer = new GeoRasterLayer({ | |
| attribution: "'Contains modified Copernicus Sentinel data 2024' for Sentinel data", | |
| debugLevel: 0, | |
| georaster, | |
| resolution: 512, | |
| resampleMethod: "nearest", | |
| pixelValuesToColorFn: values => { | |
| // Check if any of the bands have a value of 9999 or 0 | |
| if (values.some(value => value === 9999 || value === 0)) { | |
| // If any band has a value of 9999 or 0, return transparent color | |
| return 'rgba(0, 0, 0, 0)'; // Transparent color | |
| } else { | |
| // Apply min-max normalization to each band | |
| const r = (values[0] - vizParamsWATER.min) / (vizParamsWATER.max - vizParamsWATER.min); | |
| const g = (values[1] - vizParamsWATER.min) / (vizParamsWATER.max - vizParamsWATER.min); | |
| const b = (values[2] - vizParamsWATER.min) / (vizParamsWATER.max - vizParamsWATER.min); | |
| //console.log("r:", r, "g:", g, "b:", b); | |
| // Apply gamma correction to each band | |
| const gammaR = Math.pow(r, 1 / vizParamsWATER.gamma[0]); | |
| const gammaG = Math.pow(g, 1 / vizParamsWATER.gamma[1]); | |
| const gammaB = Math.pow(b, 1 / vizParamsWATER.gamma[2]); | |
| //console.log("gammaR:", gammaR, "gammaG:", gammaG, "gammaB:", gammaB); | |
| // Return RGB color | |
| //console.log(`"sRGBR:", ${gammaR * 255}, "sRGBG:", ${gammaG * 255}, "sRGBB:", ${gammaB * 255}`); | |
| return `rgb(${gammaR * 255},${gammaG * 255},${gammaB * 255})`; | |
| } | |
| } | |
| }); | |
| layer.addTo(map); | |
| map.fitBounds(layer.getBounds()); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment