Skip to content

Commit

Permalink
Add rescale, colormap, expression tiler parameters (#62)
Browse files Browse the repository at this point in the history 
* Add rescale, colormap, expression tiler parameters

* Fix for issue #8

* Fix for issue #35
  • Loading branch information
@lucyhutcheson
lucyhutcheson authored Mar 20, 2023
1 parent f6d7ff5 commit 24bea3c
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 93 deletions.
6 changes: 4 additions & 2 deletions .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ REACT_APP_ANALYZE_BTN_URL=https://analyze.example.com
REACT_APP_SHOW_PUBLISH_BTN=false
REACT_APP_STAC_API_URL=https://api-endpoint.example.com
REACT_APP_DEFAULT_COLLECTION=collection-name
REACT_APP_TILER_URL=https://titiler.example.com
REACT_APP_TILER_PARAMS={"sentinel-2-l2a": { "assets": [ "visual" ], "mosaic_asset": "visual" }, "landsat-c2-l2": { "assets": [ "red", "green", "blue" ], "color_formula": "Gamma+RGB+1.7+Saturation+1.7+Sigmoidal+RGB+15+0.35", "mosaic_asset":"red", "mosaic_color_formula": "Gamma+R+1.7+Sigmoidal+R+15+0.35" }, "naip": { "assets": [ "image" ], "mosaic_asset": "image", "bidx":"1,2,3" } }
REACT_APP_SCENE_TILER_URL=https://titiler.example.com
REACT_APP_SCENE_TILER_PARAMS={ "sentinel-2-l2a": { "assets": [ "visual" ] }, "landsat-c2-l2": { "assets": [ "red", "green", "blue" ], "color_formula": "Gamma+RGB+1.7+Saturation+1.7+Sigmoidal+RGB+15+0.35" }, "naip": { "assets": [ "image" ], "bidx": "1,2,3" }, "cop-dem-glo-30": { "assets": [ "data" ], "colormap_name": "terrain", "rescale":["-1000,4000"] }, "cop-dem-glo-90": { "assets": [ "data" ], "colormap_name": "terrain", "rescale":["-1000,4000"] }, "sentinel-1-grd": { "assets": [ "vv"], "rescale": ["0,250"], "colormap_name": "plasma"} }
REACT_APP_MOSAIC_TILER_URL=https://titiler-mosaic.example.com
REACT_APP_MOSAIC_TILER_PARAMS={ "sentinel-2-l2a": { "assets": [ "visual" ] }, "landsat-c2-l2": { "assets": [ "red" ], "color_formula": "Gamma+RGB+1.7+Saturation+1.7+Sigmoidal+R+15+0.35" }, "naip": { "assets": [ "image" ], "bidx": "1,2,3" }, "cop-dem-glo-30": { "assets": [ "data" ], "colormap_name": "terrain", "rescale":["-1000,4000"]}, "cop-dem-glo-90": { "assets": [ "data" ], "colormap_name": "terrain", "rescale":["-1000,4000"]}, "sentinel-1-grd": { "assets": [ "vv" ], "rescale": ["0,250"], "colormap_name": "plasma"} }
REACT_APP_MIN_ZOOM_LEVEL=7
13 changes: 13 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## v.0.5.0 - TBD

### Changed

- Move mosaic-specific tiler parameters (`mosaic_asset` and `mosaic_color_formula`) into REACT_APP_MOSAIC_TILER_PARAMS (new), and rename them to `assets` and `color_formula` to align with scene view tiler parameters.
- Rename REACT_APP_TILER_URL to REACT_APP_SCENE_TILER_URL
- Rename REACT_APP_TILER_PARAMS to REACT_APP_SCENE_TILER_PARAMS

### Added

- Env variable REACT_APP_MOSAIC_TILER_PARAMS
- `rescale`, `colormap_name`, and `expression` tiler parameters

## v0.4.0 - 2023-03-14

### Changed
Expand Down
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,25 @@ FilmDrop UI is a browser-based interface for displaying results from a STAC API.
For local development, you should create an `.env` file with the appropriate configuration outlined in the table below.
The file `.env.example` is included in this repository as a representative file.

| Variable | Description | Required |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| PUBLIC_URL | URL for the FilmDrop UI. Useful when using a CDN to host application. | Optional |
| REACT_APP_APP_NAME | Name for this app | Optional |
| REACT_APP_LOGO_URL | URL for your custom logo | Optional |
| REACT_APP_LOGO_ALT | Alt image description for your custom logo | Optional |
| REACT_APP_DASHBOARD_BTN_URL | URL for the Dashboard button at the top right of the UI. If not set, the button will not be visible. | Optional |
| REACT_APP_ANALYZE_BTN_URL | URL for the Analyze button at the bottom left of the UI. If not set, the button will not be visible. | Optional |
| REACT_APP_SHOW_PUBLISH_BTN | Flag for displaying the Publish button at the bottom left of the UI. Setting to `true` will display the button, any other value will not display the button. Default is to not display the button. | Optional |
| REACT_APP_STAC_API_URL | URL for STAC API | Required |
| REACT_APP_API_MAX_ITEMS | Maximum number of items requested from API. If not set, the default max items will be 200. | Optional |
| REACT_APP_DEFAULT_COLLECTION | Default collection option for collection dropdown | Optional |
| REACT_APP_TILER_URL | URL for map tiling | Required |
| REACT_APP_TILER_PARAMS | Per-collection configuration of TiTiler `assets`, `color_formula`, `bidx`, `mosaic_asset`, and `mosaic_color_formula` parameters. Example in [.env.example](.env.example) | Optional |
| REACT_APP_MIN_ZOOM_LEVEL | Minimum zoom level for search results. If not set, the default zoom level will be 7. | Optional |
| REACT_APP_CF_TEMPLATE_URL | CloudFormation Template URL used to create a new stack. If not set, the Launch Your Own button will not be visible. | Optional |
| REACT_APP_MOSAIC_TILER_URL | URL for mosaic tiling. If not set, the View Mode selector will not be visible. The app requires the use of the [NASA IMPACT TiTiler fork](https://github.com/NASA-IMPACT/titiler) as it contains the mosaicjson endpoints needed. | Optional |
| REACT_APP_MOSAIC_MAX_ITEMS | Maximum number of items in mosaic. If not set, the default max items will be 100. | Optional |
| Variable | Description | Required |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| PUBLIC_URL | URL for the FilmDrop UI. Useful when using a CDN to host application. | Optional |
| REACT_APP_APP_NAME | Name for this app | Optional |
| REACT_APP_LOGO_URL | URL for your custom logo | Optional |
| REACT_APP_LOGO_ALT | Alt image description for your custom logo | Optional |
| REACT_APP_DASHBOARD_BTN_URL | URL for the Dashboard button at the top right of the UI. If not set, the button will not be visible. | Optional |
| REACT_APP_ANALYZE_BTN_URL | URL for the Analyze button at the bottom left of the UI. If not set, the button will not be visible. | Optional |
| REACT_APP_SHOW_PUBLISH_BTN | Flag for displaying the Publish button at the bottom left of the UI. Setting to `true` will display the button, any other value will not display the button. Default is to not display the button. | Optional |
| REACT_APP_STAC_API_URL | URL for STAC API | Required |
| REACT_APP_API_MAX_ITEMS | Maximum number of items requested from API. If not set, the default max items will be 200. | Optional |
| REACT_APP_DEFAULT_COLLECTION | Default collection option for collection dropdown | Optional |
| REACT_APP_SCENE_TILER_URL | URL for map tiling | Required |
| REACT_APP_SCENE_TILER_PARAMS | Per-collection configuration of TiTiler `assets`, `color_formula`, `bidx`, `rescale`, `expression`, and `colormap_name` parameters. Example in [.env.example](.env.example) | Optional |
| REACT_APP_MIN_ZOOM_LEVEL | Minimum zoom level for search results. If not set, the default zoom level will be 7. | Optional |
| REACT_APP_CF_TEMPLATE_URL | CloudFormation Template URL used to create a new stack. If not set, the Launch Your Own button will not be visible. | Optional |
| REACT_APP_MOSAIC_TILER_URL | URL for mosaic tiling. If not set, the View Mode selector will not be visible. The app requires the use of the [NASA IMPACT TiTiler fork](https://github.com/NASA-IMPACT/titiler) as it contains the mosaicjson endpoints needed. | Optional |
| REACT_APP_MOSAIC_TILER_PARAMS | Per-collection configuration of TiTiler mosaic `assets`, `color_formula`, `bidx`, `rescale`, `expression`, and `colormap_name` parameters. Example in [.env.example](.env.example) | Optional |
| REACT_APP_MOSAIC_MAX_ITEMS | Maximum number of items in mosaic. If not set, the default max items will be 100. | Optional |

### Links

Expand Down
50 changes: 27 additions & 23 deletions src/components/Search/Search.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { React, useEffect, useState, useRef } from 'react'
import './Search.css'
import {
envTilerURL,
constructTilerParams,
envSceneTilerURL,
constructSceneTilerParams,
envMosaicTilerURL,
constructMosaicTilerParams,
constructMosaicAssetVal,
envMosaicTilerURL
constructMosaicAssetVal
} from './envVarSetup'
import {
convertDate,
Expand Down Expand Up @@ -52,7 +52,7 @@ const Search = () => {
const _sarPolarizations = useSelector(
(state) => state.mainSlice.sarPolarizations
)
const tilerURL = envTilerURL
const sceneTilerURL = envSceneTilerURL
const mosaicTilerURL = envMosaicTilerURL

// set up map state
Expand Down Expand Up @@ -412,7 +412,7 @@ const Search = () => {

clickedFootprintImageLayerRef.current.clearLayers()
const featureURL = feature.links[0].href
const tilerParams = constructTilerParams(selectedCollectionRef.current)
const tilerParams = constructSceneTilerParams(selectedCollectionRef.current)

fetch(featureURL, {
method: 'GET'
Expand All @@ -422,23 +422,27 @@ const Search = () => {
})
.then(function (json) {
const tileBounds = setupBounds(json.bbox)

L.tileLayer(
`${tilerURL}/stac/tiles/{z}/{x}/{y}.png?url=${featureURL}&${tilerParams}`,
{
tileSize: 256,
bounds: tileBounds,
pane: 'imagery'
}
)
.addTo(clickedFootprintImageLayerRef.current)
.on('load', function () {
// hide loading spinner
dispatch(setSearchLoading(false))
})
.on('tileerror', function () {
console.log('Tile Error')
})
if (sceneTilerURL) {
L.tileLayer(
`${sceneTilerURL}/stac/tiles/{z}/{x}/{y}.png?url=${featureURL}&${tilerParams}`,
{
tileSize: 256,
bounds: tileBounds,
pane: 'imagery'
}
)
.addTo(clickedFootprintImageLayerRef.current)
.on('load', function () {
// hide loading spinner
dispatch(setSearchLoading(false))
})
.on('tileerror', function () {
console.log('Tile Error')
})
} else {
dispatch(setSearchLoading(false))
console.log('REACT_APP_SCENE_TILER_URL is not set in env variables.')
}
})
}

Expand Down
Loading

0 comments on commit 24bea3c

Please sign in to comment.