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 rescale, colormap, expression tiler parameters #62

Merged
merged 5 commits into from
Mar 20, 2023
Merged

Add rescale, colormap, expression tiler parameters #62

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa2f3db
Add rescale, colormap, expression tiler parameters
lucyhutcheson Mar 15, 2023
97c9e9d
Fix for issue #8
lucyhutcheson Mar 15, 2023
52030e1
Fix for issue #35
lucyhutcheson Mar 15, 2023
64f14de
refactor code
lucyhutcheson Mar 16, 2023
3e8368b
Code updates
lucyhutcheson Mar 20, 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
6 changes: 4 additions & 2 deletions .env.example
View file
Open in desktop
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
Open in desktop
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
philvarner marked this conversation as resolved.
Show resolved Hide resolved
- `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
Open in desktop
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`, and `colormap_name` parameters. Example in [.env.example](.env.example) | Optional |
lucyhutcheson marked this conversation as resolved.
Show resolved Hide resolved
lucyhutcheson marked this conversation as resolved.
Show resolved Hide resolved
| 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
Open in desktop
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 @@ -408,7 +408,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 @@ -418,23 +418,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_TILER_URL is not set in env variables.')
lucyhutcheson marked this conversation as resolved.
Show resolved Hide resolved
}
})
}

Expand Down
Loading