chore(react/collections/geomap): get markers to show up

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<MapData>) {
+export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
+    const [ markers, setMarkers ] = useState<MarkerProps[]>([]);
     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 (
         <div className="geo-view">
             <Map
@@ -35,7 +60,9 @@ export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps<
                     viewConfig.view = { center: coordinates, zoom };
                     spacedUpdate.scheduleUpdate();
                 }}
-            />
+            >
+                {markers.map(marker => <Marker {...marker} />)}
+            </Map>
         </div>
     );
 }

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<L.Map | null>(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<L.Map>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -76,5 +80,9 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged }: M
         };
     }, [ mapRef, viewportChanged ]);
 
-    return <div ref={containerRef} className="geo-map-container" />;
+    return <div ref={containerRef} className="geo-map-container">
+        <ParentMap.Provider value={mapRef.current}>
+            {children}
+        </ParentMap.Provider>
+    </div>;
 }

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 (<div />)
+}

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<MapData> {
                 continue;
             }
 
-            const latLng = childNote.getAttributeValue("label", LOCATION_ATTRIBUTE);
             if (latLng) {
                 const marker = processNoteWithMarker(this.map, childNote, latLng, draggable);
                 this.currentMarkerData[childNote.noteId] = marker;

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), {