@dxos/react-ui-geo 0.7.5-labs.071a3e2

package/src/components/Globe/Globe.tsx

@@ -0,0 +1,270 @@
+//
+// Copyright 2018 DXOS.org
+//
+
+import * as d3 from 'd3';
+import { type GeoProjection } from 'd3';
+import { type ControlPosition } from 'leaflet';
+import React, {
+  type PropsWithChildren,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { type Topology } from 'topojson-specification';
+
+import { type ThemedClassName, useDynamicRef } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import {
+  GlobeContextProvider,
+  type GlobeContextProviderProps,
+  type GlobeContextType,
+  useGlobeContext,
+} from '../../hooks';
+import {
+  type Features,
+  type Styles,
+  type StyleSet,
+  createLayers,
+  geoToPosition,
+  positionToRotation,
+  renderLayers,
+  timer,
+} from '../../util';
+import { ZoomControls, ActionControls, type ControlProps, controlPositions } from '../Toolbar';
+
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+const defaultStyles: Styles = {
+  background: {
+    fillStyle: '#111111',
+  },
+
+  water: {
+    fillStyle: '#123E6A',
+  },
+
+  hex: {
+    strokeStyle: 'green',
+    fillStyle: 'gray',
+    pointRadius: 1,
+  },
+
+  land: {
+    fillStyle: '#032153',
+  },
+
+  line: {
+    strokeStyle: '#111111',
+  },
+
+  point: {
+    fillStyle: '#111111',
+    strokeStyle: '#111111',
+    strokeWidth: 1,
+    pointRadius: 0.5,
+  },
+};
+
+export type GlobeController = {
+  canvas: HTMLCanvasElement;
+  projection: GeoProjection;
+} & Pick<GlobeContextType, 'scale' | 'translation' | 'rotation' | 'setScale' | 'setTranslation' | 'setRotation'>;
+
+export type ProjectionType = 'orthographic' | 'mercator' | 'transverse-mercator';
+
+const projectionMap: Record<ProjectionType, () => GeoProjection> = {
+  orthographic: d3.geoOrthographic,
+  mercator: d3.geoMercator,
+  'transverse-mercator': d3.geoTransverseMercator,
+};
+
+const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): GeoProjection => {
+  if (typeof type === 'string') {
+    const constructor = projectionMap[type] ?? d3.geoOrthographic;
+    return constructor();
+  }
+
+  return type ?? d3.geoOrthographic();
+};
+
+//
+// Root
+//
+
+type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProps>>;
+
+const GlobeRoot = ({ classNames, children, ...props }: GlobeRootProps) => {
+  const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+  return (
+    <div ref={ref} className={mx('relative flex grow overflow-hidden', classNames)}>
+      <GlobeContextProvider size={{ width, height }} {...props}>
+        {children}
+      </GlobeContextProvider>
+    </div>
+  );
+};
+
+//
+// Canvas
+//
+
+type GlobeCanvasProps = {
+  projection?: ProjectionType | GeoProjection;
+  topology?: Topology;
+  features?: Features;
+  styles?: StyleSet;
+};
+
+/**
+ * Basic globe renderer.
+ * https://github.com/topojson/world-atlas
+ */
+const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
+  ({ projection: _projection, topology, features, styles = defaultStyles }, forwardRef) => {
+    // Canvas.
+    const [canvas, setCanvas] = useState<HTMLCanvasElement>(null);
+    const canvasRef = (canvas: HTMLCanvasElement) => setCanvas(canvas);
+
+    // Projection.
+    const projection = useMemo(() => getProjection(_projection), [_projection]);
+
+    // Layers.
+    // TODO(burdon): Generate on the fly based on what is visible.
+    const layers = useMemo(() => {
+      return timer(() => createLayers(topology as Topology, features, styles));
+    }, [topology, features, styles]);
+
+    // State.
+    const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } =
+      useGlobeContext();
+
+    const scaleRef = useDynamicRef(scale);
+
+    // Update rotation.
+    useEffect(() => {
+      if (center) {
+        setScale(1);
+        setRotation(positionToRotation(geoToPosition(center)));
+      }
+    }, [center]);
+
+    // External controller.
+    const zooming = useRef(false);
+    useImperativeHandle<GlobeController, GlobeController>(
+      forwardRef,
+      () => {
+        return {
+          canvas,
+          projection,
+          center,
+          get scale() {
+            return scaleRef.current;
+          },
+          translation,
+          rotation,
+          setCenter,
+          setScale: (s) => {
+            if (typeof s === 'function') {
+              const is = d3.interpolateNumber(scaleRef.current, s(scaleRef.current));
+              // Stop easing if already zooming.
+              d3.transition()
+                .ease(zooming.current ? d3.easeLinear : d3.easeSinOut)
+                .duration(200)
+                .tween('scale', () => (t) => setScale(is(t)))
+                .on('end', () => {
+                  zooming.current = false;
+                });
+            } else {
+              setScale(s);
+            }
+          },
+          setTranslation,
+          setRotation,
+        };
+      },
+      [canvas],
+    );
+
+    // https://d3js.org/d3-geo/path#geoPath
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
+    const generator = useMemo(
+      () => canvas && projection && d3.geoPath(projection, canvas.getContext('2d', { alpha: false })),
+      [canvas, projection],
+    );
+
+    // Render on change.
+    useEffect(() => {
+      if (canvas && projection) {
+        timer(() => {
+          // https://d3js.org/d3-geo/projection
+          projection
+            .scale((Math.min(size.width, size.height) / 2) * scale)
+            .translate([size.width / 2 + (translation?.x ?? 0), size.height / 2 + (translation?.y ?? 0)])
+            .rotate(rotation ?? [0, 0, 0]);
+
+          renderLayers(generator, layers, scale);
+        });
+      }
+    }, [generator, size, scale, translation, rotation, layers]);
+
+    if (!size.width || !size.height) {
+      return null;
+    }
+
+    return <canvas ref={canvasRef} width={size.width} height={size.height} />;
+  },
+);
+
+const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) => {
+  const { size, scale, translation, rotation } = useGlobeContext();
+  return (
+    <div
+      className={mx(
+        'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded',
+        controlPositions[position],
+      )}
+    >
+      <pre className='font-mono text-xs text-green-700'>
+        {JSON.stringify({ size, scale, translation, rotation }, null, 2)}
+      </pre>
+    </div>
+  );
+};
+
+const GlobePanel = ({
+  position,
+  classNames,
+  children,
+}: ThemedClassName<PropsWithChildren & { position?: ControlPosition }>) => {
+  return <div className={mx('z-10 absolute overflow-hidden', controlPositions[position], classNames)}>{children}</div>;
+};
+
+const CustomControl = ({ position, children }: PropsWithChildren<{ position: ControlPosition }>) => {
+  return <div className={mx('z-10 absolute overflow-hidden', controlPositions[position])}>{children}</div>;
+};
+
+type GlobeControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
+
+export const Globe = {
+  Root: GlobeRoot,
+  Canvas: GlobeCanvas,
+  Zoom: ({ onAction, position = 'bottomleft', ...props }: GlobeControlProps) => (
+    <CustomControl position={position} {...props}>
+      <ZoomControls onAction={onAction} />
+    </CustomControl>
+  ),
+  Action: ({ onAction, position = 'bottomright', ...props }: GlobeControlProps) => (
+    <CustomControl position={position} {...props}>
+      <ActionControls onAction={onAction} />
+    </CustomControl>
+  ),
+  Debug: GlobeDebug,
+  Panel: GlobePanel,
+};
+
+export type { GlobeRootProps, GlobeCanvasProps };

package/src/components/Globe/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2019 DXOS.org
+//
+
+export * from './Globe';

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

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Map, type MapController } from './Map';
+import { useMapZoomHandler } from '../../hooks';
+
+const Render = () => {
+  const [controller, setController] = useState<MapController>();
+  const handleZoomAction = useMapZoomHandler(controller);
+
+  return (
+    <Map.Root>
+      <Map.Canvas ref={setController} />
+      <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
+      <Map.Action position='bottomright' />
+    </Map.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-geo/Map',
+  component: Map.Root,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

package/src/components/Map/Map.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// 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 { createRoot } from 'react-dom/client';
+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 { defaultTx, mx } from '@dxos/react-ui-theme';
+
+import { ActionControls, controlPositions, ZoomControls, type ControlProps } from '../Toolbar';
+import { type MapCanvasProps } from '../types';
+
+// TODO(burdon): Explore plugins: https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v4
+// TODO(burdon): react-leaflet v5 is not compatible with react 18.
+
+const defaults = {
+  // TODO(burdon): Guess location.
+  center: { lat: 51, lng: 0 } as L.LatLngExpression,
+  zoom: 4,
+};
+
+//
+// Root
+//
+
+type MapRootProps = ThemedClassName<MapContainerProps>;
+
+// https://react-leaflet.js.org/docs/api-map
+const MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }: MapRootProps) => {
+  return (
+    <MapContainer
+      className={mx('relative flex w-full h-full grow bg-baseSurface', classNames)}
+      attributionControl={false}
+      // TODO(burdon): Only if attention.
+      scrollWheelZoom={true}
+      zoomControl={false}
+      center={center}
+      zoom={zoom}
+      {...props}
+    />
+  );
+};
+
+//
+// Control
+//
+
+// TODO(burdon): Normalize with Globe.
+type MapController = {
+  setCenter: (center: LatLngExpression, zoom?: number) => void;
+  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) {
+        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>
+    );
+  },
+);
+
+//
+// Controls
+// Integrates with Leaflet custom controls.
+//
+
+const CustomControl = ({
+  position,
+  children,
+}: PropsWithChildren<{
+  position: ControlPosition;
+}>) => {
+  const map = useMap();
+
+  useEffect(() => {
+    const control = new Control({ position });
+    control.onAdd = () => {
+      const container = DomUtil.create('div', mx('!m-0', controlPositions[position]));
+      DomEvent.disableClickPropagation(container);
+      DomEvent.disableScrollPropagation(container);
+
+      const root = createRoot(container);
+      root.render(
+        <ThemeProvider tx={defaultTx}>
+          <Tooltip.Provider>{children}</Tooltip.Provider>
+        </ThemeProvider>,
+      );
+
+      return container;
+    };
+
+    control.addTo(map);
+    return () => {
+      control.remove();
+    };
+  }, [map, position, children]);
+
+  return null;
+};
+
+type MapControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
+
+//
+// Map
+//
+
+export const Map = {
+  Root: MapRoot,
+  Canvas: MapCanvas,
+  Zoom: ({ onAction, position = 'bottomleft', ...props }: MapControlProps) => (
+    <CustomControl position={position} {...props}>
+      <ZoomControls onAction={onAction} />
+    </CustomControl>
+  ),
+  Action: ({ onAction, position = 'bottomright', ...props }: MapControlProps) => (
+    <CustomControl position={position} {...props}>
+      <ActionControls onAction={onAction} />
+    </CustomControl>
+  ),
+};
+
+export { type MapCanvasProps, type MapController };

package/src/components/Map/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Map';

package/src/components/Toolbar/Controls.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ControlPosition } from 'leaflet';
+import React from 'react';
+
+import { IconButton, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+
+export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
+
+export type ControlProps = ThemedClassName<{
+  onAction?: (action: ControlAction) => void;
+}>;
+
+export const controlPositions: Record<ControlPosition, string> = {
+  topleft: 'top-2 left-2',
+  topright: 'top-2 right-2',
+  bottomleft: 'bottom-2 left-2',
+  bottomright: 'bottom-2 right-2',
+};
+
+export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  return (
+    <Toolbar.Root classNames={['gap-1', classNames]}>
+      <IconButton
+        //
+        icon='ph--plus--regular'
+        label='zoom in'
+        iconOnly
+        size={5}
+        classNames='px-0 aspect-square'
+        onClick={() => onAction?.('zoom-in')}
+      />
+      <IconButton
+        //
+        icon='ph--minus--regular'
+        label='zoom out'
+        iconOnly
+        size={5}
+        classNames='px-0 aspect-square'
+        onClick={() => onAction?.('zoom-out')}
+      />
+    </Toolbar.Root>
+  );
+};
+
+export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  return (
+    <Toolbar.Root classNames={['gap-1', classNames]}>
+      <IconButton
+        //
+        icon='ph--play--regular'
+        label='start'
+        iconOnly
+        size={5}
+        classNames='px-0 aspect-square'
+        onClick={() => onAction?.('start')}
+      />
+      <IconButton
+        //
+        icon='ph--globe-hemisphere-west--regular'
+        label='toggle'
+        iconOnly
+        size={5}
+        classNames='px-0 aspect-square'
+        onClick={() => onAction?.('toggle')}
+      />
+    </Toolbar.Root>
+  );
+};

package/src/components/Toolbar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Controls';

package/src/components/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2019 DXOS.org
+//
+
+export * from './types';
+
+export * from './Globe';
+export * from './Map';
+export * from './Toolbar';

package/src/components/types.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type LatLngLiteral } from 'leaflet';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+
+import { type MapMarker } from '../types';
+
+export type { LatLngLiteral };
+
+export type MapCanvasProps = ThemedClassName<{
+  markers?: MapMarker[];
+  zoom?: number;
+  center?: LatLngLiteral;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
+}>;

package/src/data.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Topology } from 'topojson-specification';
+
+export const loadTopology = async (): Promise<Topology> => {
+  return (await import('../data/countries-110m.ts')).default;
+};

package/src/hooks/context.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { createContext, type Dispatch, type PropsWithChildren, type SetStateAction, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { useControlledValue } from '@dxos/react-ui';
+
+import { type LatLng } from '../util';
+
+// TODO(burdon): Factor out common geometry types.
+export type Size = { width: number; height: number };
+export type Point = { x: number; y: number };
+export type Vector = [number, number, number];
+
+export type GlobeContextType = {
+  size: Size;
+  center: LatLng;
+  scale: number;
+  translation: Point;
+  rotation: Vector;
+  setCenter: Dispatch<SetStateAction<LatLng>>;
+  setScale: Dispatch<SetStateAction<number>>;
+  setTranslation: Dispatch<SetStateAction<Point>>;
+  setRotation: Dispatch<SetStateAction<Vector>>;
+};
+
+const GlobeContext = createContext<GlobeContextType>(undefined);
+
+export type GlobeContextProviderProps = PropsWithChildren<
+  Partial<Pick<GlobeContextType, 'size' | 'center' | 'scale' | 'translation' | 'rotation'>>
+>;
+
+export const GlobeContextProvider = ({
+  children,
+  size,
+  center: _center,
+  scale: _scale,
+  translation: _translation,
+  rotation: _rotation,
+}: GlobeContextProviderProps) => {
+  const [center, setCenter] = useControlledValue(_center);
+  const [scale, setScale] = useControlledValue(_scale);
+  const [translation, setTranslation] = useControlledValue<Point>(_translation);
+  const [rotation, setRotation] = useControlledValue<Vector>(_rotation);
+
+  return (
+    <GlobeContext.Provider
+      value={{ size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation }}
+    >
+      {children}
+    </GlobeContext.Provider>
+  );
+};
+
+export const useGlobeContext = () => {
+  return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));
+};