Showing large .tif file on leaflet map 07.2023

Could someone give me a sample code on how to show large .tiff files as GeoTiff RGB images on the map in the open-source leaflet 1.9.1 map page? I'm struggling with writing code like this, but whenever I try to create something like this, either the map doesn't play correctly or the file can't be opened properly because the website in html is not able to open this type of file. I know that Webodm uses leaflet maps, and like them, I would like to have a map where I could see an image in the .tiff extension, taken, for example, from an orthophotomap already created in the webodm program with WGS84 coordinate data.

I have no ideas what I could use to make it work or at least correctly display this file on the page.

There are several Leaflet plugins which may be able to help you. Here’s an example from the GeoRasterLayer documentation:

var parse_georaster = require("georaster");

var GeoRasterLayer = require("georaster-layer-for-leaflet");
// or: import GeoRasterLayer from "georaster-layer-for-leaflet";

// initalize leaflet map
var map = L.map('map').setView([0, 0], 5);

// add OpenStreetMap basemap
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var url_to_geotiff_file = "example_4326.tif";

fetch(url_to_geotiff_file)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    parse_georaster(arrayBuffer).then(georaster => {
      console.log("georaster:", georaster);

      /*
          GeoRasterLayer is an extension of GridLayer,
          which means can use GridLayer options like opacity.

          Just make sure to include the georaster option!

          Optionally set the pixelValuesToColorFn function option to customize
          how values for a pixel are translated to a color.

          https://leafletjs.com/reference.html#gridlayer
      */
      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7,
          pixelValuesToColorFn: values => values[0] === 42 ? '#ffffff' : '#000000',
          resolution: 64 // optional parameter for adjusting display resolution
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

Source / GeoRasterLayer documentation: https://github.com/geotiff/georaster-layer-for-leaflet#georaster-layer-for-leaflet

Full list of Leaflet plugins:
https://leafletjs.com/plugins.html