Here is an example with mapbox-gl behind react-map-gl:
<Map
initialViewState={{
latitude: 0,
longitude: 0,
zoom: 3,
}}
style={{ width: '100%', height: '100vh' }}
mapStyle='mapbox://styles/mapbox/streets-v9'
mapboxAccessToken={process.env.MAPBOX_TOKEN}
>
<GeotiffLayer id='grid-layer-example' url='https://mycompany.com/some-geotiff/my-geotiff.tif' />
</Map>
- visgl/react-map-gl: mapbox-gl and maplibre react wrapper
- GeoTIFF/georaster: Geotiff loader
- gka/chromajs: Geotiff values converter to color
- AlexJWayne/ts-gl-shader: Typed WebGL shaders
- gcanti/fp-ts: Functional typescript
npm i react-map-geotiff-layer
prop | type | required | default value | description |
---|---|---|---|---|
id | string | yes | Unique layer name (see mapbox-gl documentation) | |
url | string | yes | Url of the geotiff (http or https) | |
band | number | no | 0 | A positive number indicating the geotiff band to be used |
interpolated | boolean | no | true | Interpolate web-gl vertex colors |
interpolateBounds | boolean | no | false | Interpolate with closest noData cells (only applicable if interpolate is true ) |
opacity | number | no | 1 | Opacity ratio from 0 (transparent) to 1 |
visible | boolean | no | true | Show/hide geotiff layer |
colors | (string | Color)[] | no | ['#FFFFFF', '#000000'] | Color range applied in conjunction with property domain . Behind the scene, the chromajs scale and domain functions are used to determine the cells colors: chroma.scale(color ).domain(domain ) |
domain | number[] | no | [geotiff.min , geotiff.max ] |
If not specified the data values range is used |
maxzoom | number | no | undefined | The maximum zoom level for the layer (between 0 and 24 inclusive). At zoom levels equal to or greater than the maxzoom, the layer will be hidden (not yed implemented) |
minzoom | number | no | undefined | The minimum zoom level for the layer (between 0 and 24 inclusive). At zoom levels less than the minzoom, the layer will be hidden (not yed implemented) |
noDataValue | number | null | no | undefined | Override noDataValue originally stored in the geotiff |
event | signature | description |
---|---|---|
loaded | (geotiff: GeotiffData) => any | Fired when the geotiff is downloaded. Emit a GeotiffData instance (see below) |
onError | (e: Error) => any | Rired when an error occured during geotiff download |
The internal data structure of geotiff is highly inspired by the georaster properties.
export interface GeotiffData {
values: number[][]
cellWidth: number
cellHeight: number
width: number
height: number
noDataValue: number | null
xmin: number
xmax: number
ymin: number
ymax: number
min: number
max: number
}
- github-pages demo
- S3 download
- Cloud Optimized Geotiff
- Multi urls (introduce array of urls and indexation of selected geotiff)
- Resolve jitter effect at low resolution
- Ensure support of maplibre
This repository contains an example project. To use it, follow the instructions below.
- First register to mapbox and get a token (if you don't have one)
- Create a
.env
file with the following key:
MAPBOX_TOKEN=<your-token>
cd public
http-server -p 5625 --cors
npm install
npm run build
npm start