@dxos/react-ui-geo 0.7.5-labs.ea4b4c2 → 0.7.5-labs.f400bbc

package/src/components/Map/Map.stories.tsx

@@ -11,29 +11,51 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Map, type MapController } from './Map';
 import { useMapZoomHandler } from '../../hooks';
+import { type MapMarker } from '../../types';
 
-const Render = () => {
+const Render = ({ markers }) => {
   const [controller, setController] = useState<MapController>();
   const handleZoomAction = useMapZoomHandler(controller);
 
   return (
     <Map.Root>
-      <Map.Canvas ref={setController} />
+      <Map.Canvas ref={setController} markers={markers} />
       <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
       <Map.Action position='bottomright' />
     </Map.Root>
   );
 };
 
-const meta: Meta = {
+const meta: Meta<typeof Render> = {
   title: 'ui/react-ui-geo/Map',
-  component: Map.Root,
-  render: Render,
+  component: Render,
   decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof Render>;
 
 export const Default: Story = {};
+
+export const WithMarkers: Story = {
+  args: {
+    markers: [
+      { id: 'tokyo', title: 'Tokyo', location: { lat: 35.6762, lng: 139.6503 } },
+      { id: 'sydney', title: 'Sydney', location: { lat: -33.8688, lng: 151.2093 } },
+      { id: 'auckland', title: 'Auckland', location: { lat: -36.8509, lng: 174.7645 } },
+      { id: 'new-delhi', title: 'New Delhi', location: { lat: 28.6139, lng: 77.209 } },
+      { id: 'manila', title: 'Manila', location: { lat: 14.5995, lng: 120.9842 } },
+      { id: 'beijing', title: 'Beijing', location: { lat: 39.9042, lng: 116.4074 } },
+      { id: 'seoul', title: 'Seoul', location: { lat: 37.5665, lng: 126.978 } },
+      { id: 'bangkok', title: 'Bangkok', location: { lat: 13.7563, lng: 100.5018 } },
+      { id: 'singapore', title: 'Singapore', location: { lat: 1.3521, lng: 103.8198 } },
+      { id: 'kuala-lumpur', title: 'Kuala Lumpur', location: { lat: 3.139, lng: 101.6869 } },
+      { id: 'jakarta', title: 'Jakarta', location: { lat: -6.2088, lng: 106.8456 } },
+      { id: 'hanoi', title: 'Hanoi', location: { lat: 21.0285, lng: 105.8542 } },
+      { id: 'phnom-penh', title: 'Phnom Penh', location: { lat: 11.5564, lng: 104.9282 } },
+      { id: 'vientiane', title: 'Vientiane', location: { lat: 17.9757, lng: 102.6331 } },
+      { id: 'yangon', title: 'Yangon', location: { lat: 16.8661, lng: 96.1951 } },
+    ] as MapMarker[],
+  },
+};

package/src/components/Map/Map.tsx

@@ -5,16 +5,15 @@
 // eslint-disable-next-line no-restricted-imports
 import 'leaflet/dist/leaflet.css';
 
-import type L from 'leaflet';
-import { type ControlPosition, Control, DomEvent, DomUtil, type LatLngExpression, latLngBounds } from 'leaflet';
-import React, { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
+import L, { Control, DomEvent, DomUtil, latLngBounds, type ControlPosition, type LatLngExpression } from 'leaflet';
+import React, { forwardRef, useEffect, useImperativeHandle, type PropsWithChildren } from 'react';
 import { createRoot } from 'react-dom/client';
+import type { MapContainerProps } from 'react-leaflet';
 import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
-import { type MapContainerProps } from 'react-leaflet/lib/MapContainer';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { debounce } from '@dxos/async';
-import { Tooltip, ThemeProvider, type ThemedClassName } from '@dxos/react-ui';
+import { ThemeProvider, Tooltip, type ThemedClassName } from '@dxos/react-ui';
 import { defaultTx, mx } from '@dxos/react-ui-theme';
 
 import { ActionControls, controlPositions, ZoomControls, type ControlProps } from '../Toolbar';
@@ -61,84 +60,96 @@ type MapController = {
   setZoom: (cb: (zoom: number) => number) => void;
 };
 
-const MapCanvas = forwardRef<MapController, MapCanvasProps>(
-  ({ markers = [], center, zoom, onChange }, forwardedRef) => {
-    const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-    const map = useMap();
-
-    useImperativeHandle(
-      forwardedRef,
-      () => ({
-        setCenter: (center: LatLngExpression, zoom?: number) => {
-          map.setView(center, zoom);
-        },
-        setZoom: (cb) => {
-          map.setZoom(cb(map.getZoom()));
-        },
-      }),
-      [map],
-    );
-
-    // Resize.
-    useEffect(() => {
-      if (width && height) {
-        map.invalidateSize();
-      }
-    }, [width, height]);
-
-    // Position.
-    useEffect(() => {
-      if (center) {
+const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center, zoom, onChange }, forwardedRef) => {
+  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
+  const map = useMap();
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      setCenter: (center: LatLngExpression, zoom?: number) => {
         map.setView(center, zoom);
-      } else if (zoom !== undefined) {
-        map.setZoom(zoom);
-      }
-    }, [center, zoom]);
-
-    // Events.
-    useEffect(() => {
-      const handler = debounce(() => {
-        onChange?.({ center: map.getCenter(), zoom: map.getZoom() });
-      }, 100);
-      map.on('move', handler);
-      map.on('zoom', handler);
-      return () => {
-        map.off('move', handler);
-        map.off('zoom', handler);
-      };
-    }, [map, onChange]);
-
-    // Set the viewport around the markers, or show the whole world map if `markers` is empty.
-    useEffect(() => {
-      if (markers.length > 0) {
-        const bounds = latLngBounds(markers.map((marker) => marker.location));
-        map.fitBounds(bounds);
-      } else {
-        map.setView(defaults.center, defaults.zoom);
-      }
-    }, [markers]);
-
-    return (
-      <div ref={ref} className='flex w-full h-full overflow-hidden bg-baseSurface'>
-        {/* Map tiles. */}
-        <TileLayer
-          className='dark:filter dark:grayscale dark:invert'
-          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-        />
-
-        {/* Markers. */}
-        {/* TODO(burdon): Marker icon doesn't load on mobile? */}
-        {markers.map(({ id, title, location: { lat, lng } }) => {
-          return (
-            <Marker key={id} position={{ lat, lng }}>
-              {title && <Popup>{title}</Popup>}
-            </Marker>
-          );
-        })}
-      </div>
-    );
-  },
-);
+      },
+      setZoom: (cb) => {
+        map.setZoom(cb(map.getZoom()));
+      },
+    }),
+    [map],
+  );
+
+  // Resize.
+  useEffect(() => {
+    if (width && height) {
+      map.invalidateSize();
+    }
+  }, [width, height]);
+
+  // Position.
+  useEffect(() => {
+    if (center) {
+      map.setView(center, zoom);
+    } else if (zoom !== undefined) {
+      map.setZoom(zoom);
+    }
+  }, [center, zoom]);
+
+  // Events.
+  useEffect(() => {
+    const handler = debounce(() => {
+      onChange?.({ center: map.getCenter(), zoom: map.getZoom() });
+    }, 100);
+    map.on('move', handler);
+    map.on('zoom', handler);
+    return () => {
+      map.off('move', handler);
+      map.off('zoom', handler);
+    };
+  }, [map, onChange]);
+
+  // Set the viewport around the markers, or show the whole world map if `markers` is empty.
+  useEffect(() => {
+    if (markers.length > 0) {
+      const bounds = latLngBounds(markers.map((marker) => marker.location));
+      map.fitBounds(bounds);
+    } else {
+      map.setView(defaults.center, defaults.zoom);
+    }
+  }, [markers]);
+
+  return (
+    <div ref={ref} className='flex w-full h-full overflow-hidden bg-baseSurface'>
+      {/* Map tiles. */}
+      <TileLayer
+        className='dark:filter dark:grayscale dark:invert'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+
+      {/* Markers. */}
+      {markers?.map(({ id, title, location: { lat, lng } }) => {
+        return (
+          <Marker
+            key={id}
+            position={{ lat, lng }}
+            icon={
+              // TODO(burdon): Create custom icon from bundled assets.
+              new L.Icon({
+                iconUrl: 'https://dxos.network/marker-icon.png',
+                iconRetinaUrl: 'https://dxos.network/marker-icon-2x.png',
+                shadowUrl: 'https://dxos.network/marker-shadow.png',
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41],
+              })
+            }
+          >
+            {title && <Popup>{title}</Popup>}
+          </Marker>
+        );
+      })}
+    </div>
+  );
+});
 
 //
 // Controls

package/src/components/types.ts

@@ -8,10 +8,11 @@ import { type ThemedClassName } from '@dxos/react-ui';
 
 import { type MapMarker } from '../types';
 
-export type { LatLngLiteral };
+export { type LatLngLiteral };
 
 export type MapCanvasProps = ThemedClassName<{
   markers?: MapMarker[];
+  selected?: string[];
   zoom?: number;
   center?: LatLngLiteral;
   onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;

package/src/hooks/useDrag.ts

@@ -49,7 +49,7 @@ export const useDrag = (controller?: GlobeController | null, options: DragOption
     return () => {
       cancelDrag(d3.select(canvas));
     };
-  }, [controller, options]);
+  }, [controller, JSON.stringify(options)]);
 };
 
 const cancelDrag = (node) => node.on('.drag', null);

package/src/hooks/useTour.ts

@@ -3,29 +3,39 @@
 //
 
 import * as d3 from 'd3';
-import { useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import versor from 'versor';
 
+import { log } from '@dxos/log';
+
 import type { GlobeController } from '../components';
-import { type Features, geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
+import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
 
 const TRANSITION_NAME = 'globe-tour';
 
 const defaultDuration = 1_500;
 
 export type TourOptions = {
+  running?: boolean;
   disabled?: boolean;
-  styles?: StyleSet;
   duration?: number;
+  loop?: boolean;
+  tilt?: number;
+  autoRotate?: boolean;
+  styles?: StyleSet;
 };
 
 /**
  * Iterates between points.
  * Inspired by: https://observablehq.com/@mbostock/top-100-cities
  */
-export const useTour = (controller?: GlobeController | null, features?: Features, options: TourOptions = {}) => {
+export const useTour = (
+  controller?: GlobeController | null,
+  points?: LatLng[],
+  options: TourOptions = {},
+): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = d3.selection();
-  const [running, setRunning] = useState(false);
+  const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {
       selection.interrupt(TRANSITION_NAME);
@@ -39,10 +49,15 @@ export const useTour = (controller?: GlobeController | null, features?: Features
         const context = canvas.getContext('2d', { alpha: false });
         const path = d3.geoPath(projection, context).pointRadius(2);
 
-        const tilt = 0;
+        const tilt = options.tilt ?? 0;
         let last: LatLng;
         try {
-          for (const next of features.points) {
+          const p = [...points];
+          if (options.loop) {
+            p.push(p[0]);
+          }
+
+          for (const next of p) {
             if (!running) {
               break;
             }
@@ -83,8 +98,10 @@ export const useTour = (controller?: GlobeController | null, features?: Features
                 context.restore();
 
                 // TODO(burdon): This has to come after rendering above. Add to features to correct order?
-                projection.rotate(iv(t));
-                setRotation(projection.rotate());
+                if (options.autoRotate) {
+                  projection.rotate(iv(t));
+                  setRotation(projection.rotate());
+                }
               });
 
             // Throws if interrupted.
@@ -92,6 +109,8 @@ export const useTour = (controller?: GlobeController | null, features?: Features
             last = next;
           }
         } catch (err) {
+          log.catch(err);
+        } finally {
           setRunning(false);
         }
       });
@@ -101,14 +120,7 @@ export const useTour = (controller?: GlobeController | null, features?: Features
         selection.interrupt(TRANSITION_NAME);
       };
     }
-  }, [controller, running]);
-
-  return [
-    () => {
-      if (!options.disabled) {
-        setRunning(true);
-      }
-    },
-    () => setRunning(false),
-  ];
+  }, [controller, running, JSON.stringify(options)]);
+
+  return [running, setRunning];
 };

package/src/util/debug.ts

@@ -12,5 +12,6 @@ export const timer = <T = void>(cb: () => T): T => {
     // eslint-disable-next-line no-console
     console.log({ t, data });
   }
+
   return data;
 };

package/src/util/render.ts

@@ -11,7 +11,17 @@ import { type LatLng, geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;
 
-export type Style = 'water' | 'graticule' | 'land' | 'border' | 'dots' | 'point' | 'line' | 'cursor' | 'arc';
+export type Style =
+  | 'background'
+  | 'water'
+  | 'graticule'
+  | 'land'
+  | 'border'
+  | 'dots'
+  | 'point'
+  | 'line'
+  | 'cursor'
+  | 'arc';
 
 export type StyleSet = Partial<Record<Style, Styles>>;
 
@@ -108,16 +118,20 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
 /**
  * Render layers created above.
  */
-export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: number) => {
+export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: number, styles: StyleSet) => {
   const context: CanvasRenderingContext2D = generator.context();
   const {
     canvas: { width, height },
   } = context;
   context.reset();
 
-  // TODO(burdon): Option.
   // Clear background.
-  context.clearRect(0, 0, width, height);
+  if (styles.background) {
+    context.fillStyle = styles.background.fillStyle;
+    context.fillRect(0, 0, width, height);
+  } else {
+    context.clearRect(0, 0, width, height);
+  }
 
   // Render features.
   // https://github.com/d3/d3-geo#_path