Leaflet load GeoTIFF file from browser

Question

I want to load a GeoTIFF file from a browser using Leaflet. I have created a custom control button that on click loads a file from local computer.

fileInput.Change() is the function that is called, when a user select a tiff file. Right now I am loading a file from local directory, and it's size is around 57 MB, and I am getting error of 206 in my browser.

    // load raster button
    var customControl =  L.Control.extend({

      options: {
        position: 'topleft'
      },

      onAdd: function (map) {
        var container = L.DomUtil.create('input');
        container.type="button";
        container.title="No cat";
        // container.value = "42";

        container.style.backgroundColor = 'white';
        //container.style.backgroundImage = "url(https://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
        container.style.backgroundSize = "30px 30px";
        container.style.width = '30px';
        container.style.height = '30px';

        // container.onmouseover = function(){
        //   container.style.backgroundColor = 'pink';
        // }
        // container.onmouseout = function(){
        //   container.style.backgroundColor = 'white';
        // }

        container.onclick = function(){
        document.getElementById('fileInput').click();
          console.log('buttonClicked');
        }

        return container;
      }
    });

    fileInput.onchange = function(e) {
      debugger;
      var bounds = new L.LatLngBounds(
            new L.LatLng(-179.9999999999999716,-89.9999999999820091 ),
            new L.LatLng(179.9999999999640465, 89.9999999999820091)
          );

            // var overlay = new L.imageOverlay("GRAY_50M_SR/GRAY_50M_SR.tif", bounds)
            //   .addTo(map);
  //           var  bounds = new L.LatLngBounds(
        // new L.LatLng(40.71222,-74.22655),
        // new L.LatLng(40.77394,-74.12544));

            var overlay = new L.ImageOverlay("GRAY_50M_SR/GRAY_50M_SR.tif", bounds, {
                        opacity: 0.5,
                        interactive: true,
                        attribution: '&copy; A.B.B Corp.'
                    });
                    map.addLayer(overlay);


    };

How can I load a GeoTIFF file in Leaflet from browser?

Try with smaller tif. If it works, then your tif is too big. — TomazicM, Aug 05 '19 at 05:21
206 is not an error, it is a status code indicating that you got part of the response. Depending on how L.ImageOverlay works this might be exactly what you want. What is your actual problem? — bugmenot123, Aug 05 '19 at 09:52
I have loaded a smaller size png file, and it is loaded. But how can i load tiff. I have tried using geotiff plugin of Leaflet, but no success with that as well. — Ahsan Mukhtar, Aug 05 '19 at 11:20
What i have seen from other link is that, this is possible using leaflet's geotiff plugin, but i have tried with that, and no success. — Ahsan Mukhtar, Aug 05 '19 at 11:23

Leaflet load GeoTIFF file from browser

0 Answers0