diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 16a2a9662..49677f622 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -1,4 +1,4 @@ -import Map from "./map"; +import Map, { MapApi } from "./map"; import "./index.css"; import { ViewModeProps } from "../interface"; import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks"; @@ -90,7 +90,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM // Dragging const containerRef = useRef(null); - const apiRef = useRef(null); + const apiRef = useRef(null); useNoteTreeDrag(containerRef, async (treeData, e) => { const api = apiRef.current; if (!note || !api) return; diff --git a/apps/client/src/widgets/collections/geomap/map.tsx b/apps/client/src/widgets/collections/geomap/map.tsx index c55848241..8a7afb781 100644 --- a/apps/client/src/widgets/collections/geomap/map.tsx +++ b/apps/client/src/widgets/collections/geomap/map.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "preact/hooks"; +import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks"; import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet"; import "leaflet/dist/leaflet.css"; import { MAP_LAYERS } from "./map_layer"; @@ -8,7 +8,7 @@ import { useSyncedRef } from "../../react/hooks"; export const ParentMap = createContext(null); interface MapProps { - apiRef?: RefObject; + apiRef?: RefObject; containerRef?: RefObject; coordinates: LatLng | [number, number]; zoom: number; @@ -20,10 +20,23 @@ interface MapProps { scale: boolean; } -export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef: _apiRef, containerRef: _containerRef }: MapProps) { - const mapRef = useSyncedRef(_apiRef); +export interface MapApi { + containerPointToLatLng: L.Map["containerPointToLatLng"]; +} + +export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef }: MapProps) { + const mapRef = useRef(null); const containerRef = useSyncedRef(_containerRef); + useImperativeHandle(apiRef ?? null, () => { + const map = mapRef.current; + if (!map) return null; + + return { + containerPointToLatLng: (point) => map.containerPointToLatLng(point) + } satisfies MapApi; + }); + useEffect(() => { if (!containerRef.current) return; const mapInstance = L.map(containerRef.current, {