Skip to content

Instantly share code, notes, and snippets.

@davidoesch

davidoesch/leaflet 16uint sentinel.js

Last active February 17, 2024 11:39
Show Gist options
  • Save davidoesch/eb88109b129bdf7a75526bca1067d19d to your computer and use it in GitHub Desktop.
Save davidoesch/eb88109b129bdf7a75526bca1067d19d to your computer and use it in GitHub Desktop.
Download ZIP
leaflet 16uint sentinel
Raw
leaflet 16uint sentinel.js
<!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: '&copy; <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/20240106T102329/S2_L2A_SR_20240106T102329_20240106T102326_10M_run20240107.tif");
window.location = parser.href;
}, 2 * 1000);
} else {
console.log("url_to_geotiff_file:", url_to_geotiff_file);
parseGeoraster(url_to_geotiff_file).then(georaster => {
console.log("georaster:", georaster);
// Create GeoRasterLayer
var layer = new GeoRasterLayer({
attribution: "Unknown",
georaster: georaster,
resolution: 128,
pixelValuesToColorFn: function(values) {
// Stretch values using cube root function for the first three bands
var stretchedValues = [
Math.cbrt(0.6 * values[0] - 0.035), // Stretch first band
Math.cbrt(0.6 * values[1] - 0.035), // Stretch second band
Math.cbrt(0.6 * values[2] - 0.035) // Stretch third band
];
// Scale stretched values to 8-bit RGB
var scaledValues = stretchedValues.map(value => Math.round(value * 255));
return scaledValues;
}
});
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