doc: fix failing stories due to data source CORS change

hkfb · Mar 10, 2024 · 0b192c7 · 0b192c7
1 parent 1bc0549
commit 0b192c7
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 35 deletions.
diff --git a/src/components/focus-gpx-map.stories.tsx b/src/components/focus-gpx-map.stories.tsx
@@ -20,9 +20,6 @@ FocusGpxMapSelect.args = {
 FocusGpxMapSelect.argTypes = {
   gpxUrl: {
     control: "select",
-    options: [
-      "Jotunheimen_rundt.gpx",
-      "https://cdn.cyclingstage.com/images/tour-de-france/2023/stage-7-parcours.gpx",
-    ],
+    options: ["Jotunheimen_rundt.gpx", "Teide.tcx"],
   },
 };
diff --git a/src/components/focus-gpx-street-map.stories.tsx b/src/components/focus-gpx-street-map.stories.tsx
@@ -20,9 +20,6 @@ FocusGpxStreetMapSelect.args = {
 FocusGpxStreetMapSelect.argTypes = {
   gpxUrl: {
     control: "select",
-    options: [
-      "Jotunheimen_rundt.gpx",
-      "https://cdn.cyclingstage.com/images/tour-de-france/2023/stage-7-parcours.gpx",
-    ],
+    options: ["Jotunheimen_rundt.gpx", "Teide.tcx"],
   },
 };
diff --git a/src/components/gpx-map.stories.tsx b/src/components/gpx-map.stories.tsx
@@ -15,15 +15,15 @@ type Story = StoryObj<typeof GpxMap>;
 
 export const Default: Story = {};
 
-export const JotunheimenRundt: Story = {
+export const ElTeide: Story = {
   args: {
     initialViewState: {
-      longitude: 8.3,
-      latitude: 61.4,
-      zoom: 8,
+      latitude: 28.2,
+      longitude: -16.6,
+      zoom: 10,
     },
 
-    gpx: "Jotunheimen_rundt.gpx",
+    gpx: "Teide.tcx",
   },
 };
 

diff --git a/src/components/gpx-map.tsx b/src/components/gpx-map.tsx
@@ -4,17 +4,16 @@ import { DeckGL, DeckGLProps } from "@deck.gl/react/typed";
 import { LayersList } from "@deck.gl/core/typed";
 import { GpxLayer } from "../layers/gpx-layer";
 
-export const DEFAULT_GPX_FILE =
-  "https://cdn.cyclingstage.com/images/tour-de-france/2023/stage-7-parcours.gpx";
+export const DEFAULT_GPX_FILE = "Jotunheimen_rundt.gpx";
 
 const defaultLayerProps = {
   id: "gpx-layer",
   data: DEFAULT_GPX_FILE,
 };
 
 export const INITIAL_VIEW_STATE = {
-  longitude: -0.48,
-  latitude: 44.2,
+  longitude: 8.3,
+  latitude: 61.4,
   zoom: 8,
 };
 

diff --git a/src/components/gpx-street-map.stories.tsx b/src/components/gpx-street-map.stories.tsx
@@ -9,18 +9,13 @@ export function GpxStreetMapDefault() {
   return <GpxStreetMap />;
 }
 
-export function GpxStreetMapJotunheimenRundt() {
+export function ElTeide() {
   const initialViewState = {
-    longitude: 8.3,
-    latitude: 61.4,
-    zoom: 8,
+    latitude: 28.2,
+    longitude: -16.6,
+    zoom: 10,
   };
-  return (
-    <GpxStreetMap
-      gpx={"Jotunheimen_rundt.gpx"}
-      initialViewState={initialViewState}
-    />
-  );
+  return <GpxStreetMap gpx={"Teide.tcx"} initialViewState={initialViewState} />;
 }
 
 export function GpxStreetMapText() {

diff --git a/src/layers/gpx-layer.ts b/src/layers/gpx-layer.ts
@@ -4,12 +4,12 @@ import {
   PathLayer,
 } from "@deck.gl/layers/typed";
 import { Color } from "@deck.gl/core/typed";
-import { GPXLoader } from "@loaders.gl/kml";
+import { GPXLoader, TCXLoader } from "@loaders.gl/kml";
 import * as _ from "lodash";
 
 export class GpxLayer extends GeoJsonLayer {
   constructor(props: GeoJsonLayerProps) {
-    props.loaders = [GPXLoader];
+    props.loaders = [GPXLoader, TCXLoader];
     super(props);
   }
 

diff --git a/src/layers/trip-gpx-layer.stories.tsx b/src/layers/trip-gpx-layer.stories.tsx
@@ -3,6 +3,7 @@ import { DeckGL } from "@deck.gl/react/typed";
 import { TripGpxLayer } from "./trip-gpx-layer";
 import { GpxHillMap } from "../components/gpx-hill-map";
 import { DEFAULT_GPX_FILE } from "../components/gpx-map";
+import { TEIDE_ACTIVITY_FILE } from "../constant.stories";
 
 export default {
   title: "GPX Trip Layer",
@@ -74,24 +75,25 @@ TripGpxLayerMap.argTypes = {
   time: { control: { type: "range", min: 1000, max: 46000 } },
 };
 
-export function TripGpxLayerTdf({ time }: { time: number }) {
+export function TripGpxLayerSynthetic({ time }: { time: number }) {
   const layer = React.useMemo(
     () =>
       new TripGpxLayer({
         ...defaultLayerProps,
-        data: DEFAULT_GPX_FILE,
+        data: "synthetic.gpx",
         currentTime: time,
+        trailLength: 100000,
       }),
     [time, defaultLayerProps]
   );
   return (
-    <GpxHillMap gpx={DEFAULT_GPX_FILE} annotationLayers={[layer]}></GpxHillMap>
+    <GpxHillMap gpx={"synthetic.gpx"} annotationLayers={[layer]}></GpxHillMap>
   );
 }
 
-TripGpxLayerTdf.args = { time: 0 };
-TripGpxLayerTdf.argTypes = {
-  time: { control: { type: "range", min: 0, max: 16900 } },
+TripGpxLayerSynthetic.args = { time: 0 };
+TripGpxLayerSynthetic.argTypes = {
+  time: { control: { type: "range", min: 0, max: 6000000 } },
 };
 
 export function TripGpxLayerAnimate({ velocity }: { velocity: number }) {