stac-map

The map-first, single-page, statically-hosted STAC visualizer at https://developmentseed.org/stac-map.

Includes:

• Client-side COG rendering via deck.gl-raster
• Render collections via some web map services (see #314 for which ones we haven't implemented yet)
• stac-geoparquet visualization, upload, and export

Deploying

There's two ways to deploy your own version of stac-map:

• Build-time configuration
• React component

Build-time configuration

If you only need to customize a few things (default href or auth), you can simply clone this repository and configure the app with environment variables. See deploy.yaml for a (drop-dead simple) example of deploying this application as a static site via Github Pages. The environment variables are:

Variable	Description	Default
VITE_BASE_PATH	URL path prefix (e.g., /my-app/)	/stac-map/
VITE_DEFAULT_HREF	STAC resource to load on startup	None (shows intro)
VITE_AUTH_AUTHORITY	The OIDC authority to use for auth	None
VITE_AUTH_CLIENT_ID	The OIDC client id to use for auth	None

Example:

VITE_BASE_PATH=/ VITE_DEFAULT_HREF=https://my-stac-api.com yarn build

Or create a .env file:

VITE_BASE_PATH=/
VITE_DEFAULT_HREF=https://my-stac-api.com

Then run yarn build and deploy the dist/ directory to your static hosting provider.

React component

For more flexible configuration, we provide a StacMap React component via @developmentseed/stac-map. To use it:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { StacMap } from "@development-seed/stac-map";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <StacMap />
  </StrictMode>
);

See src/main.tsx for a real-world example of using the component (it's what drives https://developmentseed.org/stac-map).

Note

We plan to provide JSDocs for all available properties before releasing v2 of stac-map

Development

Get yarn, then:

git clone git@github.com:developmentseed/stac-map
cd stac-map
yarn install
yarn dev

This will open a development server at http://localhost:5173/stac-map/.

We have some code quality checks:

yarn lint
yarn format

And some simple tests:

yarn playwright install
yarn test

Contributing

We have some architecture documentation to help you get the lay of the land. We use Github Pull Requests to propose changes, and Issues to report bugs and request features.

We use release-please to create releases. This requires our commit messages to conform to Conventional Commits.