Update Node.js to v24.13.1

.nvmrc

@@ -1 +1 @@
-24.13.0
+24.13.1

apps/client/package.json

@@ -23,6 +23,7 @@
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/multimonth": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
+    "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
@@ -50,8 +51,9 @@
     "jsplumb": "2.15.6",
     "katex": "0.16.28",
     "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "maplibre-gl": "5.18.0",
     "marked": "17.0.2",
     "mermaid": "11.12.2",
     "mind-elixir": "5.8.0",
@@ -70,6 +72,8 @@
     "@prefresh/vite": "2.4.11",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
+    "@types/leaflet": "1.9.21",
+    "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
     "@types/reveal.js": "5.2.2",
     "@types/tabulator-tables": "6.3.1",

apps/client/src/menus/link_context_menu.ts

@@ -1,4 +1,4 @@
-import type { GeoMouseEvent } from "../widgets/collections/geomap/map.js";
+import type { LeafletMouseEvent } from "leaflet";
 
 import appContext, { type CommandNames } from "../components/app_context.js";
 import { t } from "../services/i18n.js";
@@ -16,7 +16,7 @@ function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewS
     });
 }
 
-function getItems(e: ContextMenuEvent | GeoMouseEvent): MenuItem<CommandNames>[] {
+function getItems(e: ContextMenuEvent | LeafletMouseEvent): MenuItem<CommandNames>[] {
     const ntxId = getNtxId(e);
     const isMobileSplitOpen = isMobile() && appContext.tabManager.getNoteContextById(ntxId).getMainContext().getSubContexts().length > 1;
 
@@ -28,7 +28,7 @@ function getItems(e: ContextMenuEvent | GeoMouseEvent): MenuItem<CommandNames>[]
     ];
 }
 
-function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | GeoMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | LeafletMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
         hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
@@ -52,7 +52,7 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
     return false;
 }
 
-function getNtxId(e: ContextMenuEvent | GeoMouseEvent) {
+function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
     if (utils.isDesktop()) {
         const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
         if (!subContexts) return null;

apps/client/src/types-lib.d.ts

@@ -32,6 +32,26 @@ declare module "katex/contrib/auto-render" {
     export default renderMathInElement;
 }
 
+import * as L from "leaflet";
+
+declare module "leaflet" {
+    interface GPXMarker {
+        startIcon?: DivIcon | Icon | string | undefined;
+        endIcon?: DivIcon | Icon | string | undefined;
+        wptIcons?: {
+            [key: string]: DivIcon | Icon | string;
+        };
+        wptTypeIcons?: {
+            [key: string]: DivIcon | Icon | string;
+        };
+        pointMatchers?: Array<{ regex: RegExp; icon: DivIcon | Icon | string}>;
+    }
+
+    interface GPXOptions {
+        markers?: GPXMarker | undefined;
+    }
+}
+
 declare global {
     interface Navigator {
         /** Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only. */

apps/client/src/widgets/FloatingButtons.css

@@ -89,7 +89,7 @@
 /* #endregion */
 
 /* #region Geo map buttons */
-.maplibregl-canvas-container {
+.leaflet-pane {
     z-index: 50;
 }
 /* #endregion */

apps/client/src/widgets/collections/geomap/api.ts

@@ -1,4 +1,4 @@
-import type { GeoMouseEvent } from "./map";
+import type { LatLng, LeafletMouseEvent } from "leaflet";
 import { LOCATION_ATTRIBUTE } from ".";
 import attributes from "../../../services/attributes";
 import { prompt } from "../../../services/dialog";
@@ -8,12 +8,12 @@ import { CreateChildrenResponse } from "@triliumnext/commons";
 
 const CHILD_NOTE_ICON = "bx bx-pin";
 
-export async function moveMarker(noteId: string, latLng: { lat: number; lng: number } | null) {
+export async function moveMarker(noteId: string, latLng: LatLng | null) {
     const value = latLng ? [latLng.lat, latLng.lng].join(",") : "";
     await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
 }
 
-export async function createNewNote(noteId: string, e: GeoMouseEvent) {
+export async function createNewNote(noteId: string, e: LeafletMouseEvent) {
     const title = await prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
 
     if (title?.trim()) {

apps/client/src/widgets/collections/geomap/context_menu.ts

@@ -1,4 +1,4 @@
-import type { GeoMouseEvent } from "./map.js";
+import type { LatLng, LeafletMouseEvent } from "leaflet";
 import appContext, { type CommandMappings } from "../../../components/app_context.js";
 import contextMenu, { type MenuItem } from "../../../menus/context_menu.js";
 import linkContextMenu from "../../../menus/link_context_menu.js";
@@ -8,7 +8,7 @@ import { createNewNote } from "./api.js";
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
 import link from "../../../services/link.js";
 
-export default function openContextMenu(noteId: string, e: GeoMouseEvent, isEditable: boolean) {
+export default function openContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e),
         { kind: "separator" },
@@ -44,7 +44,7 @@ export default function openContextMenu(noteId: string, e: GeoMouseEvent, isEdit
     });
 }
 
-export function openMapContextMenu(noteId: string, e: GeoMouseEvent, isEditable: boolean) {
+export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e)
     ];
@@ -71,8 +71,8 @@ export function openMapContextMenu(noteId: string, e: GeoMouseEvent, isEditable:
     });
 }
 
-function buildGeoLocationItem(e: GeoMouseEvent) {
-    function formatGeoLocation(latlng: { lat: number; lng: number }, precision: number = 6) {
+function buildGeoLocationItem(e: LeafletMouseEvent) {
+    function formatGeoLocation(latlng: LatLng, precision: number = 6) {
         return `${latlng.lat.toFixed(precision)}, ${latlng.lng.toFixed(precision)}`;
     }
 

apps/client/src/widgets/collections/geomap/index.css

@@ -16,10 +16,12 @@
   overflow: hidden;
 }
 
-.maplibregl-ctrl-top-left,
-.maplibregl-ctrl-top-right,
-.maplibregl-ctrl-bottom-left,
-.maplibregl-ctrl-bottom-right {
+.leaflet-pane {
+  z-index: 1;
+}
+
+.leaflet-top,
+.leaflet-bottom {
   z-index: 997 !important;
 }
 
@@ -27,25 +29,28 @@
   cursor: crosshair;
 }
 
-.geo-map-container .geo-marker {
+.geo-map-container .marker-pin {
   position: relative;
-  cursor: pointer;
+}
+
+.geo-map-container .leaflet-div-icon {
+  position: relative;
+  background: transparent;
+  border: 0;
   overflow: visible;
 }
 
-.geo-map-container .geo-marker .marker-pin {
-  position: relative;
+.geo-map-container .leaflet-div-icon .icon-shadow {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  z-index: -1;
 }
 
-.geo-map-container .geo-marker .marker-pin svg {
-  display: block;
-  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
-}
-
-.geo-map-container .geo-marker .tn-icon {
+.geo-map-container .leaflet-div-icon .tn-icon {
   position: absolute;
   top: 3px;
-  inset-inline-start: 4px;
+  inset-inline-start: 2px;
   background-color: white;
   color: var(--light-theme-custom-color, black);
   padding: 2px;
@@ -53,7 +58,7 @@
   font-size: 17px;
 }
 
-.geo-map-container .geo-marker .title-label {
+.geo-map-container .leaflet-div-icon .title-label {
   display: block;
   position: absolute;
   top: 100%;
@@ -66,19 +71,19 @@
   text-align: center;
   text-overflow: ellipsis;
   text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
-  white-space: nowrap;
+  white-space: no-wrap;
   overflow: hidden;
 }
 
-body[dir=rtl] .geo-map-container .geo-marker .title-label {
+body[dir=rtl] .geo-map-container .leaflet-div-icon .title-label {
   transform: translateX(50%);
 }
 
-.geo-map-container .geo-marker .archived {
+.geo-map-container .leaflet-div-icon .archived {
   opacity: 0.5;
 }
 
-.geo-map-container.dark .geo-marker .title-label {
+.geo-map-container.dark .leaflet-div-icon .title-label {
   color: white;
   text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
 }

apps/client/src/widgets/collections/geomap/index.tsx

@@ -1,5 +1,8 @@
 import "./index.css";
 
+import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
+import markerIcon from "leaflet/dist/images/marker-icon.png";
+import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import appContext from "../../../components/app_context";
@@ -18,10 +21,9 @@ import TouchBar, { TouchBarButton, TouchBarSlider } from "../../react/TouchBar";
 import { ViewModeProps } from "../interface";
 import { createNewNote, moveMarker } from "./api";
 import openContextMenu, { openMapContextMenu } from "./context_menu";
-import Map, { GeoMouseEvent } from "./map";
+import Map from "./map";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import Marker, { GpxTrack } from "./marker";
-import type maplibregl from "maplibre-gl";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -29,7 +31,7 @@ export const LOCATION_ATTRIBUTE = "geolocation";
 
 interface MapData {
     view?: {
-        center?: { lat: number; lng: number } | [number, number];
+        center?: LatLng | [number, number];
         zoom?: number;
     };
 }
@@ -87,7 +89,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
         moveMarker(noteId, null);
     });
 
-    const onClick = useCallback(async (e: GeoMouseEvent) => {
+    const onClick = useCallback(async (e: LeafletMouseEvent) => {
         if (state === State.NewNote) {
             toast.closePersistent("geo-new-note");
             await createNewNote(note.noteId, e);
@@ -95,13 +97,13 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
         }
     }, [ state ]);
 
-    const onContextMenu = useCallback((e: GeoMouseEvent) => {
+    const onContextMenu = useCallback((e: LeafletMouseEvent) => {
         openMapContextMenu(note.noteId, e, !isReadOnly);
     }, [ note.noteId, isReadOnly ]);
 
     // Dragging
     const containerRef = useRef<HTMLDivElement>(null);
-    const apiRef = useRef<maplibregl.Map>(null);
+    const apiRef = useRef<L.Map>(null);
     useNoteTreeDrag(containerRef, {
         dragEnabled: !isReadOnly,
         dragNotEnabledMessage: {
@@ -118,15 +120,15 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
             const offset = containerRef.current?.getBoundingClientRect();
             const x = e.clientX - (offset?.left ?? 0);
             const y = e.clientY - (offset?.top ?? 0);
-            const lngLat = api.unproject([x, y]);
+            const latlng = api.containerPointToLatLng([ x, y ]);
 
             const targetNote = await froca.getNote(noteId, true);
             const parents = targetNote?.getParentNoteIds();
             if (parents?.includes(note.noteId)) {
-                await moveMarker(noteId, { lat: lngLat.lat, lng: lngLat.lng });
+                await moveMarker(noteId, latlng);
             } else {
                 await branches.cloneNoteToParentNote(noteId, noteId);
-                await moveMarker(noteId, { lat: lngLat.lat, lng: lngLat.lng });
+                await moveMarker(noteId, latlng);
             }
         }
     });
@@ -199,8 +201,8 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
     const [ archived ] = useNoteLabelBoolean(note, "archived");
 
     const title = useNoteProperty(note, "title");
-    const iconHtml = useMemo(() => {
-        return buildIconHtml(note.getIcon(), note.getColorClass() ?? undefined, title, note.noteId, archived);
+    const icon = useMemo(() => {
+        return buildIcon(note.getIcon(), note.getColorClass() ?? undefined, title, note.noteId, archived);
     }, [ iconClass, color, title, note.noteId, archived]);
 
     const onClick = useCallback(() => {
@@ -216,17 +218,15 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
         }
     }, [ note.noteId ]);
 
-    const onDragged = useCallback((newCoordinates: { lat: number; lng: number }) => {
+    const onDragged = useCallback((newCoordinates: LatLng) => {
         moveMarker(note.noteId, newCoordinates);
     }, [ note.noteId ]);
 
-    const onContextMenu = useCallback((e: GeoMouseEvent) => openContextMenu(note.noteId, e, editable), [ note.noteId, editable ]);
+    const onContextMenu = useCallback((e: LeafletMouseEvent) => openContextMenu(note.noteId, e, editable), [ note.noteId, editable ]);
 
     return latLng && <Marker
         coordinates={latLng}
-        iconHtml={iconHtml}
-        iconSize={[25, 41]}
-        iconAnchor={[12, 41]}
+        icon={icon}
         draggable={editable}
         onMouseDown={onMouseDown}
         onDragged={editable ? onDragged : undefined}
@@ -254,40 +254,40 @@ function NoteGpxTrack({ note }: { note: FNote }) {
     const color = useNoteLabel(note, "color");
     const iconClass = useNoteLabel(note, "iconClass");
 
-    const trackColor = useMemo(() => note.getLabelValue("color") ?? "blue", [ color ]);
-    const startIconHtml = useMemo(() => buildIconHtml(note.getIcon(), note.getColorClass() ?? undefined, note.title), [ iconClass, color ]);
-    const endIconHtml = useMemo(() => buildIconHtml("bxs-flag-checkered"), [ ]);
-    const waypointIconHtml = useMemo(() => buildIconHtml("bx bx-pin"), [ ]);
-
-    return xmlString && <GpxTrack
-        gpxXmlString={xmlString}
-        trackColor={trackColor}
-        startIconHtml={startIconHtml}
-        endIconHtml={endIconHtml}
-        waypointIconHtml={waypointIconHtml}
-    />;
+    const options = useMemo<GPXOptions>(() => ({
+        markers: {
+            startIcon: buildIcon(note.getIcon(), note.getColorClass(), note.title),
+            endIcon: buildIcon("bxs-flag-checkered"),
+            wptIcons: {
+                "": buildIcon("bx bx-pin")
+            }
+        },
+        polyline_options: {
+            color: note.getLabelValue("color") ?? "blue"
+        }
+    }), [ color, iconClass ]);
+    return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />;
 }
 
-// SVG marker pin shape (replaces the Leaflet marker PNG).
-const MARKER_SVG = `<svg width="25" height="41" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">` +
-    `<path d="M12.5 0C5.6 0 0 5.6 0 12.5C0 21.9 12.5 41 12.5 41S25 21.9 25 12.5C25 5.6 19.4 0 12.5 0Z" fill="#2A81CB" />` +
-    `<circle cx="12.5" cy="12.5" r="8" fill="white" />` +
-    `</svg>`;
-
-function buildIconHtml(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string, archived?: boolean) {
+function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string, archived?: boolean) {
     let html = /*html*/`\
-        <div class="marker-pin">${MARKER_SVG}</div>
-        <span class="bx ${bxIconClass} tn-icon ${colorClass ?? ""}"></span>
+        <img class="icon" src="${markerIcon}" />
+        <img class="icon-shadow" src="${markerIconShadow}" />
+        <span class="bx ${bxIconClass} ${colorClass ?? ""}"></span>
         <span class="title-label">${title ?? ""}</span>`;
 
     if (noteIdLink) {
         html = `<div data-href="#root/${noteIdLink}" class="${archived ? "archived" : ""}">${html}</div>`;
     }
 
-    return html;
+    return divIcon({
+        html,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41]
+    });
 }
 
-function GeoMapTouchBar({ state, map }: { state: State, map: maplibregl.Map | null | undefined }) {
+function GeoMapTouchBar({ state, map }: { state: State, map: L.Map | null | undefined }) {
     const [ currentZoom, setCurrentZoom ] = useState<number>();
     const parentComponent = useContext(ParentComponent);
 
@@ -299,7 +299,7 @@ function GeoMapTouchBar({ state, map }: { state: State, map: maplibregl.Map | nu
         }
 
         map.on("zoom", onZoomChanged);
-        return () => { map.off("zoom", onZoomChanged); };
+        return () => map.off("zoom", onZoomChanged);
     }, [ map ]);
 
     return map && currentZoom && (

apps/client/src/widgets/collections/geomap/map.tsx

@@ -1,210 +1,139 @@
-import { useEffect, useImperativeHandle, useRef } from "preact/hooks";
-import maplibregl from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
+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";
 import { ComponentChildren, createContext, RefObject } from "preact";
 import { useElementSize, useSyncedRef } from "../../react/hooks";
 
-export interface GeoMouseEvent {
-    latlng: { lat: number; lng: number };
-    originalEvent: MouseEvent;
-}
-
-export const ParentMap = createContext<maplibregl.Map | null>(null);
+export const ParentMap = createContext<L.Map | null>(null);
 
 interface MapProps {
-    apiRef?: RefObject<maplibregl.Map | null>;
+    apiRef?: RefObject<L.Map | null>;
     containerRef?: RefObject<HTMLDivElement>;
-    coordinates: { lat: number; lng: number } | [number, number];
+    coordinates: LatLng | [number, number];
     zoom: number;
     layerName: string;
-    viewportChanged: (coordinates: { lat: number; lng: number }, zoom: number) => void;
+    viewportChanged: (coordinates: LatLng, zoom: number) => void;
     children: ComponentChildren;
-    onClick?: (e: GeoMouseEvent) => void;
-    onContextMenu?: (e: GeoMouseEvent) => void;
+    onClick?: (e: LeafletMouseEvent) => void;
+    onContextMenu?: (e: LeafletMouseEvent) => void;
     onZoom?: () => void;
     scale: boolean;
 }
 
-function toMapLibreEvent(e: maplibregl.MapMouseEvent): GeoMouseEvent {
-    return {
-        latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng },
-        originalEvent: e.originalEvent
-    };
-}
-
 export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef, onZoom }: MapProps) {
-    const mapRef = useRef<maplibregl.Map>(null);
+    const mapRef = useRef<L.Map>(null);
     const containerRef = useSyncedRef<HTMLDivElement>(_containerRef);
 
     useImperativeHandle(apiRef ?? null, () => mapRef.current);
 
-    // Initialize the map.
     useEffect(() => {
         if (!containerRef.current) return;
-
-        const layerData = MAP_LAYERS[layerName];
-        let style: maplibregl.StyleSpecification | string;
-
-        if (layerData.type === "vector") {
-            style = typeof layerData.style === "string"
-                ? layerData.style
-                : layerData.styleFallback;
-        } else {
-            style = {
-                version: 8,
-                sources: {
-                    "raster-tiles": {
-                        type: "raster",
-                        tiles: [layerData.url],
-                        tileSize: 256,
-                        attribution: layerData.attribution
-                    }
-                },
-                layers: [
-                    {
-                        id: "raster-layer",
-                        type: "raster",
-                        source: "raster-tiles"
-                    }
-                ]
-            };
-        }
-
-        const center = Array.isArray(coordinates)
-            ? [coordinates[1], coordinates[0]] as [number, number]
-            : [coordinates.lng, coordinates.lat] as [number, number];
-
-        const mapInstance = new maplibregl.Map({
-            container: containerRef.current,
-            style,
-            center,
-            zoom,
-            minZoom: 2,
-            maxBounds: [[-180, -90], [180, 90]]
+        const mapInstance = L.map(containerRef.current, {
+            worldCopyJump: false,
+            maxBounds: [
+                [-90, -180],
+                [90, 180]
+            ],
+            minZoom: 2
         });
 
         mapRef.current = mapInstance;
-
-        // Load async vector style if needed.
-        if (layerData.type === "vector" && typeof layerData.style !== "string") {
-            layerData.style().then(asyncStyle => {
-                mapInstance.setStyle(asyncStyle as maplibregl.StyleSpecification);
-            });
-        }
-
         return () => {
+            mapInstance.off();
             mapInstance.remove();
-            mapRef.current = null;
         };
     }, []);
 
-    // React to layer changes.
+    // Load the layer asynchronously.
+    const [ layer, setLayer ] = useState<Layer>();
+    useEffect(() => {
+        async function load() {
+            const layerData = MAP_LAYERS[layerName];
+
+            if (layerData.type === "vector") {
+                const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
+                await import("@maplibre/maplibre-gl-leaflet");
+
+                setLayer(L.maplibreGL({
+                    style: style as any
+                }));
+            } else {
+                setLayer(L.tileLayer(layerData.url, {
+                    attribution: layerData.attribution,
+                    detectRetina: true,
+                    noWrap: true
+                }));
+            }
+        }
+
+        load();
+    }, [ layerName ]);
+
+    // Attach layer to the map.
     useEffect(() => {
         const map = mapRef.current;
-        if (!map) return;
-
-        const layerData = MAP_LAYERS[layerName];
-        if (layerData.type === "vector") {
-            if (typeof layerData.style === "string") {
-                map.setStyle(layerData.style);
-            } else {
-                layerData.style().then(asyncStyle => {
-                    map.setStyle(asyncStyle as maplibregl.StyleSpecification);
-                });
-            }
-        } else {
-            map.setStyle({
-                version: 8,
-                sources: {
-                    "raster-tiles": {
-                        type: "raster",
-                        tiles: [layerData.url],
-                        tileSize: 256,
-                        attribution: layerData.attribution
-                    }
-                },
-                layers: [
-                    {
-                        id: "raster-layer",
-                        type: "raster",
-                        source: "raster-tiles"
-                    }
-                ]
-            });
-        }
-    }, [ layerName ]);
+        const layerToAdd = layer;
+        if (!map || !layerToAdd) return;
+        layerToAdd.addTo(map);
+        return () => layerToAdd.removeFrom(map);
+    }, [ mapRef, layer ]);
 
     // React to coordinate changes.
     useEffect(() => {
         if (!mapRef.current) return;
-
-        const center = Array.isArray(coordinates)
-            ? [coordinates[1], coordinates[0]] as [number, number]
-            : [coordinates.lng, coordinates.lat] as [number, number];
-
-        mapRef.current.setCenter(center);
-        mapRef.current.setZoom(zoom);
-    }, [ coordinates, zoom ]);
+        mapRef.current.setView(coordinates, zoom);
+    }, [ mapRef, coordinates, zoom ]);
 
     // Viewport callback.
     useEffect(() => {
         const map = mapRef.current;
         if (!map) return;
 
-        const updateFn = () => {
-            const center = map.getCenter();
-            viewportChanged({ lat: center.lat, lng: center.lng }, map.getZoom());
-        };
+        const updateFn = () => viewportChanged(map.getBounds().getCenter(), map.getZoom());
         map.on("moveend", updateFn);
+        map.on("zoomend", updateFn);
 
         return () => {
             map.off("moveend", updateFn);
+            map.off("zoomend", updateFn);
         };
-    }, [ viewportChanged ]);
+    }, [ mapRef, viewportChanged ]);
 
     useEffect(() => {
-        const map = mapRef.current;
-        if (!onClick || !map) return;
-
-        const handler = (e: maplibregl.MapMouseEvent) => onClick(toMapLibreEvent(e));
-        map.on("click", handler);
-        return () => { map.off("click", handler); };
-    }, [ onClick ]);
+        if (onClick && mapRef.current) {
+            mapRef.current.on("click", onClick);
+            return () => mapRef.current?.off("click", onClick);
+        }
+    }, [ mapRef, onClick ]);
 
     useEffect(() => {
-        const map = mapRef.current;
-        if (!onContextMenu || !map) return;
-
-        const handler = (e: maplibregl.MapMouseEvent) => {
-            e.preventDefault();
-            onContextMenu(toMapLibreEvent(e));
-        };
-        map.on("contextmenu", handler);
-        return () => { map.off("contextmenu", handler); };
-    }, [ onContextMenu ]);
+        if (onContextMenu && mapRef.current) {
+            mapRef.current.on("contextmenu", onContextMenu);
+            return () => mapRef.current?.off("contextmenu", onContextMenu);
+        }
+    }, [ mapRef, onContextMenu ]);
 
     useEffect(() => {
-        const map = mapRef.current;
-        if (!onZoom || !map) return;
-
-        map.on("zoom", onZoom);
-        return () => { map.off("zoom", onZoom); };
-    }, [ onZoom ]);
+        if (onZoom && mapRef.current) {
+            mapRef.current.on("zoom", onZoom);
+            return () => mapRef.current?.off("zoom", onZoom);
+        }
+    }, [ mapRef, onZoom ]);
 
     // Scale
     useEffect(() => {
         const map = mapRef.current;
         if (!scale || !map) return;
-        const scaleControl = new maplibregl.ScaleControl();
-        map.addControl(scaleControl);
-        return () => { map.removeControl(scaleControl); };
-    }, [ scale ]);
+        const scaleControl  = control.scale();
+        scaleControl.addTo(map);
+        return () => scaleControl.remove();
+    }, [ mapRef, scale ]);
 
     // Adapt to container size changes.
     const size = useElementSize(containerRef);
     useEffect(() => {
-        mapRef.current?.resize();
+        mapRef.current?.invalidateSize();
     }, [ size?.width, size?.height ]);
 
     return (

apps/client/src/widgets/collections/geomap/map_layer.ts

@@ -5,8 +5,7 @@ export interface MapLayer {
 
 interface VectorLayer extends MapLayer {
     type: "vector";
-    style: string | (() => Promise<{}>);
-    styleFallback: {};
+    style: string | (() => Promise<{}>)
 }
 
 interface RasterLayer extends MapLayer {
@@ -15,9 +14,6 @@ interface RasterLayer extends MapLayer {
     attribution: string;
 }
 
-// Minimal empty style used as a placeholder while the real style loads asynchronously.
-const EMPTY_STYLE = { version: 8, sources: {}, layers: [] };
-
 export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
     "openstreetmap": {
         name: "OpenStreetMap",
@@ -28,33 +24,28 @@ export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
     "versatiles-colorful": {
         name: "VersaTiles Colorful",
         type: "vector",
-        style: async () => (await import("./styles/colorful/en.json")).default,
-        styleFallback: EMPTY_STYLE
+        style: async () => (await import("./styles/colorful/en.json")).default
     },
     "versatiles-eclipse": {
         name: "VersaTiles Eclipse",
         type: "vector",
         style: async () => (await import("./styles/eclipse/en.json")).default,
-        styleFallback: EMPTY_STYLE,
         isDarkTheme: true
     },
     "versatiles-graybeard": {
         name: "VersaTiles Graybeard",
         type: "vector",
-        style: async () => (await import("./styles/graybeard/en.json")).default,
-        styleFallback: EMPTY_STYLE
+        style: async () => (await import("./styles/graybeard/en.json")).default
     },
     "versatiles-neutrino": {
         name: "VersaTiles Neutrino",
         type: "vector",
-        style: async () => (await import("./styles/neutrino/en.json")).default,
-        styleFallback: EMPTY_STYLE
+        style: async () => (await import("./styles/neutrino/en.json")).default
     },
     "versatiles-shadow": {
         name: "VersaTiles Shadow",
         type: "vector",
         style: async () => (await import("./styles/shadow/en.json")).default,
-        styleFallback: EMPTY_STYLE,
         isDarkTheme: true
     }
 };

apps/client/src/widgets/collections/geomap/marker.tsx

@@ -1,207 +1,71 @@
-import { useContext, useEffect, useRef } from "preact/hooks";
-import { ParentMap, GeoMouseEvent } from "./map";
-import maplibregl from "maplibre-gl";
+import { useContext, useEffect } from "preact/hooks";
+import { ParentMap } from "./map";
+import { DivIcon, GPX, GPXOptions, Icon, LatLng, Marker as LeafletMarker, LeafletMouseEvent, marker, MarkerOptions } from "leaflet";
+import "leaflet-gpx";
 
 export interface MarkerProps {
     coordinates: [ number, number ];
-    iconHtml?: string;
-    iconSize?: [number, number];
-    iconAnchor?: [number, number];
+    icon?: Icon | DivIcon;
     onClick?: () => void;
     onMouseDown?: (e: MouseEvent) => void;
-    onDragged?: ((newCoordinates: { lat: number; lng: number }) => void);
-    onContextMenu: (e: GeoMouseEvent) => void;
+    onDragged?: ((newCoordinates: LatLng) => void);
+    onContextMenu: (e: LeafletMouseEvent) => void;
     draggable?: boolean;
 }
 
-export default function Marker({ coordinates, iconHtml, iconSize, iconAnchor, draggable, onClick, onDragged, onMouseDown, onContextMenu }: MarkerProps) {
+export default function Marker({ coordinates, icon, draggable, onClick, onDragged, onMouseDown, onContextMenu }: MarkerProps) {
     const parentMap = useContext(ParentMap);
-    const markerRef = useRef<maplibregl.Marker>(null);
 
     useEffect(() => {
         if (!parentMap) return;
 
-        const el = document.createElement("div");
-        el.className = "geo-marker";
-        if (iconHtml) {
-            el.innerHTML = iconHtml;
-        }
-        if (iconSize) {
-            el.style.width = `${iconSize[0]}px`;
-            el.style.height = `${iconSize[1]}px`;
+        const options: MarkerOptions = { icon };
+        if (draggable) {
+            options.draggable = true;
+            options.autoPan = true;
+            options.autoPanSpeed = 5;
         }
 
-        const newMarker = new maplibregl.Marker({
-            element: el,
-            draggable: !!draggable,
-            anchor: "bottom"
-        })
-        .setLngLat([coordinates[1], coordinates[0]])
-        .addTo(parentMap);
-
-        markerRef.current = newMarker;
+        const newMarker = marker(coordinates, options);
 
         if (onClick) {
-            el.addEventListener("click", (e) => {
-                e.stopPropagation();
-                onClick();
-            });
+            newMarker.on("click", () => onClick());
         }
 
         if (onMouseDown) {
-            el.addEventListener("mousedown", (e) => {
-                if (e.button === 1) {
-                    e.stopPropagation();
-                    onMouseDown(e);
-                }
-            });
+            newMarker.on("mousedown", e => onMouseDown(e.originalEvent));
         }
 
         if (onDragged) {
-            newMarker.on("dragend", () => {
-                const lngLat = newMarker.getLngLat();
-                onDragged({ lat: lngLat.lat, lng: lngLat.lng });
+            newMarker.on("moveend", e => {
+                const coordinates = (e.target as LeafletMarker).getLatLng();
+                onDragged(coordinates);
             });
         }
 
         if (onContextMenu) {
-            el.addEventListener("contextmenu", (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                const lngLat = newMarker.getLngLat();
-                onContextMenu({
-                    latlng: { lat: lngLat.lat, lng: lngLat.lng },
-                    originalEvent: e
-                });
-            });
+            newMarker.on("contextmenu", e => onContextMenu(e))
         }
 
-        return () => {
-            newMarker.remove();
-            markerRef.current = null;
-        };
-    }, [ parentMap, coordinates, onMouseDown, onDragged, iconHtml ]);
+        newMarker.addTo(parentMap);
 
-    return (<div />);
+        return () => newMarker.removeFrom(parentMap);
+    }, [ parentMap, coordinates, onMouseDown, onDragged, icon ]);
+
+    return (<div />)
 }
 
-export interface GpxTrackProps {
-    gpxXmlString: string;
-    trackColor?: string;
-    startIconHtml?: string;
-    endIconHtml?: string;
-    waypointIconHtml?: string;
-}
-
-export function GpxTrack({ gpxXmlString, trackColor, startIconHtml, endIconHtml, waypointIconHtml }: GpxTrackProps) {
+export function GpxTrack({ gpxXmlString, options }: { gpxXmlString: string, options: GPXOptions }) {
     const parentMap = useContext(ParentMap);
 
     useEffect(() => {
         if (!parentMap) return;
 
-        const markers: maplibregl.Marker[] = [];
-        const sourceId = `gpx-source-${Math.random().toString(36).slice(2)}`;
-        const layerId = `gpx-layer-${sourceId}`;
+        const track = new GPX(gpxXmlString, options);
+        track.addTo(parentMap);
 
-        function addGpxToMap() {
-            const parser = new DOMParser();
-            const gpxDoc = parser.parseFromString(gpxXmlString, "application/xml");
-
-            // Parse tracks.
-            const coordinates: [number, number][] = [];
-            const trackPoints = gpxDoc.querySelectorAll("trkpt, rtept");
-            for (const pt of trackPoints) {
-                const lat = parseFloat(pt.getAttribute("lat") ?? "0");
-                const lon = parseFloat(pt.getAttribute("lon") ?? "0");
-                coordinates.push([lon, lat]);
-            }
-
-            // Add GeoJSON line for the track.
-            if (coordinates.length > 0) {
-                parentMap.addSource(sourceId, {
-                    type: "geojson",
-                    data: {
-                        type: "Feature",
-                        properties: {},
-                        geometry: {
-                            type: "LineString",
-                            coordinates
-                        }
-                    }
-                });
-
-                parentMap.addLayer({
-                    id: layerId,
-                    type: "line",
-                    source: sourceId,
-                    paint: {
-                        "line-color": trackColor ?? "blue",
-                        "line-width": 3
-                    }
-                });
-
-                // Start marker
-                if (startIconHtml) {
-                    const startEl = document.createElement("div");
-                    startEl.className = "geo-marker";
-                    startEl.innerHTML = startIconHtml;
-                    const startMarker = new maplibregl.Marker({ element: startEl, anchor: "bottom" })
-                        .setLngLat(coordinates[0])
-                        .addTo(parentMap);
-                    markers.push(startMarker);
-                }
-
-                // End marker
-                if (endIconHtml && coordinates.length > 1) {
-                    const endEl = document.createElement("div");
-                    endEl.className = "geo-marker";
-                    endEl.innerHTML = endIconHtml;
-                    const endMarker = new maplibregl.Marker({ element: endEl, anchor: "bottom" })
-                        .setLngLat(coordinates[coordinates.length - 1])
-                        .addTo(parentMap);
-                    markers.push(endMarker);
-                }
-            }
-
-            // Parse waypoints.
-            const waypoints = gpxDoc.querySelectorAll("wpt");
-            for (const wpt of waypoints) {
-                const lat = parseFloat(wpt.getAttribute("lat") ?? "0");
-                const lon = parseFloat(wpt.getAttribute("lon") ?? "0");
-                if (waypointIconHtml) {
-                    const wptEl = document.createElement("div");
-                    wptEl.className = "geo-marker";
-                    wptEl.innerHTML = waypointIconHtml;
-                    const wptMarker = new maplibregl.Marker({ element: wptEl, anchor: "bottom" })
-                        .setLngLat([lon, lat])
-                        .addTo(parentMap);
-                    markers.push(wptMarker);
-                }
-            }
-        }
-
-        if (parentMap.isStyleLoaded()) {
-            addGpxToMap();
-        } else {
-            parentMap.once("style.load", addGpxToMap);
-        }
-
-        return () => {
-            for (const m of markers) {
-                m.remove();
-            }
-            try {
-                if (parentMap.getLayer(layerId)) {
-                    parentMap.removeLayer(layerId);
-                }
-                if (parentMap.getSource(sourceId)) {
-                    parentMap.removeSource(sourceId);
-                }
-            } catch {
-                // Map may be already removed.
-            }
-        };
-    }, [ parentMap, gpxXmlString, trackColor, startIconHtml, endIconHtml, waypointIconHtml ]);
+        return () => track.removeFrom(parentMap);
+    }, [ parentMap, gpxXmlString, options ]);
 
     return <div />;
 }

apps/server/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.13.0-bullseye-slim AS builder
+FROM node:24.13.1-bullseye-slim AS builder
 RUN corepack enable
 
 # Install native dependencies since we might be building cross-platform.
@@ -7,7 +7,7 @@ COPY ./docker/package.json ./docker/pnpm-workspace.yaml /usr/src/app/
 # We have to use --no-frozen-lockfile due to CKEditor patches
 RUN pnpm install --no-frozen-lockfile --prod && pnpm rebuild
 
-FROM node:24.13.0-bullseye-slim
+FROM node:24.13.1-bullseye-slim
 # Install only runtime dependencies
 RUN apt-get update && \
     apt-get install -y --no-install-recommends \

apps/server/Dockerfile.alpine

@@ -1,4 +1,4 @@
-FROM node:24.13.0-alpine AS builder
+FROM node:24.13.1-alpine AS builder
 RUN corepack enable
 
 # Install native dependencies since we might be building cross-platform.
@@ -7,7 +7,7 @@ COPY ./docker/package.json ./docker/pnpm-workspace.yaml /usr/src/app/
 # We have to use --no-frozen-lockfile due to CKEditor patches
 RUN pnpm install --no-frozen-lockfile --prod && pnpm rebuild
 
-FROM node:24.13.0-alpine
+FROM node:24.13.1-alpine
 # Install runtime dependencies
 RUN apk add --no-cache su-exec shadow
 

apps/server/Dockerfile.alpine.rootless

@@ -1,4 +1,4 @@
-FROM node:24.13.0-alpine AS builder
+FROM node:24.13.1-alpine AS builder
 RUN corepack enable
 
 # Install native dependencies since we might be building cross-platform.
@@ -7,7 +7,7 @@ COPY ./docker/package.json ./docker/pnpm-workspace.yaml /usr/src/app/
 # We have to use --no-frozen-lockfile due to CKEditor patches
 RUN pnpm install --no-frozen-lockfile --prod && pnpm rebuild
 
-FROM node:24.13.0-alpine
+FROM node:24.13.1-alpine
 # Create a non-root user with configurable UID/GID
 ARG USER=trilium
 ARG UID=1001

apps/server/Dockerfile.rootless

@@ -1,4 +1,4 @@
-FROM node:24.13.0-bullseye-slim AS builder
+FROM node:24.13.1-bullseye-slim AS builder
 RUN corepack enable
 
 # Install native dependencies since we might be building cross-platform.
@@ -7,7 +7,7 @@ COPY ./docker/package.json ./docker/pnpm-workspace.yaml /usr/src/app/
 # We have to use --no-frozen-lockfile due to CKEditor patches
 RUN pnpm install --no-frozen-lockfile --prod && pnpm rebuild
 
-FROM node:24.13.0-bullseye-slim
+FROM node:24.13.1-bullseye-slim
 # Create a non-root user with configurable UID/GID
 ARG USER=trilium
 ARG UID=1001

package.json

@@ -50,7 +50,7 @@
     "@triliumnext/server": "workspace:*",
     "@types/express": "5.0.6",
     "@types/js-yaml": "4.0.9",
-    "@types/node": "24.10.10",
+    "@types/node": "24.10.13",
     "@vitest/browser-webdriverio": "4.0.18",
     "@vitest/coverage-v8": "4.0.18",
     "@vitest/ui": "4.0.18",