From d33187a8e468ae84911e2153d0eaf2398644235f Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 4 Jan 2026 23:30:03 +0100
Subject: [PATCH] Migrate the user diary to be maplibre based

Also creates `OSM.MapLibre.defaultSecondaryMapOptions` to share the map style between the secondary maps this also
---
 app/assets/javascripts/dashboard.js    | 16 +-------
 app/assets/javascripts/diary_entry.js  | 56 +++++++++++++++-----------
 app/assets/javascripts/maplibre.map.js | 16 ++++++++
 3 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/dashboard.js b/app/assets/javascripts/dashboard.js
index dd7cadfed..965a9f765 100644
--- a/app/assets/javascripts/dashboard.js
+++ b/app/assets/javascripts/dashboard.js
@@ -1,25 +1,11 @@
 //= require maplibre.map
-//= require maplibre.i18n
 //= require maplibre.combinedcontrolgroup
 
 $(function () {
-  const defaultHomeZoom = 11;
   let map;
 
   if ($("#map").length) {
-    map = new maplibregl.Map({
-      container: "map",
-      style: OSM.MapLibre.Styles.Mapnik,
-      attributionControl: false,
-      locale: OSM.MapLibre.Locale,
-      rollEnabled: false,
-      dragRotate: false,
-      pitchWithRotate: false,
-      bearingSnap: 180,
-      maxPitch: 0,
-      center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
-      zoom: OSM.home ? defaultHomeZoom : 0
-    });
+    map = new maplibregl.Map(OSM.MapLibre.defaultSecondaryMapOptions);
 
     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
     const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index 041e49f7e..a2b6bee07 100644
--- a/app/assets/javascripts/diary_entry.js
+++ b/app/assets/javascripts/diary_entry.js
@@ -1,18 +1,26 @@
+//= require maplibre.map
+
 $(function () {
   let marker, map;
 
-  function setLocation(e) {
-    const latlng = e.latlng.wrap();
-
-    $("#latitude").val(latlng.lat);
-    $("#longitude").val(latlng.lng);
+  function updateFormFieldsFromMarkerPosition() {
+    const lngLat = marker.getLngLat();
+    $("#latitude").val(lngLat.lat);
+    $("#longitude").val(lngLat.lng);
+  }
 
+  function setLocation(e) {
+    const coords = e.lngLat.wrap();
     if (marker) {
-      map.removeLayer(marker);
+      marker.setLngLat(coords);
+    } else {
+      marker = OSM.MapLibre.getMarker({ draggable: true })
+        .setLngLat(coords)
+        .setPopup(OSM.MapLibre.getPopup(OSM.i18n.t("diary_entries.edit.marker_text")))
+        .addTo(map);
+      marker.on("dragend", updateFormFieldsFromMarkerPosition);
     }
-
-    marker = L.marker(e.latlng, { icon: OSM.getMarker({}) }).addTo(map)
-      .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
+    updateFormFieldsFromMarkerPosition();
   }
 
   $("#usemap").click(function (e) {
@@ -22,21 +30,23 @@ $(function () {
     $("#usemap").hide();
 
     const params = $("#map").data();
-    const centre = [params.lat, params.lon];
-    const position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
-
-    map = L.map("map", {
-      attributionControl: false,
-      zoomControl: false
-    }).addLayer(new L.OSM.Mapnik());
-
-    L.OSM.zoom({ position }).addTo(map);
-
-    map.setView(centre, params.zoom);
-
+    map = new maplibregl.Map({
+      ...OSM.MapLibre.defaultSecondaryMapOptions,
+      center: [params.lon, params.lat],
+      zoom: params.zoom - 1
+    });
+
+    const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
+    const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
+    map.addControl(navigationControl, position);
+    map.touchZoomRotate.disableRotation();
+    map.keyboard.disableRotation();
+
+    // Create marker if coordinates exist when map is shown
     if ($("#latitude").val() && $("#longitude").val()) {
-      marker = L.marker(centre, { icon: OSM.getMarker({}) }).addTo(map)
-        .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
+      const lngLat = new maplibregl.LngLat($("#longitude").val(), $("#latitude").val());
+      setLocation({ lngLat });
+      map.setCenter(lngLat);
     }
 
     map.on("click", setLocation);
diff --git a/app/assets/javascripts/maplibre.map.js b/app/assets/javascripts/maplibre.map.js
index 9814e5acd..de4a890ed 100644
--- a/app/assets/javascripts/maplibre.map.js
+++ b/app/assets/javascripts/maplibre.map.js
@@ -1,4 +1,5 @@
 //= require maplibre-gl/dist/maplibre-gl
+//= require maplibre.i18n
 
 OSM.MapLibre.Styles.Mapnik = {
   version: 8,
@@ -21,6 +22,21 @@ OSM.MapLibre.Styles.Mapnik = {
   ]
 };
 
+OSM.MapLibre.defaultHomeZoom = 11;
+OSM.MapLibre.defaultSecondaryMapOptions = {
+  container: "map",
+  style: OSM.MapLibre.Styles.Mapnik,
+  attributionControl: false,
+  locale: OSM.MapLibre.Locale,
+  rollEnabled: false,
+  dragRotate: false,
+  pitchWithRotate: false,
+  bearingSnap: 180,
+  maxPitch: 0,
+  center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
+  zoom: OSM.home ? OSM.MapLibre.defaultHomeZoom : 0
+};
+
 // Helper function to create Leaflet style (SVG comes from Leaflet) markers for MapLibre
 // new maplibregl.Marker({ color: color }) is simpler, but does not have the exact same gradient
 OSM.MapLibre.getMarker = function ({ icon = "dot", color = "var(--marker-red)", ...options }) {
-- 
2.39.5