How to display .tiff file on leaflet map website on mobile devices?

General Help
1

My question is why on desktop the site works fine but when I try to open the site on mobile devices like tablets or phones the page crashes when the .tif file should be displayed on the map.

<!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/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',
          useCache: true,
          crossOrigin: true
      }).addTo(map);

      var url_to_geotiff_file = "odm_orthophoto.tif";

      fetch(url_to_geotiff_file)
        .then(response => response.arrayBuffer())
        .then(arrayBuffer => {
          parseGeoraster(arrayBuffer).then(georaster => {
            console.log("georaster:", georaster);
            var layer = new GeoRasterLayer({
                georaster: georaster,
                opacity: 0.7,
            });
            layer.addTo(map);

            map.fitBounds(layer.getBounds());

        });
      });

    </script>
  </body>
</html>
2

Is your geotiff stored local (C:.…) or also accessible via HTTP(S)?

Something to keep in mind:
If your GeoTiff is really big maybe it’s better to load it via a Tiles server / GeoServer (WMS)?

1 Like
3

My GeoTiff file odm_orthophoto.tif is located in the same folder as the project and it’s 17,9 MB but i think it should be also accesible via HTTP(S) since it works on computers. I don’t know how am i suppose to load it via Tiles server / GeoServer since project is build on leaflet. I’m hosting everything on xampp if that somehow helps.

1 Like
4

It’s crashing because georaster loads the entire image in memory (which is scarce, on mobile devices).

You need tiles, like gdal2tiles — GDAL documentation

Or also use: tiles — OpenDroneMap 3.5.3 documentation

1 Like
5

I am trying to load files that were generated by gdal2tiles on a leaflet map, but they are not displayed, only the basic map. I checked through the console and errors are being loaded, e.g. http://localhost/teststrony/13/4481/2690.png 404 (Not Found)
I entered the location of this and the path http://localhost/teststrony/13/4481/
is correct, but there is an image named 5501.png and not 2690.png as the page wants to load, how to fix it? If that helps, i’m using anaconda to use the gdal2tiles and convert .tif file to tiles, so im pretty sure images are good, i checked even them and they seem accurate, but their names are different than those what website wants to load.

<!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>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
      // initialize leaflet map
      var map = L.map('map').setView([52.408056, 16.933889], 13);

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

      // add tile layer for GeoTIFF
      L.tileLayer('./{z}/{x}/{y}.png', {
        attribution: 'GeoTIFF Tiles',
        opacity: 0.7
      }).addTo(map);
    </script>
  </body>
</html>
6

Try with:

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.