fix: display item collections (#125)

Closes #86

Author: gadomski

src/components/item-collection.tsx

@@ -24,7 +24,12 @@ export default function ItemCollection({
 
   return (
     <Stack>
-      <Value value={itemCollection}></Value>
+      <Value value={itemCollection}>
+        {itemCollection.features.length > 0 &&
+          itemCollection.features.length +
+            " item" +
+            (itemCollection.features.length > 1 ? "s" : "")}
+      </Value>
       {isStacGeoparquet &&
         ((stacGeoparquetMetadata && (
           <StacGeoparquetInfo

src/components/map.tsx

@@ -3,9 +3,10 @@ import { Layer, type DeckProps } from "@deck.gl/core";
 import { GeoJsonLayer } from "@deck.gl/layers";
 import { MapboxOverlay } from "@deck.gl/mapbox";
 import { GeoArrowPolygonLayer } from "@geoarrow/deck.gl-layers";
+import { bbox as turfBbox } from "@turf/bbox";
 import bboxPolygon from "@turf/bbox-polygon";
 import { featureCollection } from "@turf/helpers";
-import type { BBox, Feature, GeoJSON } from "geojson";
+import type { BBox, Feature, FeatureCollection, GeoJSON } from "geojson";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useEffect, useRef, type RefObject } from "react";
 import {
@@ -118,6 +119,7 @@ export default function Map() {
       updateTriggers: [picked, items],
     }),
   ];
+  console.log(geojson);
 
   if (stacGeoparquetTable) {
     layers.push(
@@ -229,7 +231,11 @@ function useStacValueLayerProperties(
           filled: true,
         };
       case "FeatureCollection":
-        return { geojson: undefined, bbox: undefined, filled: undefined };
+        return {
+          geojson: value.features as Feature[],
+          bbox: turfBbox(value as FeatureCollection),
+          filled: true,
+        };
     }
   } else {
     return { geojson: undefined, bbox: undefined, filled: undefined };

src/components/value.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from "@chakra-ui/react";
+import { Button, ButtonGroup, Stack } from "@chakra-ui/react";
 import { type ReactNode } from "react";
 import { LuExternalLink } from "react-icons/lu";
 import { MarkdownHooks } from "react-markdown";
@@ -28,17 +28,19 @@ export default function Value({
       title={(value.title as string) || value.id || value.type}
       titleSize="xl"
     >
-      {thumbnailAsset && <Thumbnail asset={thumbnailAsset}></Thumbnail>}
+      <Stack>
+        {thumbnailAsset && <Thumbnail asset={thumbnailAsset}></Thumbnail>}
 
-      {!!value.description && (
-        <Prose>
-          <MarkdownHooks>{value.description as string}</MarkdownHooks>
-        </Prose>
-      )}
+        {!!value.description && (
+          <Prose>
+            <MarkdownHooks>{value.description as string}</MarkdownHooks>
+          </Prose>
+        )}
 
-      {children}
+        {children}
 
-      {selfHref && <SelfHrefButtons href={selfHref}></SelfHrefButtons>}
+        {selfHref && <SelfHrefButtons href={selfHref}></SelfHrefButtons>}
+      </Stack>
     </Section>
   );
 }