1

I'm using React With OpenLayers to render a GeoTiff overlay on top of a map (mapbox satellite).

The problem I'm facing is that sometimes these geoTiff files are a little bit off of their original location. Here are some screen shots

image 1 image 2

As we can see here the images are a little to the top right. This doesn't happen on some GeoTiff files.

Here's the code that I"m using

  const getViewConfig = map => (viewConfig) => {
    const code = viewConfig.projection?.getCode();
    return fromEPSGCode(code).then(() => {
      const projection = code;
      const extent = transformExtent(
        viewConfig.extent,
        viewConfig.projection,
        projection
      );

      const width = getWidth(extent);
      const height = getHeight(extent);
      const center = getCenter(extent);

      const size = map.getSize();
      return {
        projection,
        center,
        resolution: Math.max(width / size[0], height / size[1]),
      };
    });
  };

  function init() {
    const key = import.meta.env.VITE_MAPBOX_KEY;
    const url = `https://api.mapbox.com/styles/v1/xxxx/xxxx/tiles/256/{z}/{x}/{y}@2x?access_token=${key}`;
    const baseSource = new XYZ({
      url,
      maxZoom: 22,
    });

    const baseLayer = new Tile({
      source: baseSource,
    });

    const source = new GeoTIFF({ sources: [{ url: props.src }] });
    const layer = new TileLayer({ source });
    setLayer(layer);

    const customMap = new Map({
      controls: [],
      target: mapRef.current,
      layers: [baseLayer, layer],
    });

    customMap.setView(source.getView().then(getViewConfig(customMap)))
    setMap(customMap);
    customMap.on("loadstart", function () {});
    customMap.on("loadend", function () {
      setShowLoader(false);
    });
}

I try to use some post rendering code to move the geotiff half of it's height down and full of it's width to the left but that will cause other geotiff which are rendering correctly to be incorrect. So I don't think that's a good solution.

I'd like to know why it's happening and how we can fix them, are the issues with the tif files? or the code. If it's in the tif file how can I test it?

  • Google "geotiff viewer online" for some sites where you can test a file. e.g. https://app.geotiff.io/load or you could use a Mapbox account https://docs.mapbox.com/help/troubleshooting/uploads/#tiff-uploads – Mike May 07 '23 at 10:28
  • Hi, Mike I've tested it with Qgis and there it's rendering at the proper location – Jan-Hein van Asseldonk May 07 '23 at 13:52
  • Hi, @Mike I'm using proj4 for transforming the projection code to coordinate. Do you the problem might be in this library? – Jan-Hein van Asseldonk May 08 '23 at 07:50
  • There might be a problem with proj4, or the projection definition obtained from epsg.io, if it is an unusual projection. – Mike May 08 '23 at 14:33

0 Answers0