@dxos/react-ui-geo 0.8.3 → 0.8.4-main.28f8d3d

package/src/components/Map/Map.tsx

@@ -2,109 +2,223 @@
 // Copyright 2023 DXOS.org
 //
 
-// eslint-disable-next-line no-restricted-imports
 import 'leaflet/dist/leaflet.css';
 
-import L, { Control, DomEvent, DomUtil, latLngBounds, type ControlPosition, type LatLngExpression } from 'leaflet';
-import React, { forwardRef, useEffect, useImperativeHandle, type PropsWithChildren } from 'react';
+import { createContext } from '@radix-ui/react-context';
+import L, { Control, type ControlPosition, DomEvent, DomUtil, type LatLngLiteral, latLngBounds } from 'leaflet';
+import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import type { MapContainerProps } from 'react-leaflet';
 import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
-import { useResizeDetector } from 'react-resize-detector';
 
 import { debounce } from '@dxos/async';
-import { ThemeProvider, Tooltip, type ThemedClassName } from '@dxos/react-ui';
+import { ThemeProvider, type ThemedClassName, Tooltip } 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';
+import { type GeoMarker } from '../../types';
+import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
 
 // 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.
+// TODO(burdon): Guess initial location.
 
 const defaults = {
-  // TODO(burdon): Guess location.
-  center: { lat: 51, lng: 0 } as L.LatLngExpression,
+  center: { lat: 51, lng: 0 } as L.LatLngLiteral,
   zoom: 4,
 };
 
 //
-// Root
+// Controller
 //
 
-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 grid grow bg-baseSurface', classNames)}
-      attributionControl={false}
-      // TODO(burdon): Only if attention.
-      scrollWheelZoom={true}
-      zoomControl={false}
-      center={center}
-      zoom={zoom}
-      {...props}
-    />
-  );
+type MapController = {
+  setCenter: (center: LatLngLiteral, zoom?: number) => void;
+  setZoom: (cb: (zoom: number) => number) => void;
 };
 
 //
-// Control
+// Context
 //
 
-// TODO(burdon): Normalize with Globe.
-type MapController = {
-  setCenter: (center: LatLngExpression, zoom?: number) => void;
-  setZoom: (cb: (zoom: number) => number) => void;
+type MapContextValue = {
+  attention?: boolean;
 };
 
-const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-  const map = useMap();
+const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
+
+//
+// Root
+//
+
+type MapRootProps = ThemedClassName<
+  MapContainerProps & {
+    onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
+  }
+>;
 
-  useImperativeHandle(
+/**
+ * https://react-leaflet.js.org/docs/api-map
+ */
+const MapRoot = forwardRef<MapController, MapRootProps>(
+  (
+    {
+      classNames,
+      scrollWheelZoom = true,
+      doubleClickZoom = true,
+      touchZoom = true,
+      center = defaults.center,
+      zoom = defaults.zoom,
+      onChange,
+      ...props
+    },
     forwardedRef,
-    () => ({
-      setCenter: (center: LatLngExpression, zoom?: number) => {
-        map.setView(center, zoom);
-      },
-      setZoom: (cb) => {
-        map.setZoom(cb(map.getZoom()));
-      },
-    }),
-    [map],
-  );
+  ) => {
+    const [attention, setAttention] = useState(false);
+    const mapRef = useRef<L.Map>(null);
+    const map = mapRef.current;
 
-  // Resize.
-  useEffect(() => {
-    if (width && height) {
-      map.invalidateSize();
-    }
-  }, [width, height]);
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        setCenter: (center: LatLngLiteral, zoom?: number) => {
+          mapRef.current?.setView(center, zoom);
+        },
+        setZoom: (cb: (zoom: number) => number) => {
+          mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
+        },
+      }),
+      [],
+    );
+
+    // Events.
+    useEffect(() => {
+      if (!map) {
+        return;
+      }
+
+      const handler = debounce(() => {
+        setAttention(true);
+        onChange?.({
+          center: map.getCenter(),
+          zoom: map.getZoom(),
+        });
+      }, 100);
+
+      map.on('move', handler);
+      map.on('zoom', handler);
+      map.on('focus', () => setAttention(true));
+      map.on('blur', () => setAttention(false));
+      return () => {
+        map.off('move');
+        map.off('zoom');
+        map.off('focus');
+        map.off('blur');
+      };
+    }, [map, onChange]);
+
+    // Enable/disable scroll wheel zoom.
+    // TODO(burdon): Use attention:
+    // const {hasAttention} = useAttention(props.id);
+    useEffect(() => {
+      if (!map) {
+        return;
+      }
+
+      if (attention) {
+        map.scrollWheelZoom.enable();
+      } else {
+        map.scrollWheelZoom.disable();
+      }
+    }, [map, attention]);
+
+    return (
+      <MapContextProvier attention={attention}>
+        <MapContainer
+          {...props}
+          ref={mapRef}
+          className={mx('group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset', classNames)}
+          attributionControl={false}
+          zoomControl={false}
+          scrollWheelZoom={scrollWheelZoom}
+          doubleClickZoom={doubleClickZoom}
+          touchZoom={touchZoom}
+          center={center}
+          zoom={zoom}
+          // whenReady={() => {}}
+        />
+      </MapContextProvier>
+    );
+  },
+);
+
+MapRoot.displayName = 'Map.Root';
+
+//
+// Tiles
+// https://react-leaflet.js.org/docs/api-components/#tilelayer
+//
+
+type MapTilesProps = {};
 
-  // Position.
+const MapTiles = (_props: MapTilesProps) => {
+  const ref = useRef<L.TileLayer>(null);
+
+  // NOTE: Need to dynamically update data attribute since TileLayer doesn't update, but
+  // Tailwind requires setting the property for static analysis.
+  const { attention } = useMapContext(MapTiles.displayName);
   useEffect(() => {
-    if (center) {
-      map.setView(center, zoom);
-    } else if (zoom !== undefined) {
-      map.setZoom(zoom);
+    if (ref.current) {
+      ref.current.getContainer().dataset.attention = attention ? '1' : '0';
     }
-  }, [center, zoom]);
+  }, [attention]);
 
-  // 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]);
+  // TODO(burdon): Option to add class 'invert'.
+  return (
+    <>
+      <TileLayer
+        ref={ref}
+        data-attention={attention}
+        detectRetina={true}
+        className='dark:grayscale dark:invert data-[attention="0"]:!opacity-80'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+        keepBuffer={4}
+        // opacity={attention ? 1 : 0.7}
+      />
+
+      {/* Temperature map. */}
+      {/* <WMSTileLayer
+        url='https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi'
+        layers='MODIS_Terra_Land_Surface_Temp_Day'
+        format='image/png'
+        transparent={true}
+        version='1.3.0'
+        attribution='NASA GIBS'
+      /> */}
+
+      {/* US Weather. */}
+      {/* <WMSTileLayer
+        url='https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi'
+        layers='nexrad-n0r' // layers='nexrad-n0r'
+        format='image/png'
+        transparent={true}
+      /> */}
+    </>
+  );
+};
+
+MapTiles.displayName = 'Map.Tiles';
+
+//
+// Markers
+//
+
+type MapMarkersProps = {
+  markers?: GeoMarker[];
+  selected?: string[];
+};
+
+const MapMarkers = ({ selected, markers }: MapMarkersProps) => {
+  const map = useMap();
 
   // Set the viewport around the markers, or show the whole world map if `markers` is empty.
   useEffect(() => {
@@ -117,14 +231,7 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
   }, [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
@@ -132,6 +239,7 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
             position={{ lat, lng }}
             icon={
               // TODO(burdon): Create custom icon from bundled assets.
+              // TODO(burdon): Selection state.
               new L.Icon({
                 iconUrl: 'https://dxos.network/marker-icon.png',
                 iconRetinaUrl: 'https://dxos.network/marker-icon-2x.png',
@@ -147,9 +255,11 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
           </Marker>
         );
       })}
-    </div>
+    </>
   );
-});
+};
+
+MapMarkers.displayName = 'Map.Markers';
 
 //
 // Controls
@@ -192,23 +302,28 @@ const CustomControl = ({
 
 type MapControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
 
+const MapZoom = ({ onAction, position = 'bottomleft', ...props }: MapControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ZoomControls onAction={onAction} />
+  </CustomControl>
+);
+
+const MapAction = ({ onAction, position = 'bottomright', ...props }: MapControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ActionControls onAction={onAction} />
+  </CustomControl>
+);
+
 //
 // 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>
-  ),
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction,
 };
 
-export { type MapCanvasProps, type MapController };
+export { type MapController, type MapRootProps, type MapTilesProps, type MapMarkersProps, type MapControlProps };

package/src/components/Toolbar/Controls.tsx

@@ -22,9 +22,8 @@ export const controlPositions: Record<ControlPosition, string> = {
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
   return (
-    <Toolbar.Root classNames={['gap-1', classNames]}>
+    <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        //
         icon='ph--plus--regular'
         label='zoom in'
         iconOnly
@@ -33,7 +32,6 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
         onClick={() => onAction?.('zoom-in')}
       />
       <IconButton
-        //
         icon='ph--minus--regular'
         label='zoom out'
         iconOnly
@@ -47,9 +45,8 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
   return (
-    <Toolbar.Root classNames={['gap-1', classNames]}>
+    <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        //
         icon='ph--play--regular'
         label='start'
         iconOnly
@@ -58,7 +55,6 @@ export const ActionControls = ({ classNames, onAction }: ControlProps) => {
         onClick={() => onAction?.('start')}
       />
       <IconButton
-        //
         icon='ph--globe-hemisphere-west--regular'
         label='toggle'
         iconOnly

package/src/components/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2019 DXOS.org
 //
 
-export * from './types';
-
 export * from './Globe';
 export * from './Map';
 export * from './Toolbar';

package/src/hooks/context.tsx

@@ -2,12 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { createContext, type Dispatch, type PropsWithChildren, type SetStateAction, useContext } from 'react';
+import React, { type Dispatch, type PropsWithChildren, type SetStateAction, createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 import { useControlledState } from '@dxos/react-ui';
 
-import { type LatLng } from '../util';
+import { type LatLngLiteral } from '../types';
 
 // TODO(burdon): Factor out common geometry types.
 export type Size = { width: number; height: number };
@@ -16,12 +16,12 @@ export type Vector = [number, number, number];
 
 export type GlobeContextType = {
   size: Size;
-  center: LatLng;
-  scale: number;
+  center?: LatLngLiteral;
+  zoom: number;
   translation: Point;
   rotation: Vector;
-  setCenter: Dispatch<SetStateAction<LatLng>>;
-  setScale: Dispatch<SetStateAction<number>>;
+  setCenter: Dispatch<SetStateAction<LatLngLiteral>>;
+  setZoom: Dispatch<SetStateAction<number>>;
   setTranslation: Dispatch<SetStateAction<Point>>;
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
@@ -29,25 +29,25 @@ export type GlobeContextType = {
 const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'scale' | 'translation' | 'rotation'>>
+  Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
 >;
 
 export const GlobeContextProvider = ({
   children,
   size,
   center: _center,
-  scale: _scale,
+  zoom: _zoom,
   translation: _translation,
   rotation: _rotation,
 }: GlobeContextProviderProps) => {
   const [center, setCenter] = useControlledState(_center);
-  const [scale, setScale] = useControlledState(_scale);
+  const [zoom, setZoom] = useControlledState(_zoom);
   const [translation, setTranslation] = useControlledState<Point>(_translation);
   const [rotation, setRotation] = useControlledState<Vector>(_rotation);
 
   return (
     <GlobeContext.Provider
-      value={{ size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation }}
+      value={{ size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation }}
     >
       {children}
     </GlobeContext.Provider>

package/src/hooks/useGlobeZoomHandler.ts

@@ -4,7 +4,7 @@
 
 import { useCallback } from 'react';
 
-import { type GlobeController, type ControlProps } from '../components';
+import { type ControlProps, type GlobeController } from '../components';
 
 export const useGlobeZoomHandler = (controller: GlobeController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(
@@ -15,11 +15,11 @@ export const useGlobeZoomHandler = (controller: GlobeController | null | undefin
 
       switch (event) {
         case 'zoom-in': {
-          controller.setScale((scale) => scale * 1.1);
+          controller.setZoom((zoom) => zoom * 1.1);
           break;
         }
         case 'zoom-out': {
-          controller.setScale((scale) => scale * 0.9);
+          controller.setZoom((zoom) => zoom * 0.9);
           break;
         }
       }

package/src/hooks/useMapZoomHandler.ts

@@ -4,7 +4,7 @@
 
 import { useCallback } from 'react';
 
-import { type MapController, type ControlProps } from '../components';
+import { type ControlProps, type MapController } from '../components';
 
 export const useMapZoomHandler = (controller: MapController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(

package/src/hooks/useSpinner.ts

@@ -6,9 +6,10 @@ import { timer as d3Timer } from 'd3';
 import { type Timer } from 'd3';
 import { useEffect, useState } from 'react';
 
-import { type Vector } from './context';
 import { type GlobeController } from '../components';
 
+import { type Vector } from './context';
+
 export type SpinnerOptions = {
   disabled?: boolean;
   delta?: Vector;

package/src/hooks/useTour.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from 'd3';
-import { type SetStateAction, type Dispatch, useEffect, useState, useMemo } from 'react';
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from 'd3';
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
 import versor from 'versor';
 
 import type { GlobeController } from '../components';
-import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
+import { type LatLngLiteral } from '../types';
+import { type StyleSet, geoToPosition, positionToRotation } from '../util';
 
 const TRANSITION_NAME = 'globe-tour';
 
@@ -29,7 +30,7 @@ export type TourOptions = {
  */
 export const useTour = (
   controller?: GlobeController | null,
-  points?: LatLng[],
+  points?: LatLngLiteral[],
   options: TourOptions = {},
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = useMemo(() => d3Selection(), []);
@@ -48,7 +49,7 @@ export const useTour = (
         const path = geoPath(projection, context).pointRadius(2);
 
         const tilt = options.tilt ?? 0;
-        let last: LatLng;
+        let last: LatLngLiteral;
         try {
           const p = [...points];
           if (options.loop) {
@@ -82,14 +83,14 @@ export const useTour = (
                 {
                   context.beginPath();
                   context.strokeStyle = options?.styles?.arc?.strokeStyle ?? 'yellow';
-                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.scale ?? 1);
+                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.zoom ?? 1);
                   context.setLineDash(options?.styles?.arc?.lineDash ?? []);
                   path({ type: 'LineString', coordinates: [ip(t1), ip(t2)] });
                   context.stroke();
 
                   context.beginPath();
                   context.fillStyle = options?.styles?.cursor?.fillStyle ?? 'orange';
-                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.scale ?? 1));
+                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.zoom ?? 1));
                   path({ type: 'Point', coordinates: ip(t2) });
                   context.fill();
                 }
@@ -104,7 +105,7 @@ export const useTour = (
             await transition.end();
             last = next;
           }
-        } catch (err) {
+        } catch {
           // Ignore.
         } finally {
           setRunning(false);

package/src/index.ts

@@ -5,5 +5,5 @@
 export * from './components';
 export * from './data';
 export * from './hooks';
-export * from './types';
+export type * from './types';
 export * from './util';

package/src/types.ts

@@ -4,7 +4,9 @@
 
 import { type LatLngLiteral } from 'leaflet';
 
-export type MapMarker = {
+export { type LatLngLiteral };
+
+export type GeoMarker = {
   id: string;
   title?: string;
   location: LatLngLiteral;

package/src/util/inertia.ts

@@ -4,7 +4,7 @@
 // https://github.com/Fil/d3-inertia
 //
 
-import { select, drag, timer } from 'd3';
+import { drag, select, timer } from 'd3';
 import versor from 'versor';
 
 export const restrictAxis =

package/src/util/path.ts

@@ -4,22 +4,21 @@
 
 import { type GeoGeometryObjects, geoCircle as d3GeoCircle } from 'd3';
 import { type Point, type Polygon, type Position } from 'geojson';
+import { type LatLngLiteral } from 'leaflet';
 
 import type { Vector } from '../hooks';
 
-export type LatLng = { lat: number; lng: number };
-
 export const positionToRotation = ([lng, lat]: [number, number], tilt = 0): Vector => [-lng, tilt - lat, 0];
 
-export const geoToPosition = ({ lat, lng }: LatLng): [number, number] => [lng, lat];
+export const geoToPosition = ({ lat, lng }: LatLngLiteral): [number, number] => [lng, lat];
 
-export const geoPoint = (point: LatLng): Point => ({ type: 'Point', coordinates: geoToPosition(point) });
+export const geoPoint = (point: LatLngLiteral): Point => ({ type: 'Point', coordinates: geoToPosition(point) });
 
 // https://github.com/d3/d3-geo#geoCircle
-export const geoCircle = ({ lat, lng }: LatLng, radius: number): Polygon =>
+export const geoCircle = ({ lat, lng }: LatLngLiteral, radius: number): Polygon =>
   d3GeoCircle().radius(radius).center([lng, lat])();
 
-export const geoLine = (p1: LatLng, p2: LatLng): GeoGeometryObjects => ({
+export const geoLine = (p1: LatLngLiteral, p2: LatLngLiteral): GeoGeometryObjects => ({
   type: 'LineString',
   coordinates: [
     [p1.lng, p1.lat],

package/src/util/render.ts

@@ -6,7 +6,9 @@ import { type GeoPath, type GeoPermissibleObjects, geoGraticule } from 'd3';
 import { feature, mesh } from 'topojson-client';
 import { type Topology } from 'topojson-specification';
 
-import { type LatLng, geoLine, geoPoint } from './path';
+import { type LatLngLiteral } from '../types';
+
+import { geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;
 
@@ -25,8 +27,8 @@ export type Style =
 export type StyleSet = Partial<Record<Style, Styles>>;
 
 export type Features = {
-  points?: LatLng[];
-  lines?: { source: LatLng; target: LatLng }[];
+  points?: LatLngLiteral[];
+  lines?: { source: LatLngLiteral; target: LatLngLiteral }[];
 };
 
 export type Layer = {