mapbox / mapbox/mapbox-gl-js

raster tile source in GeoTIFF format (WMTS)

Open
#7,765 0 comments 16 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

I would like to interest the Mapbox developer team to the approach detailed in the following blog: https://eox.at/2018/01/visualizing-geotiff-tiles-with-openlayers/
You have described there, an implementation to load tiled GeoTIFF files directly into the browser as a WMTS source. You get then rendered tiles on a map with the possibility to change the range/colours and make calculations since all floats read from the GeoTIFF files are available from the client.
I am not sure to have seen this elsewhere, in the COG specifications for example.

![ol_geotiff](https://user-images.githubusercontent.com/5402758/51038050-5838f300-15b2-11e9-8466-657c6ba4e3e7.png)

I have coded a prototype following what is explained and available in the blog. It is visible from
http://webportals.ipsl.jussieu.fr/ScientificApps/dev/forge_patrick/eox/map_01.html
You will see a global world map from level 1 to 10 for a layer that represents an elevation at 90m resolution. I have organized the original GeoTIFF files as GeoTIFF tiles with gdal commands. It represents 43 Go of data with 2796200 tile files. Do not pay attention to the ocean/land mask that is not always properly defined from the original test data.

Now, I would like to do the same using Mapbox GL JS because I know that it has great Web GL capacities beside and it would be a very nice feature for sharing and delivering high resolution data (satellites products, climate model variables).

### Implementation

I have coded a first prototype that uses a classic raster tiled source in PNG format
http://webportals.ipsl.jussieu.fr/ScientificApps/dev/forge_patrick/slippyMaps/mapbox_01.html

Now, if I specify a raster tiled source in GeoTIFF as it was suggested from #6485
http://webportals.ipsl.jussieu.fr/ScientificApps/dev/forge_patrick/slippyMaps/mapbox_02.html
You get
"Error: "Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported."

In fact, I was not expecting that it works like this and this is the purpose of this issue.

You will read from the EOX blog that tiles are fetched from the server and converted to an image from the client itself. As written: "since the regular WMTS service returns regular web images (PNG) and we request GeoTIFF data we need to parse this data before we can visualize anything. This is done by the geotiff.js JavaScript library by EOX. The parsed GeoTIFF data is still not a human readable image since it can hold data from multiple sensors of the satellite collecting data from different (and maybe not visible) wavelengths.To make this data visible to the human eye is the job of the Plotty JavaScript library also developed by EOX."

Regards

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the raster tiled source behavior described here and the prior discussion in #6485. Compare the PNG prototype with the GeoTIFF prototype and the reported unsupported-image error. Done means a GeoTIFF WMTS source can be loaded in Mapbox GL JS and its raster values can be rendered and used for client-side range, colour, or calculation changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.