@dxos/react-ui-geo 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350

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,7 +5,7 @@
 // eslint-disable-next-line no-restricted-imports
 import 'leaflet/dist/leaflet.css';
 
-import type L from 'leaflet';
+import 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';
@@ -127,10 +127,24 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(
         />
 
         {/* Markers. */}
-        {/* TODO(burdon): Marker icon doesn't load on mobile? */}
         {markers.map(({ id, title, location: { lat, lng } }) => {
           return (
-            <Marker key={id} position={{ lat, lng }}>
+            <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>
           );

package/src/hooks/context.tsx

@@ -5,7 +5,7 @@
 import React, { createContext, type Dispatch, type PropsWithChildren, type SetStateAction, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
-import { useControlledValue } from '@dxos/react-ui';
+import { useControlledState } from '@dxos/react-ui';
 
 import { type LatLng } from '../util';
 
@@ -40,10 +40,10 @@ export const GlobeContextProvider = ({
   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);
+  const [center, setCenter] = useControlledState(_center);
+  const [scale, setScale] = useControlledState(_scale);
+  const [translation, setTranslation] = useControlledState<Point>(_translation);
+  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
 
   return (
     <GlobeContext.Provider

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