davidoesch/leaflet 16uint sentinel.js

## 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/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/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>
	<!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: '© <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>