Replace Leaflet with MapLibre GL for geo map collection

apps/client/package.json

@@ -23,7 +23,6 @@
     "@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",
@@ -51,9 +50,8 @@
     "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",
@@ -72,8 +70,6 @@
     "@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 { LeafletMouseEvent } from "leaflet";
+import type { GeoMouseEvent } from "../widgets/collections/geomap/map.js";
 
 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 | LeafletMouseEvent): MenuItem<CommandNames>[] {
+function getItems(e: ContextMenuEvent | GeoMouseEvent): 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 | LeafletMouseEvent): MenuItem<CommandName
     ];
 }
 
-function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | LeafletMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | GeoMouseEvent, 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 | LeafletMouseEvent) {
+function getNtxId(e: ContextMenuEvent | GeoMouseEvent) {
     if (utils.isDesktop()) {
         const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
         if (!subContexts) return null;

apps/client/src/translations/en/translation.json

@@ -1010,7 +1010,7 @@
     "no_attachments": "This note has no attachments."
   },
   "book": {
-    "no_children_help": "This collection doesn't have any child notes so there's nothing to display. See <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a> for details.",
+    "no_children_help": "This collection doesn't have any child notes so there's nothing to display.",
     "drag_locked_title": "Locked for editing",
     "drag_locked_message": "Dragging not allowed since the collection is locked for editing."
   },

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

@@ -1,3 +1,5 @@
+export {};
+
 // TODO: Use real @types/ but that one generates a lot of errors.
 declare module "draggabilly" {
     type DraggabillyEventData = {};
@@ -32,26 +34,6 @@ 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

@@ -88,12 +88,6 @@
 }
 /* #endregion */
 
-/* #region Geo map buttons */
-.leaflet-pane {
-    z-index: 50;
-}
-/* #endregion */
-
 /* #region Close floating buttons */
 .close-floating-buttons {
     margin-inline-start: 5px !important;

apps/client/src/widgets/NoteDetail.tsx

@@ -1,6 +1,7 @@
 import "./NoteDetail.css";
 
 import clsx from "clsx";
+import { note } from "mermaid/dist/rendering-util/rendering-elements/shapes/note.js";
 import { isValidElement, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -355,6 +356,14 @@ export function checkFullHeight(noteContext: NoteContext | undefined, type: Exte
     // https://github.com/zadam/trilium/issues/2522
     const isBackendNote = noteContext?.noteId === "_backendLog";
     const isFullHeightNoteType = type && TYPE_MAPPINGS[type].isFullHeight;
+
+    // Allow vertical centering when there are no results.
+    if (type === "book" &&
+        [ "grid", "list" ].includes(noteContext.note?.getLabelValue("viewType") ?? "grid") &&
+        !noteContext.note?.hasChildren()) {
+        return true;
+    }
+
     return (!noteContext?.hasNoteList() && isFullHeightNoteType)
         || noteContext?.viewScope?.viewMode === "attachments"
         || isBackendNote;

apps/client/src/widgets/collections/NoteList.css

@@ -2,8 +2,12 @@
     min-height: 0;
     max-width: var(--max-content-width); /* Inherited from .note-split */
 
-    overflow: auto;
+    overflow: visible;
     contain: none !important;
+
+    &.full-height {
+        overflow: auto;
+    }
 }
 
 body.prefers-centered-content .note-list-widget:not(.full-height) {

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

@@ -1,14 +1,51 @@
-import type { LatLng, LeafletMouseEvent } from "leaflet";
+import { MapMouseEvent } from "maplibre-gl";
+import { useCallback, useContext, useEffect } from "preact/hooks";
+
 import appContext, { type CommandMappings } from "../../../components/app_context.js";
+import FNote from "../../../entities/fnote.js";
 import contextMenu, { type MenuItem } from "../../../menus/context_menu.js";
-import linkContextMenu from "../../../menus/link_context_menu.js";
 import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
-import { t } from "../../../services/i18n.js";
-import { createNewNote } from "./api.js";
+import linkContextMenu from "../../../menus/link_context_menu.js";
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import { t } from "../../../services/i18n.js";
 import link from "../../../services/link.js";
+import { createNewNote } from "./api.js";
+import { type GeoMouseEvent,ParentMap, toMapLibreEvent } from "./map.js";
+import { MARKER_LAYER } from "./Markers.js";
+
+export default function ContextMenus({ note, isReadOnly }: { note: FNote, isReadOnly }) {
+    const map = useContext(ParentMap);
 
-export default function openContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
+    const onContextMenu = useCallback((e: GeoMouseEvent) => {
+        if (!map) return;
+        const features = map.queryRenderedFeatures(e.point, {
+            layers: [ MARKER_LAYER ]
+        });
+
+        if (features.length > 0) {
+            // Marker context menu.
+            openContextMenu(features[0].properties.id, e, !isReadOnly);
+        } else {
+            // Empty area context menu.
+            openMapContextMenu(note.noteId, e, !isReadOnly);
+        }
+    }, [ map, note.noteId, isReadOnly ]);
+
+    useEffect(() => {
+        if (!onContextMenu || !map) return;
+
+        const handler = (e: MapMouseEvent) => {
+            e.preventDefault();
+            onContextMenu(toMapLibreEvent(e));
+        };
+        map.on("contextmenu", handler);
+        return () => { map.off("contextmenu", handler); };
+    }, [ map, onContextMenu ]);
+
+    return null;
+}
+
+export function openContextMenu(noteId: string, e: GeoMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e),
         { kind: "separator" },
@@ -44,7 +81,7 @@ export default function openContextMenu(noteId: string, e: LeafletMouseEvent, is
     });
 }
 
-export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
+export function openMapContextMenu(noteId: string, e: GeoMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e)
     ];
@@ -58,7 +95,7 @@ export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEdita
                 handler: () => createNewNote(noteId, e),
                 uiIcon: "bx bx-plus"
             }
-        ]
+        ];
     }
 
     contextMenu.show({
@@ -71,8 +108,8 @@ export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEdita
     });
 }
 
-function buildGeoLocationItem(e: LeafletMouseEvent) {
-    function formatGeoLocation(latlng: LatLng, precision: number = 6) {
+function buildGeoLocationItem(e: GeoMouseEvent) {
+    function formatGeoLocation(latlng: { lat: number; lng: number }, precision: number = 6) {
         return `${latlng.lat.toFixed(precision)}, ${latlng.lng.toFixed(precision)}`;
     }