diff --git a/.env.development b/.env.development index 904018df..6e06ec48 100644 --- a/.env.development +++ b/.env.development @@ -1 +1,5 @@ -REACT_APP_TITILER=https://titiler.xyz \ No newline at end of file +REACT_APP_TITILER=https://titiler.example.com +REACT_APP_STAC_API_ENDPOINT=https://api-endpoint.example.com +REACT_APP_COLLECTIONS=collectionname +REACT_APP_DASHBOARD_LINK=https://dashboard.example.com +REACT_APP_ANALYZE_LINK=https://analyze.example.com \ No newline at end of file diff --git a/.env.production b/.env.production index 904018df..6e06ec48 100644 --- a/.env.production +++ b/.env.production @@ -1 +1,5 @@ -REACT_APP_TITILER=https://titiler.xyz \ No newline at end of file +REACT_APP_TITILER=https://titiler.example.com +REACT_APP_STAC_API_ENDPOINT=https://api-endpoint.example.com +REACT_APP_COLLECTIONS=collectionname +REACT_APP_DASHBOARD_LINK=https://dashboard.example.com +REACT_APP_ANALYZE_LINK=https://analyze.example.com \ No newline at end of file diff --git a/README.md b/README.md index 5a7dd216..032b25b6 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,24 @@ FilmDrop UI is a browser-based interface for displaying results from a STAC API. -It is currently hard-coded to interact with the [Earth Search v1](https://earth-search.aws.element84.com/v1) STAC API that contains metadata for several Earth on AWS Datasets. - ## Deployment +### Environment Files + +For local development, you should include an `.env.development` file with the proper configuration. + +For production builds, you should include an `.env.production` file with the proper configuration. + +``` +CIRRUS_API_ENDPOINT="[Endpoint]" +METRICS_API_ENDPOINT="[Endpoint]" +REACT_APP_TITILER="[Endpoint]" +REACT_APP_STAC_API_ENDPOINT="[Endpoint]" +REACT_APP_COLLECTIONS="[Collection]" +REACT_APP_DASHBOARD_LINK="[URL]" +REACT_APP_ANALYZE_LINK="[URL]" +``` + ### Links Static files are built with `npm run build` OR `npm run build:prod` then moved to overwrite files in existing S3 buckets. diff --git a/package-lock.json b/package-lock.json index cf58e677..6aec069a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "filmdrop-ui", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 8d4328d6..b6da29b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "filmdrop-ui", - "version": "0.1.0", + "version": "0.2.0", "license" : "Apache-2.0", "dependencies": { "@emotion/react": "^11.10.5", diff --git a/src/components/Layout/Content/BottomContent/BottomContent.js b/src/components/Layout/Content/BottomContent/BottomContent.js index 4b006444..c95d0fc2 100644 --- a/src/components/Layout/Content/BottomContent/BottomContent.js +++ b/src/components/Layout/Content/BottomContent/BottomContent.js @@ -23,8 +23,10 @@ const BottomContent = () => { // if you are setting redux state, call dispatch const dispatch = useDispatch(); + const ANALYZE_LINK = process.env.REACT_APP_ANALYZE_LINK; + function onAnalyzeClick() { - // window.open("", "_blank"); + window.open(ANALYZE_LINK, "_blank"); } function onPublishClick() { @@ -35,9 +37,11 @@ const BottomContent = () => {
- + {ANALYZE_LINK && ( + + ) } diff --git a/src/components/Layout/PageHeader/PageHeader.js b/src/components/Layout/PageHeader/PageHeader.js index fe14f50b..18c54282 100644 --- a/src/components/Layout/PageHeader/PageHeader.js +++ b/src/components/Layout/PageHeader/PageHeader.js @@ -6,20 +6,26 @@ import logoFilmDrop from "../../../assets/logo-filmdrop-white.svg"; import { OpenInNew } from "@mui/icons-material"; const PageHeader = () => { + + const DASHBOARD_LINK = process.env.REACT_APP_DASHBOARD_LINK; + function onDashboardClick() { - // window.open("", "_blank"); + window.open(DASHBOARD_LINK, "_blank"); } + return (
logo
-
onDashboardClick()}> - - Dashboard - - -
+ {DASHBOARD_LINK && ( +
onDashboardClick()}> + + Dashboard + + +
+ ) }
); }; diff --git a/src/components/LeafMap/LeafMap.css b/src/components/LeafMap/LeafMap.css index 6b2d3ac9..c9175f7e 100644 --- a/src/components/LeafMap/LeafMap.css +++ b/src/components/LeafMap/LeafMap.css @@ -19,4 +19,7 @@ .mainMap{ height: 100%; width: 100%; +} +.map-tiles { + filter: brightness(1.125) invert(1) contrast(0.9) hue-rotate(0deg) saturate(0); } \ No newline at end of file diff --git a/src/components/LeafMap/LeafMap.js b/src/components/LeafMap/LeafMap.js index c5ebe76c..5caab4ff 100644 --- a/src/components/LeafMap/LeafMap.js +++ b/src/components/LeafMap/LeafMap.js @@ -50,8 +50,9 @@ const LeafMap = () => { > {/* set basemap layers here: */}
diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js index 3693e371..7cd54103 100644 --- a/src/components/Search/Search.js +++ b/src/components/Search/Search.js @@ -273,10 +273,13 @@ const Search = () => { // get cloud cover silder value const cloudCover = _cloudCover; + const API_ENDPOINT = process.env.REACT_APP_STAC_API_ENDPOINT; + const COLLECTIONS = process.env.REACT_APP_COLLECTIONS; + // build GET URL (limit hardcoded to 362) const baseURLGET = - "https://earth-search.aws.element84.com/v1/search" + - "?bbox=" + + API_ENDPOINT + + "/search?bbox=" + aoiBounds._southWest.lng + "," + aoiBounds._southWest.lat + @@ -288,7 +291,8 @@ const Search = () => { cloudCover + "%7D%7D&datetime=" + combinedDateRange + - "&collections=sentinel-2-l2a"; + "&collections=" + + COLLECTIONS; // TODO rework this to make DRY with baseURLGET string above... // build string to set for publish copy to clipboard @@ -358,7 +362,7 @@ const Search = () => { singleAssetName + "&return_mask=true", { - attribution: "©OpenStreetMap, ©CartoDB", + attribution: "©OpenStreetMap", tileSize: 256, bounds: tileBounds, pane: "imagery",