davidoesch · February 18, 2024 11:14
diff --git a/leaflet_EPSG2056.html b/leaflet_EPSG2056.html
 <!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://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
    <script src="https://unpkg.com/georaster"></script>
    <script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
    <script src="https://unpkg.com/leaflet-proj4leaflet"></script> <!-- Import Proj4Leaflet extension -->

    <script>
      // Define custom CRS for EPSG 2056
      var crs2056 = new L.Proj.CRS('EPSG:2056',
  "+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs",
  {
    resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625],
    origin: [2485071.58, 1299941.79],
  }
 );

      // Initialize Leaflet map with custom CRS
      var map = L.map('map', {
        crs: crs2056
      }).setView([46, 8], 1);
 	  
 	var map4 = new L.tileLayer.wms("https://wms0.geo.admin.ch/", {
    layers: 'ch.vbs.milairspacechart',
    format: 'image/png',
    transparent: true,
    crs: crs2056
 	}).addTo(map);

      // 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);
        // Parse the GeoTIFF data
        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 [Year]' 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);

                // 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]);

                // Return RGB color
                return `rgba(${gammaR * 255},${gammaG * 255},${gammaB * 255})`;
              }
            }
          });

          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/[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://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
	<script src="https://unpkg.com/georaster"></script>
	<script src="https://unpkg.com/georaster-layer-for-leaflet"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
	<script src="https://unpkg.com/leaflet-proj4leaflet"></script> <!-- Import Proj4Leaflet extension -->

	<script>
	// Define custom CRS for EPSG 2056
	var crs2056 = new L.Proj.CRS('EPSG:2056',
	"+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs",
	{
	resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625],
	origin: [2485071.58, 1299941.79],
	}
	);

	// Initialize Leaflet map with custom CRS
	var map = L.map('map', {
	crs: crs2056
	}).setView([46, 8], 1);

	var map4 = new L.tileLayer.wms("https://wms0.geo.admin.ch/", {
	layers: 'ch.vbs.milairspacechart',
	format: 'image/png',
	transparent: true,
	crs: crs2056
	}).addTo(map);

	// 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);
	// Parse the GeoTIFF data
	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 [Year]' 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);

	// 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]);

	// Return RGB color
	return `rgba(${gammaR * 255},${gammaG * 255},${gammaB * 255})`;
	}
	}
	});

	layer.addTo(map);
	map.fitBounds(layer.getBounds());
	});
	}
	</script>
	</body>
	</html>