Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for mosaicing with bidx and color_formula #55

Merged
merged 2 commits into from
Mar 9, 2023
Merged

add support for mosaicing with bidx and color_formula #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a38bc9
add support for mosaicing with bidx and color_formula
Mar 9, 2023
1c2ee6e
remove content
Mar 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ 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"]},"landsat-c2-l2": {"assets":["red","green","blue"], "color_formula":"Gamma+RGB+1.7+Saturation+1.7+Sigmoidal+RGB+15+0.35"}}
REACT_APP_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" }}
REACT_APP_MIN_ZOOM_LEVEL=7
28 changes: 19 additions & 9 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ 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).

## v0.4.0 - TBD

### Added

- Add mosaic view mode if REACT_APP_MOSAIC_TILER_URL (new) is defined

### Changed

- Env variable REACT_APP_TILER_PARAMS key `asset_bidx` changed to `bidx`. The format is
now just a comma-separated list of indexes (e.g., `1,2,3`) rather than of the form `asset-name|1,2,3`

## v0.3.0 - 2023-03-06

### Changed
Expand All @@ -14,25 +25,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Rename env variable REACT_APP_COLLECTIONS to REACT_APP_DEFAULT_COLLECTION
- Rename env variable REACT_APP_DASHBOARD_LINK to REACT_APP_DASHBOARD_BTN_URL
- Rename env variable REACT_APP_ANALYZE_LINK to REACT_APP_ANALYZE_BTN_URL
- Update README.md with new env variables
- Make date/time field required
- Date function to calculate the last 2 weeks
- Make Publish button configurable in env variable
- Remove BBOX button
- Make REACT_APP_MIN_ZOOM_LEVEL optional
- Improve use of MIN_ZOOM constant
- Remove Search button
- Enable cloud cover dependency based on collection
- Remove time from date range
- Add mosaic view mode

### Added

- Env variable PUBLIC_URL
- Env variable REACT_APP_LOGO_URL
- Env variable REACT_APP_LOGO_ALT
- Env variable REACT_APP_TILER_ASSETS
- Env variable REACT_APP_TILER_COLOR_FORMULAS
- Env variable REACT_APP_TILER_PARAMS
- Collection dropdown to Search that is dynamically populated from API
- Error indicators for UI elements
- Support for Landsat thumbnail preview
Expand All @@ -44,7 +48,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Add support for `asset_bidx` tiler configuration
- Env variable REACT_APP_CF_TEMPLATE_URL
- Env variable REACT_APP_APP_NAME
- Env variable REACT_APP_MOSAIC_TILER_URL

### Removed

- Remove BBOX button
- Make Publish button configurable in env variable
- Remove time from date range
- Remove Search button

## v0.2.0 - 2023-Jan-13

Expand Down
32 changes: 16 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,22 @@ 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_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`, and `asset_bidx` parameters. Example: `{"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" ], "asset_bidx":"image \| 1,2,3" } }` | 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 |
| 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_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`, and `bidx` parameters. Example: `{"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" } }` | 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 |

### Links

Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@
"remark-lint-emphasis-marker",
"*"
],
[
"remark-lint-no-duplicate-headings",
false
],
"remark-lint-hard-break-spaces",
"remark-lint-blockquote-indentation",
"remark-lint-no-consecutive-blank-lines",
Expand Down
17 changes: 12 additions & 5 deletions src/components/Search/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import './Search.css'
import {
envTilerURL,
constructTilerParams,
constructMosaicTilerParams,
constructAssetsParam,
envMosaicTilerURL
} from './envVarSetup'
import {
Expand Down Expand Up @@ -397,7 +399,7 @@ const Search = () => {
},
body: JSON.stringify({
stac_api_root: process.env.REACT_APP_STAC_API_URL,
asset_name: 'visual', // TODO: use first entry in assets config
asset_name: constructAssetsParam(selectedCollectionRef.current),
collections: [selectedCollectionRef.current],
datetime,
bbox,
Expand All @@ -408,10 +410,15 @@ const Search = () => {
fetch(`${mosaicTilerURL}/mosaicjson/mosaics`, requestOptions)
.then((r) => r.json())
.then((body) => {
const tileHref =
body?.links?.find((el) => el.rel === 'tiles').href + '.png'
if (tileHref) {
L.tileLayer(tileHref, {
const imgFormat = 'png'
const baseTileLayerHref = body?.links?.find(
(el) => el.rel === 'tiles'
)?.href
const tilerParams = constructMosaicTilerParams(_collectionSelected)
const tileLayerHref = `${baseTileLayerHref}.${imgFormat}?${tilerParams}`

if (tileLayerHref) {
L.tileLayer(tileLayerHref, {
tileSize: 256,
bounds: mosaicBounds,
pane: 'imagery'
Expand Down
69 changes: 50 additions & 19 deletions src/components/Search/envVarSetup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,68 @@
// retrieve tiler URLs from env variable
export const envTilerURL = process.env.REACT_APP_TILER_URL || ''
export const envMosaicTilerURL = process.env.REACT_APP_MOSAIC_TILER_URL || ''

// function to construct the Titiler tile query parameters from
// REACT_APP_TILER_PARAMS env var
export const constructTilerParams = (selectedCollection) => {
let paramStr = ''

// retrieve tiler parameters from env variable
let tilerParams = {}
const tilerParams = getTilerParams()
const assets = constructAssetsParam(selectedCollection, tilerParams)
paramStr = paramStr + `&assets=${assets}`

const colorFormula = tilerParams[selectedCollection]?.color_formula
if (colorFormula) {
paramStr = paramStr + `&color_formula=${colorFormula}`
}

const bidx = tilerParams[selectedCollection]?.bidx
const assetBidx = assets && bidx ? `${assets}|${bidx}` : null
if (assetBidx) {
paramStr = paramStr + `&asset_bidx=${assetBidx}`
}
return paramStr
}

export const constructMosaicTilerParams = (selectedCollection) => {
// retrieve tiler parameters from env variable
const tilerParams = getTilerParams()

let paramStr = ''

const colorFormula = tilerParams[selectedCollection]?.color_formula
if (colorFormula) {
paramStr = paramStr + `&color_formula=${colorFormula}`
}

const bidx = tilerParams[selectedCollection]?.bidx
if (bidx) {
paramStr = paramStr + `&bidx=${bidx}`
}
return paramStr
}

const getTilerParams = () => {
try {
tilerParams = JSON.parse(process.env.REACT_APP_TILER_PARAMS)
return JSON.parse(process.env.REACT_APP_TILER_PARAMS)
} catch (e) {
console.log(`Error parsing tiler params: ${e.message}`)
}
return {}
}

export const constructAssetsParam = (selectedCollection, tilerParams) => {
if (!tilerParams) {
tilerParams = getTilerParams()
}
const assets = tilerParams[selectedCollection]?.assets || []
if (!assets) {
console.log(`Assets not defined for ${selectedCollection}`)
}

// titiler accepts multiple `assets` parameters for compositing
// multiple files, so add extra params here if there's more than
// one asset specified
const assetsStr = assets.join('&assets=')

const colorFormula = tilerParams[selectedCollection]?.color_formula
const assetBidx = tilerParams[selectedCollection]?.asset_bidx

let paramStr = `&assets=${assetsStr}`
if (colorFormula) {
paramStr = paramStr + `&color_formula=${colorFormula}`
}
if (assetBidx) {
paramStr = paramStr + `&asset_bidx=${assetBidx}`
}
return paramStr
return assetsStr
}

// retrieve tiler URLs from env variable
export const envTilerURL = process.env.REACT_APP_TILER_URL || ''
export const envMosaicTilerURL = process.env.REACT_APP_MOSAIC_TILER_URL || ''