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

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