NOTE: App is completely client-side for easier maintenance plus avoid tracking searches, so need to install a plugin like Allow-CORS (Chrome / Firefox)
Search satellite Imagery Archive on aggregators via their respective APIs (official or not), like:
-
Open-data:
- OpenAerialMap, free and open-data
- STAC catalogs in dev mode for now (catalog endpoint not editbale through UI yet, need to edit search-API file)
-
Commercial Agregators:
- UP42
- EOS Landviewer
- SKYWATCH EarthCache
- ARLULA Catalog
- SKYFI
- HEAD Aerospace, pricing not available
- ApolloMapping ImageHunter, pricing not available
-
Constellation/Providers:
- Set search settings (AOI polygon, dates and resolution), and advanced settings (cloud coverage, aoi coverage, sun elevation, off-nadir) and API keys
- DrawControls on map to draw a rectangle, edit basemap style, import KML to set map bounds (aoi), control raster opacity, plus standards geocoder and map zoom,
- Search each API (official or not) and parse results
- Displays results in a datagrid table with editable visible column, filter on one property, density, and auto fills sidepanel. Shows date, GSD, provider, and compute price and preview if not returned by API
- Displays timeline with acquisition date of results
- Hover over data table or timeline shows footprint on map and highlights date on timeline
- Displays hovered or selected imagery on map (TMS or raster previews)
- Stores UI and search params to localStorage (as well as search results). Also, checks localStorage object typeof (string, number, array, object) against fallbackState, and hasSameProperties (for objects) to avoid breaking changes in storage object name
- Pagination when more results than pagesize (up42 limit of 500 requests per page etc is handled, needs to check other providers pagination and eventually factorize code)
- Integrate already aggregated constellations directly if authorized to do so, like Planet or Airbus OneAtlas Pleiades directly (would then indicate unknown price since often under NDA),Vexcel API,
- Integrate other satellite imagery providers in the list: (requires paid account for high-res search and api), Umbra space SAR Canopy. BlackSky requires NDA for API access, GeoCento uses GWT RPC internally, also offers API access, AxelGlobe (Hard. use upcoming stac search endpoint if apikey gated access allows it (on selected aoi) or harder, possible via graphql request to get tiles spatial-identifiers covering polygon and then count tiles overlapping a region from spatial id and time range), Not yet publicly available and access requested: Satellogic Aleph (early access to platform seem closed now), Albedo 10cm visible will have a STAC endpoint delivering COGs, Pixxel Early adopters program 5m hyperspectral 300bands,
- Search any new STAC catalog (UP42 is one): Give it the STAC API URL, parse results and columns to display in datagrid. Could use existing STAC js tooling like m-mohr/stac-js , but there does not seem to be any JS search client library - only full-fledged apps like stac-server or leaflet layer and stac-search (to deploy a stac, these are the go-to resource: stac-fastapi and pystac)
- Cleanup: search-utilities, make each search extends a search object class, polygon aoi be a single feature search param, each geojson feature be a real geojson feature (search input, results)
- Put API search in its own ts module, eventually yield results the way loaders.gl does it
- Use CloudFlare Proxy to avoid bandwidth usage to go up. See the official doc or here
- Helps order making/deep-links when available (no deep-links for any platform when checked unfortunately): make selection, export requests email with scene IDs, permalinks. Maxar sends post request to https://api.discover.digitalglobe.com/v1/store , head-aerospace is not very clean. EOS has clean permalinks.
- Not really useful: Offer ability to Cancel ongoing request/promise cancellation. Promise resolve will always execute after ky get/post request finally resolves
- Not really useful: intro-js or reactour (or react-joyride) guided steps walkthrough/onboarding guides
- Set notification (define aoi and receive weekly notifications, or as soon as result appears). Would require user accounts and db and not be purely client-side.
- Order archive imagery via API (no tasking)
Important Feature: Proxy server middleware when app will not be client only, to remove the need for Allow-CORS plugin. Would be great to be a complete STAC catalog endpoint - translating each aggregator API into a fully compliant STAC API. Probable go-to route: use Serverless deployments. Next-js embeds them by default within /pages/api folder, vercel can do so as well, nextjs can be converted to AWS Lambda or Azure Functions with other tools.
Resources:
-
Important: Terraform Next module for AWS to deploy nextjs site with lambdas to avoid relying on vercel or other cloud providers
-
compare nodejs serverless frameworks here or Ansible/Pulumi Cloud specific serverless deployments:
-
next.js 8 blog post on serverless
-
See how to deploy serverless next-js on azure functions or also here
Never
- SH EO browser / SentinelHub not interested in being integrated even via their own api
npm install
npm run start
npm run build- visgl/react-map-gl v7 + mapbox-gl v2 mapbox/mapbox-gl-draw
- mui (previously material-ui) v5 components, inputs and datagrid
- ky HTTP client (based on browser Fetch, more elegant)
- airbnb/visx for charts and graphs
- font-awesome v6
- react-split-pane only supports react v16 (issue) so switching to react-resizable-panels instead
react-map-gl vs react-mapbox-gl
- nebula.gl built a react-map-gl-draw on top of react-map-gl live example which is library agnostic (mapbox, maplibre, etc)
- react-map-gl pre v7.0 had perf drawbacks, so they decided to use mapbox-gl as a peer-dependency (while letting the capability to use maplibre) v7 is also better to use 3rd-party libs like mapbox-gl-draw, mapbox-gl-geocoder rather than the react-map-gl-draw (which latest released version package.json uses react-map-gl ^5.0.0)
Two options:
- CHOICE: go the react-map-gl route with mapbox-gl 3rd party libs example more up to date already, but without the draw rectangle mode that can be added unless as a custom draw module (which was done)
- use this nebula.gl react-map-gl-draw-example and update react-map-gl-draw to v1.0.3 and react-map-gl to v6 works + react v16. updating to v7 requires following this guide, among which updating api key, adding mapbox-gl as dependency. Currently, react-mapbox-gl-draw does not support react-map-gl v7 as seen here, neither supports react 18 as of yet (same github board). So this solution was not chosen.
ky (built on the Fetch api, has retries, simpler syntax) seem a better choice than axios (built on the older XmlHttpRequest api)