diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 293a1f4a6..a966cb6d5 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -4,10 +4,13 @@ import { ViewModeProps } from "../interface"; import { useNoteLabel, useSpacedUpdate } from "../../react/hooks"; import { DEFAULT_MAP_LAYER_NAME } from "./map_layer"; import { LatLng } from "leaflet"; -import { useEffect, useRef } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; +import Marker, { MarkerProps } from "./marker"; +import froca from "../../../services/froca"; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_ZOOM = 2; +export const LOCATION_ATTRIBUTE = "geolocation"; interface MapData { view?: { @@ -16,14 +19,36 @@ interface MapData { }; } -export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps) { +export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps) { const [ layerName ] = useNoteLabel(note, "map:style"); + const [ markers, setMarkers ] = useState([]); const spacedUpdate = useSpacedUpdate(() => { if (viewConfig) { saveConfig(viewConfig); } }, 5000); + async function refreshMarkers() { + const notes = await froca.getNotes(noteIds); + const markers: MarkerProps[] = []; + for (const childNote of notes) { + const latLng = childNote.getAttributeValue("label", LOCATION_ATTRIBUTE); + if (!latLng) continue; + + const [lat, lng] = latLng.split(",", 2).map((el) => parseFloat(el)); + markers.push({ + coordinates: [lat, lng] + }) + } + + console.log("Built ", markers); + setMarkers(markers); + } + + useEffect(() => { + refreshMarkers(); + }, [ note ]); + return (
+ > + {markers.map(marker => )} +
); } diff --git a/apps/client/src/widgets/collections/geomap/map.tsx b/apps/client/src/widgets/collections/geomap/map.tsx index 8dd6d1fc0..f959606c7 100644 --- a/apps/client/src/widgets/collections/geomap/map.tsx +++ b/apps/client/src/widgets/collections/geomap/map.tsx @@ -2,15 +2,19 @@ import { useEffect, useRef, useState } from "preact/hooks"; import L, { LatLng, Layer } from "leaflet"; import "leaflet/dist/leaflet.css"; import { MAP_LAYERS } from "./map_layer"; +import { ComponentChildren, createContext } from "preact"; + +export const ParentMap = createContext(null); interface MapProps { coordinates: LatLng | [number, number]; zoom: number; layerName: string; viewportChanged: (coordinates: LatLng, zoom: number) => void; + children: ComponentChildren; } -export default function Map({ coordinates, zoom, layerName, viewportChanged }: MapProps) { +export default function Map({ coordinates, zoom, layerName, viewportChanged, children }: MapProps) { const mapRef = useRef(null); const containerRef = useRef(null); @@ -76,5 +80,9 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged }: M }; }, [ mapRef, viewportChanged ]); - return
; + return
+ + {children} + +
; } diff --git a/apps/client/src/widgets/collections/geomap/marker.tsx b/apps/client/src/widgets/collections/geomap/marker.tsx new file mode 100644 index 000000000..5f5830c63 --- /dev/null +++ b/apps/client/src/widgets/collections/geomap/marker.tsx @@ -0,0 +1,24 @@ +import { useContext, useEffect } from "preact/hooks"; +import { ParentMap } from "./map"; +import { marker } from "leaflet"; + +export interface MarkerProps { + coordinates: [ number, number ]; +} + +export default function Marker({ coordinates }: MarkerProps) { + const parentMap = useContext(ParentMap); + + useEffect(() => { + if (!parentMap) return; + + const newMarker = marker(coordinates, { + + }); + newMarker.addTo(parentMap); + + return () => newMarker.removeFrom(parentMap); + }, [ parentMap, coordinates ]); + + return (
) +} diff --git a/apps/client/src/widgets/view_widgets/geo_view/index.ts b/apps/client/src/widgets/view_widgets/geo_view/index.ts index 880ef7230..3a3a286be 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/index.ts +++ b/apps/client/src/widgets/view_widgets/geo_view/index.ts @@ -12,7 +12,6 @@ import { openMapContextMenu } from "./context_menu.js"; import attributes from "../../../services/attributes.js"; import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer.js"; -export const LOCATION_ATTRIBUTE = "geolocation"; enum State { Normal, @@ -119,7 +118,6 @@ export default class GeoView extends ViewMode { continue; } - const latLng = childNote.getAttributeValue("label", LOCATION_ATTRIBUTE); if (latLng) { const marker = processNoteWithMarker(this.map, childNote, latLng, draggable); this.currentMarkerData[childNote.noteId] = marker; diff --git a/apps/client/src/widgets/view_widgets/geo_view/markers.ts b/apps/client/src/widgets/view_widgets/geo_view/markers.ts index af836c252..11aa45190 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/markers.ts +++ b/apps/client/src/widgets/view_widgets/geo_view/markers.ts @@ -11,7 +11,6 @@ import L from "leaflet"; let gpxLoaded = false; export default function processNoteWithMarker(map: Map, note: FNote, location: string, isEditable: boolean) { - const [lat, lng] = location.split(",", 2).map((el) => parseFloat(el)); const icon = buildIcon(note.getIcon(), note.getColorClass(), note.title, note.noteId); const newMarker = marker(latLng(lat, lng), {