@dxos/solid-ui-geo 0.0.0

package/src/components/Map/Map.tsx

@@ -0,0 +1,333 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import 'leaflet/dist/leaflet.css';
+
+import L, { type ControlPosition, type LatLngLiteral, latLngBounds } from 'leaflet';
+import {
+  type Accessor,
+  type JSX,
+  type Setter,
+  Show,
+  createContext,
+  createEffect,
+  createSignal,
+  onCleanup,
+  onMount,
+  useContext,
+} from 'solid-js';
+
+import { type GeoMarker } from '../../types';
+import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
+
+// TODO(burdon): Guess initial location.
+
+const defaults = {
+  center: { lat: 51, lng: 0 } as L.LatLngLiteral,
+  zoom: 4,
+} as const;
+
+//
+// Controller
+//
+
+export type MapController = {
+  setCenter: (center: LatLngLiteral, zoom?: number) => void;
+  setZoom: (cb: (zoom: number) => number) => void;
+};
+
+//
+// Context
+//
+
+type MapContextValue = {
+  map: Accessor<L.Map | null>;
+  attention: Accessor<boolean>;
+  setAttention: Setter<boolean>;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
+};
+
+const MapContext = createContext<MapContextValue>();
+
+const useMapContext = (displayName: string) => {
+  const context = useContext(MapContext);
+  if (!context) {
+    throw new Error(`${displayName} must be used within Map.Root`);
+  }
+  return context;
+};
+
+//
+// Root
+//
+
+type MapRootProps = {
+  children: JSX.Element;
+  ref?: (controller: MapController) => void;
+  class?: string;
+  scrollWheelZoom?: boolean;
+  doubleClickZoom?: boolean;
+  touchZoom?: boolean;
+  center?: LatLngLiteral;
+  zoom?: number;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
+};
+
+/**
+ * https://leafletjs.com/reference.html#map
+ */
+
+const MapRoot = (props: MapRootProps) => {
+  let mapContainer: HTMLDivElement | undefined;
+  const [map, setMap] = createSignal<L.Map | null>(null);
+  const [attention, setAttention] = createSignal(false);
+
+  onMount(() => {
+    if (!mapContainer) return;
+
+    const leafletMap = L.map(mapContainer, {
+      center: props.center ?? defaults.center,
+      zoom: props.zoom ?? defaults.zoom,
+      attributionControl: false,
+      zoomControl: false,
+      scrollWheelZoom: props.scrollWheelZoom ?? true,
+      doubleClickZoom: props.doubleClickZoom ?? true,
+      touchZoom: props.touchZoom ?? true,
+    });
+
+    setMap(leafletMap);
+
+    // Set up controller
+    if (props.ref) {
+      props.ref({
+        setCenter: (center: LatLngLiteral, zoom?: number) => {
+          leafletMap.setView(center, zoom);
+        },
+        setZoom: (cb: (zoom: number) => number) => {
+          leafletMap.setZoom(cb(leafletMap.getZoom()));
+        },
+      });
+    }
+
+    onCleanup(() => {
+      leafletMap.remove();
+    });
+  });
+
+  // Enable/disable scroll wheel zoom based on attention
+  createEffect(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+
+    if (attention()) {
+      leafletMap.scrollWheelZoom.enable();
+    } else {
+      leafletMap.scrollWheelZoom.disable();
+    }
+  });
+
+  return (
+    <MapContext.Provider value={{ map, attention, setAttention, onChange: props.onChange }}>
+      <div
+        ref={mapContainer}
+        class={`group relative grid h-full w-full bg-gray-100 dark:bg-gray-900 ${props.class ?? ''}`}
+        style={{ 'z-index': '0' }}
+      />
+      <Show when={map()}>{props.children}</Show>
+    </MapContext.Provider>
+  );
+};
+
+//
+// Tiles
+//
+
+const MapTiles = () => {
+  const { map, onChange, attention } = useMapContext(MapTiles.name);
+  let tileLayer: L.TileLayer | null = null;
+
+  createEffect(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+
+    const att = attention();
+    tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      detectRetina: true,
+      keepBuffer: 4,
+      className: `dark:grayscale dark:invert ${att ? '' : 'opacity-80'}`,
+    });
+
+    tileLayer.addTo(leafletMap);
+
+    // Set up event listeners
+    leafletMap.on('zoomstart', (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom(),
+      });
+    });
+
+    onCleanup(() => {
+      if (tileLayer) {
+        tileLayer.remove();
+        tileLayer = null;
+      }
+    });
+  });
+
+  // Update tile layer class when attention changes
+  createEffect(() => {
+    const att = attention();
+    if (tileLayer) {
+      const container = tileLayer.getContainer();
+      if (container) {
+        container.className = `dark:grayscale dark:invert ${att ? '' : 'opacity-80'}`;
+      }
+    }
+  });
+
+  return null;
+};
+
+//
+// Markers
+//
+
+type MapMarkersProps = {
+  markers?: Accessor<GeoMarker[]>;
+};
+
+const MapMarkers = (props: MapMarkersProps) => {
+  const { map } = useMapContext(MapMarkers.name);
+  const leafletMarkers: L.Marker[] = [];
+  let lastMarkerIds = new Set<string>();
+
+  // Clean up all markers when component unmounts
+  onCleanup(() => {
+    leafletMarkers.forEach((marker) => marker.remove());
+    leafletMarkers.length = 0;
+  });
+
+  createEffect(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+
+    const markerList = props.markers?.() ?? [];
+    const currentIds = new Set(markerList.map((m) => m.id));
+
+    // Skip if the markers haven't actually changed
+    if (
+      currentIds.size === lastMarkerIds.size &&
+      [...currentIds].every((id) => lastMarkerIds.has(id)) &&
+      leafletMarkers.length > 0
+    ) {
+      return;
+    }
+
+    // Clear existing markers
+    leafletMarkers.forEach((marker) => marker.remove());
+    leafletMarkers.length = 0;
+    lastMarkerIds = currentIds;
+
+    if (markerList.length > 0) {
+      const bounds = latLngBounds(markerList.map((marker) => marker.location));
+      leafletMap.fitBounds(bounds);
+
+      // Add new markers
+      markerList.forEach(({ title, location }) => {
+        const marker = L.marker(location, {
+          icon: 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],
+          }),
+        });
+
+        if (title) {
+          marker.bindPopup(title);
+        }
+
+        marker.addTo(leafletMap);
+        leafletMarkers.push(marker);
+      });
+    } else {
+      leafletMap.setView(defaults.center, defaults.zoom);
+    }
+  });
+
+  return null;
+};
+
+//
+// Controls
+//
+
+const CustomControl = (props: { children: JSX.Element; position: ControlPosition }) => {
+  const { map: mapAccessor } = useMapContext(CustomControl.name);
+  let controlContainer: HTMLDivElement | undefined;
+
+  createEffect(() => {
+    const map = mapAccessor();
+    if (!map || !controlContainer) return;
+
+    const Control = L.Control.extend({
+      onAdd: () => {
+        const container = L.DomUtil.create('div', `${controlPositions[props.position]} !m-0`);
+        L.DomEvent.disableClickPropagation(container);
+        L.DomEvent.disableScrollPropagation(container);
+
+        if (controlContainer) {
+          container.appendChild(controlContainer);
+        }
+
+        return container;
+      },
+    });
+
+    const control = new Control({ position: props.position });
+    control.addTo(map);
+
+    onCleanup(() => {
+      control.remove();
+    });
+  });
+
+  return (
+    <div ref={controlContainer} style={{ display: 'contents' }}>
+      {props.children}
+    </div>
+  );
+};
+
+type MapControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
+
+const MapZoom = (props: MapControlProps) => (
+  <CustomControl position={props.position ?? 'bottomleft'}>
+    <ZoomControls onAction={props.onAction} />
+  </CustomControl>
+);
+
+const MapAction = (props: MapControlProps) => (
+  <CustomControl position={props.position ?? 'bottomright'}>
+    <ActionControls onAction={props.onAction} />
+  </CustomControl>
+);
+
+//
+// Map
+//
+
+export const Map = {
+  Root: MapRoot,
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction,
+};
+
+export { type MapRootProps, type MapMarkersProps, type MapControlProps };

package/src/components/Map/index.ts

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

package/src/components/Toolbar/Controls.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ControlPosition } from 'leaflet';
+import { type JSX } from 'solid-js';
+
+export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
+
+export type ControlProps = {
+  class?: string;
+  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 = (props: ControlProps): JSX.Element => {
+  return (
+    <div class={`flex flex-row gap-2 ${props.class ?? ''}`}>
+      <button
+        type='button'
+        class='dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center'
+        onClick={() => props.onAction?.('zoom-in')}
+        title='Zoom in'
+      >
+        <span class='text-xl'>+</span>
+      </button>
+      <button
+        type='button'
+        class='dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center'
+        onClick={() => props.onAction?.('zoom-out')}
+        title='Zoom out'
+      >
+        <span class='text-xl'>−</span>
+      </button>
+    </div>
+  );
+};
+
+export const ActionControls = (props: ControlProps): JSX.Element => {
+  return (
+    <div class={`flex flex-row gap-2 ${props.class ?? ''}`}>
+      <button
+        type='button'
+        class='dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center'
+        onClick={() => props.onAction?.('start')}
+        title='Start'
+      >
+        <span class='text-xl'>▶</span>
+      </button>
+      <button
+        type='button'
+        class='dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center'
+        onClick={() => props.onAction?.('toggle')}
+        title='Toggle'
+      >
+        <span class='text-xl'>🌍</span>
+      </button>
+    </div>
+  );
+};

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,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Globe';
+export * from './Map';
+export * from './Toolbar';

package/src/data.ts

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

package/src/hooks/context.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Accessor, type JSX, type Setter, createContext, createEffect, createSignal, useContext } from 'solid-js';
+
+import { raise } from '@dxos/debug';
+
+import { type LatLngLiteral } from '../types';
+
+// 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: Accessor<Size>;
+  center: Accessor<LatLngLiteral | undefined>;
+  zoom: Accessor<number>;
+  translation: Accessor<Point | undefined>;
+  rotation: Accessor<Vector | undefined>;
+  setCenter: Setter<LatLngLiteral | undefined>;
+  setZoom: Setter<number>;
+  setTranslation: Setter<Point | undefined>;
+  setRotation: Setter<Vector | undefined>;
+};
+
+const defaults = {
+  center: { lat: 51, lng: 0 } as LatLngLiteral,
+  zoom: 4,
+} as const;
+
+const GlobeContext = createContext<GlobeContextType>();
+
+export type GlobeContextProviderProps = {
+  children: JSX.Element;
+  size?: Size;
+  center?: LatLngLiteral;
+  zoom?: number;
+  translation?: Point;
+  rotation?: Vector;
+};
+
+export const GlobeContextProvider = (props: GlobeContextProviderProps) => {
+  const [size, setSize] = createSignal<Size>(props.size ?? { width: 0, height: 0 });
+  const [center, setCenter] = createSignal<LatLngLiteral | undefined>(props.center ?? defaults.center);
+  const [zoom, setZoom] = createSignal(props.zoom ?? defaults.zoom);
+  const [translation, setTranslation] = createSignal<Point | undefined>(props.translation);
+  const [rotation, setRotation] = createSignal<Vector | undefined>(props.rotation);
+
+  // Update size when prop changes
+  createEffect(() => {
+    if (props.size) {
+      setSize(props.size);
+    }
+  });
+
+  return (
+    <GlobeContext.Provider
+      value={{
+        size,
+        center,
+        zoom,
+        translation,
+        rotation,
+        setCenter,
+        setZoom,
+        setTranslation,
+        setRotation,
+      }}
+    >
+      {props.children}
+    </GlobeContext.Provider>
+  );
+};
+
+export const useGlobeContext = () => {
+  return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));
+};

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './context';
+export * from './useDrag';
+export * from './useGlobeZoomHandler';
+export * from './useMapZoomHandler';
+export * from './useSpinner';
+export * from './useTour';

package/src/hooks/useDrag.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { select } from 'd3';
+import { createEffect, onCleanup } from 'solid-js';
+
+import { type GlobeController } from '../components';
+import { geoInertiaDrag } from '../util';
+
+export type GlobeDragEvent = {
+  type: 'start' | 'move' | 'end';
+  controller: GlobeController;
+};
+
+export type DragOptions = {
+  disabled?: boolean;
+  duration?: number;
+  xAxis?: boolean; // TODO(burdon): Generalize.
+  onUpdate?: (event: GlobeDragEvent) => void;
+};
+
+/**
+ * Allows user to drag globe.
+ */
+export const useDrag = (controller?: GlobeController | null, options: DragOptions = {}) => {
+  createEffect(() => {
+    const canvas = controller?.canvas;
+    if (!canvas || options.disabled) {
+      return;
+    }
+
+    geoInertiaDrag(
+      select(canvas),
+      () => {
+        controller.setRotation(controller.projection.rotate());
+        options.onUpdate?.({ type: 'move', controller });
+      },
+      controller.projection,
+      {
+        xAxis: options.xAxis,
+        time: 3_000,
+        start: () => options.onUpdate?.({ type: 'start', controller }),
+        finish: () => options.onUpdate?.({ type: 'end', controller }),
+      },
+    );
+
+    onCleanup(() => {
+      cancelDrag(select(canvas));
+    });
+  });
+};
+
+const cancelDrag = (node) => node.on('.drag', null);

package/src/hooks/useGlobeZoomHandler.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ControlProps, type GlobeController } from '../components';
+
+const ZOOM_FACTOR = 0.1;
+
+export const useGlobeZoomHandler = (controller: GlobeController | null | undefined): ControlProps['onAction'] => {
+  return (event) => {
+    if (!controller) {
+      return;
+    }
+
+    switch (event) {
+      case 'zoom-in': {
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
+        break;
+      }
+      case 'zoom-out': {
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
+        break;
+      }
+    }
+  };
+};

package/src/hooks/useMapZoomHandler.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ControlProps, type MapController } from '../components';
+
+export const useMapZoomHandler = (controller: MapController | null | undefined): ControlProps['onAction'] => {
+  return (event) => {
+    if (!controller) {
+      return;
+    }
+
+    switch (event) {
+      case 'zoom-in': {
+        controller.setZoom((scale) => scale + 1);
+        break;
+      }
+      case 'zoom-out': {
+        controller.setZoom((scale) => scale - 1);
+        break;
+      }
+    }
+  };
+};

package/src/hooks/useSpinner.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { timer as d3Timer } from 'd3';
+import { type Timer } from 'd3';
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+
+import { type GlobeController } from '../components';
+
+import { type Vector } from './context';
+
+export type SpinnerOptions = {
+  disabled?: boolean;
+  delta?: Vector;
+};
+
+/**
+ * Rotates globe.
+ */
+export const useSpinner = (controller?: GlobeController | null, options: SpinnerOptions = {}) => {
+  const [running, setRunning] = createSignal(false);
+
+  createEffect(() => {
+    let timer: Timer | undefined;
+
+    const start = () => {
+      const delta: Vector = options.delta ?? [0.001, 0, 0];
+
+      let t = 0;
+      let lastRotation = controller!.projection.rotate();
+      timer = d3Timer((elapsed) => {
+        const dt = elapsed - t;
+        t = elapsed;
+
+        const rotation: Vector = [
+          lastRotation[0] + delta[0] * dt,
+          lastRotation[1] + delta[1] * dt,
+          lastRotation[2] + delta[2] * dt,
+        ];
+
+        lastRotation = rotation;
+        controller!.setRotation(rotation);
+      });
+    };
+
+    const stop = () => {
+      if (timer) {
+        timer.stop();
+        timer = undefined;
+      }
+    };
+
+    if (controller && running()) {
+      start();
+    } else {
+      stop();
+    }
+
+    onCleanup(() => stop());
+  });
+
+  return {
+    start: () => {
+      if (!options.disabled) {
+        setRunning(true);
+      }
+    },
+    stop: () => setRunning(false),
+  };
+};