Merge pull request #9 from hkfb/annotation

test: Annotations story

src/components/gpx-map.stories.tsx

@@ -1,24 +1,31 @@
 import * as React from "react";
-import { GpxMap } from "./gpx-map";
+import type { Meta, StoryObj } from "@storybook/react";
+import { GpxMap, DEFAULT_GPX_FILE } from "./gpx-map";
+import { TripGpxLayer } from "../layers/trip-gpx-layer";
 
-export default {
+const meta: Meta<typeof GpxMap> = {
   title: "GPX Map",
+  tags: ["autodocs"],
+  component: GpxMap,
 };
 
-export function GpxMapDefault() {
-  return <GpxMap />;
-}
+export default meta;
 
-export function GpxMapJotunheimenRundt() {
-  const initialViewState = {
-    longitude: 8.3,
-    latitude: 61.4,
-    zoom: 8,
-  };
+type Story = StoryObj<typeof GpxMap>;
 
-  const gpxUrl = "Jotunheimen_rundt.gpx";
-  return <GpxMap gpx={gpxUrl} initialViewState={initialViewState} />;
-}
+export const Default: Story = {};
+
+export const JotunheimenRundt: Story = {
+  args: {
+    initialViewState: {
+      longitude: 8.3,
+      latitude: 61.4,
+      zoom: 8,
+    },
+
+    gpx: "Jotunheimen_rundt.gpx",
+  },
+};
 
 export function GpxMapText() {
   return (
@@ -27,3 +34,11 @@ export function GpxMapText() {
     </GpxMap>
   );
 }
+
+export const AnnotationLayer: Story = {
+  args: {
+    annotationLayers: [
+      new TripGpxLayer({ id: "trip", data: DEFAULT_GPX_FILE }),
+    ],
+  },
+};