georaster-layer-for-leaflet-example icon indicating copy to clipboard operation
georaster-layer-for-leaflet-example copied to clipboard

`.ovr` is getting added after the tiff file path

Open krishnaglodha opened this issue 2 years ago • 2 comments

Describe the bug A clear and concise description of what the bug is. I'm trying to show tiff on the map, but when I add my tiff path e.g. https://abc.s3.amazonaws.com/abc/2022-03-14/abc.tif and run the program , it adds .ovr at the end

To Reproduce Steps to reproduce the behavior: Here is the code


<!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;
        z-index: 1;
      }
      #info {
        background: rgba(20, 20, 20, 0.85);
        color: lightblue;
        left: 15%;
        padding: 15px;
        position: absolute;
        top: 0;
        right: 15%;
        z-index: 2;
      }
      #info a {
        color: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/chroma-js"></script>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://unpkg.com/georaster"></script>
    <script src="https://unpkg.com/proj4"></script>
    <script src="https:///unpkg.com/georaster-layer-for-leaflet@latest"></script>
    <script>
      // initalize 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);

      var url_to_geotiff_file =
        "https://abc.s3.amazonaws.com/abc/2022-03-14/Ratan+Waje.tif";

      const scale = chroma
        .scale([
          "rgba(0,0,0,0)",
          "#d73027",
          "#f46d43",
          "#fdae61",
          "#fee08b",
          "#ffffbf",
          "#d9ef8b",
          "#a6d96a",
          "#66bd63",
          "#1a9850",
          "#006837",
        ])
        .domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]);
      var pixelValuesToColorFn = (values) => {
        return scale(values).hex();
      };
      parseGeoraster(url_to_geotiff_file).then((georasters) => {
        var layer = new GeoRasterLayer({
          georasters,
          pixelValuesToColorFn,
          resolution: 64,
          opacity: 0.5,
        });
        layer.addTo(map);
        map.fitBounds(layer.getBounds());
      });
    </script>
  </body>
</html>

Expected behavior I should be able to see tiff on the map

Screenshots Screenshot 2022-03-20 at 11 02 22

Desktop (please complete the following information):

  • OS: - MacOS (mac mini)
  • Browser - chrome

krishnaglodha avatar Mar 20 '22 05:03 krishnaglodha

Hi, @krishnaglodha . Thank you for submitting this issue. My best guess is that GeoRasterLayer might not support the projection of your GeoTIFF. Could you provide the GeoTIFF? If you don't feel comfortable posting a link, you could email it to [email protected].

Regarding the .ovr issue, this is a feature not a bug :-) GeoRasterLayer automatically tries to find and load an overview file in addition to the main .tif file. If it can't find a .ovr file, nothing changes. The reason why it appears in red is that there's no way for the lib to know if an overview file exists without issuing a network request. Because it's a network failure, I can't catch and suppress the error logging. I'm hoping to make this configurable in the future, but too many higher priorities at the moment.

DanielJDufour avatar Mar 21 '22 02:03 DanielJDufour

There is an issue in this approach if you are trying to connect to files protected with storage token.

For url like below:

http://azure_storage.com/cog_file.tiff?token=<token_values>&signature=<signature>

.ovr extension is added after query parameters so:

http://azure_storage.com/cog_file.tiff?token=<token_values>&signature=<signature>.ovr

Which breaks whole link. Is is possible to append it before query params?

sorspyro avatar Jul 08 '22 13:07 sorspyro