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
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?