Skip to content

Instantly share code, notes, and snippets.

@davidoesch

davidoesch/leaflet_EPSG3857.html

Created February 18, 2024 11:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidoesch/180b708760f656578f2343a37a17bf65 to your computer and use it in GitHub Desktop.
Save davidoesch/180b708760f656578f2343a37a17bf65 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet_EPSG3857
Raw
leaflet_EPSG3857.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/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/leaflet@1.0.3/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/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