Search code examples
geospatialmapbox-gl-jsgeotiff

Mapbox GL JS : Do large images overlay accurately - if so, how?


I feel like I have been stuck perpetually with this problem. I have a single geoTIF file of weather radar data that will not overlay on Mapbox correctly. The spatial area is of the entire US. It should be a simple task, but there seems to be some sort of weird distortion causing the overlay to not be correct, even though I am very certain my Mapbox coordinates in the linked HTML file below are correct and match the geoTIF.

I uploaded the geoTIF to a website called "geotiff.io" (which uses leaflet to show the files) and it renders the image perfectly, but I cannot emulate it using Mapbox. The storms always are off in Mapbox.

This is a link to my Mapbox map with the image overlay where it is incorrect

This is a dropbox link to a zip file with the geoTIF and colorization file, which I used gdaldem with

I would like to explain more, so it's simplified. Here is an image showing part of a storm that is out of place (left side) and how it is too far north. On the right side was a screenshot taken from geotiff.io - and how it's perfect. What is going on here?!

enter image description here


Solution

  • The geoTIF image was not set as a web mercator projection before being displayed in Mapbox. I assume the geotiff.io service corrected this automatically and made me think there was an issue with the code or Mapbox, when it was not.