18 |
19 | stac-map is a map-first visualization tool for{" "}
20 |
21 | STAC
22 |
23 | .
24 |
25 |
26 |
27 | To get started, use the text input,{" "}
28 |
33 |
34 | upload a file
35 |
36 |
37 | , or{" "}
38 |
39 | load an example
40 |
41 | .
42 |
43 |
44 | Questions, issues, or feature requests? Get in touch on{" "}
45 |
46 |
47 | GitHub
48 |
49 |
50 | .
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/hooks/stac-search.ts:
--------------------------------------------------------------------------------
1 | import { useInfiniteQuery } from "@tanstack/react-query";
2 | import type { StacLink } from "stac-ts";
3 | import type { StacItemCollection, StacSearch } from "../types/stac";
4 | import { fetchStac } from "../utils/stac";
5 |
6 | export default function useStacSearch(search: StacSearch, link: StacLink) {
7 | return useInfiniteQuery({
8 | queryKey: ["search", search, link],
9 | initialPageParam: updateLink(link, search),
10 | getNextPageParam: (lastPage: StacItemCollection) =>
11 | lastPage.links?.find((link) => link.rel == "next"),
12 | queryFn: fetchSearch,
13 | });
14 | }
15 |
16 | async function fetchSearch({ pageParam }: { pageParam: StacLink }) {
17 | return (await fetchStac(
18 | pageParam.href,
19 | pageParam.method as "GET" | "POST" | undefined,
20 | (pageParam.body as StacSearch) && JSON.stringify(pageParam.body)
21 | )) as StacItemCollection;
22 | }
23 |
24 | function updateLink(link: StacLink, search: StacSearch) {
25 | if (!link.method) {
26 | link.method = "GET";
27 | }
28 | const url = new URL(link.href);
29 | if (link.method == "GET") {
30 | if (search.collections) {
31 | url.searchParams.set("collections", search.collections.join(","));
32 | }
33 | if (search.bbox) {
34 | url.searchParams.set("bbox", search.bbox.join(","));
35 | }
36 | if (search.datetime) {
37 | url.searchParams.set("datetime", search.datetime);
38 | }
39 | } else {
40 | link.body = search;
41 | }
42 | link.href = url.toString();
43 | return link;
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/cards/collection.tsx:
--------------------------------------------------------------------------------
1 | import { MarkdownHooks } from "react-markdown";
2 | import { Card, Link, Stack, Text } from "@chakra-ui/react";
3 | import type { StacCollection } from "stac-ts";
4 | import { SpatialExtent, TemporalExtent } from "../extent";
5 |
6 | export default function CollectionCard({
7 | collection,
8 | setHref,
9 | footer,
10 | }: {
11 | collection: StacCollection;
12 | setHref: (href: string | undefined) => void;
13 | footer?: string;
14 | }) {
15 | const selfHref = collection.links.find((link) => link.rel === "self")?.href;
16 | return (
17 | 
13 |