From 7a8134e7b163ee7a7655a00903a5fd2adcf5b848 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 4 Jan 2026 20:23:13 +0100
Subject: [PATCH] Migrate user location edit page to MapLibre

This commit migrates the user home location page (the "Edit" tab on the user profile) from Leaflet to MapLibre GL JS. This is part of a wider migration to
MapLibre across the website. The change follows the pattern established in the dashboard migration.
---
 app/assets/javascripts/user.js | 74 +++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 913eda3d6..7d98f46f2 100644
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -1,8 +1,10 @@
-//= require leaflet.locate
+//= require maplibre.map
+//= require maplibre.i18n
+//= require maplibre.combinedcontrolgroup
 //= require ./home_location_name-endpoint
 
 $(function () {
-  const defaultHomeZoom = 12;
+  const defaultHomeZoom = 11;
   let map, marker, deleted_lat, deleted_lon, deleted_home_name, homeLocationNameGeocoder, savedLat, savedLon;
 
   if ($("#social_links").length) {
@@ -50,56 +52,62 @@ $(function () {
   }
 
   if ($("#map").length) {
-    map = L.map("map", {
+    map = new maplibregl.Map({
+      container: "map",
+      style: OSM.MapLibre.Styles.Mapnik,
       attributionControl: false,
-      zoomControl: false
-    }).addLayer(new L.OSM.Mapnik());
+      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
+    });
 
     savedLat = $("#home_lat").val();
     savedLon = $("#home_lon").val();
     homeLocationNameGeocoder = OSM.HomeLocationNameGeocoder($("#home_lat"), $("#home_lon"), $("#home_location_name"));
 
-    const position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
-
-    L.OSM.zoom({ position }).addTo(map);
-
-    L.OSM.locate({ position }).addTo(map);
-
-    if (OSM.home) {
-      map.setView([OSM.home.lat, OSM.home.lon], defaultHomeZoom);
-    } else {
-      map.setView([0, 0], 0);
-    }
-
-    marker = L.marker([0, 0], {
-      icon: OSM.getMarker({}),
-      keyboard: false,
-      interactive: false
+    const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
+    const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
+    const geolocateControl = new maplibregl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true
+      },
+      trackUserLocation: true
     });
+    map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
+    map.touchZoomRotate.disableRotation();
+    map.keyboard.disableRotation();
+
+    marker = OSM.MapLibre.getMarker({});
 
     if (OSM.home) {
-      marker.setLatLng([OSM.home.lat, OSM.home.lon]);
+      marker.setLngLat([OSM.home.lon, OSM.home.lat]);
       marker.addTo(map);
     }
 
     map.on("click", function (e) {
       if (!$("#updatehome").is(":checked")) return;
 
-      const [lat, lon] = OSM.cropLocation(e.latlng, map.getZoom());
+      const [lat, lon] = OSM.cropLocation(e.lngLat, map.getZoom() + 1);
 
       $("#home_lat").val(lat);
       $("#home_lon").val(lon);
 
       clearDeletedText();
       respondToHomeLatLonUpdate();
-    }).on("moveend", function () {
+    });
+    map.on("moveend", function () {
       const lat = $("#home_lat").val().trim(),
             lon = $("#home_lon").val().trim();
       let location;
 
       try {
         if (lat && lon) {
-          location = L.latLng(lat, lon);
+          location = new maplibregl.LngLat(lon, lat);
         }
       } catch (error) {
         // keep location undefined
@@ -124,7 +132,7 @@ $(function () {
       const lat = $("#home_lat").val(),
             lon = $("#home_lon").val();
 
-      map.setView([lat, lon], defaultHomeZoom);
+      map.flyTo({ center: [lon, lat], zoom: defaultHomeZoom });
     });
 
     $("#home_delete").click(function () {
@@ -160,7 +168,7 @@ $(function () {
 
     try {
       if (lat && lon) {
-        location = L.latLng(lat, lon);
+        location = new maplibregl.LngLat(lon, lat);
         if (updateLocationName) {
           if (savedLat && savedLon && $("#home_location_name").val().trim()) {
             homeLocationNameGeocoder.updateHomeLocationName(false, savedLat, savedLon, () => {
@@ -187,19 +195,19 @@ $(function () {
       ((deleted_lat && deleted_lon) || deleted_home_name)
     ));
     if (location) {
-      marker.setLatLng([lat, lon]);
+      marker.setLngLat([lon, lat]);
       marker.addTo(map);
-      map.panTo([lat, lon]);
+      map.panTo([lon, lat]);
     } else {
-      marker.removeFrom(map);
+      marker.remove();
     }
   }
 
   function isCloseEnoughToMapCenter(location) {
-    const inputPt = map.latLngToContainerPoint(location),
-          centerPt = map.latLngToContainerPoint(map.getCenter());
+    const inputPt = map.project(location),
+          centerPt = map.project(map.getCenter());
 
-    return centerPt.distanceTo(inputPt) < 10;
+    return Math.sqrt(Math.pow(centerPt.x - inputPt.x, 2) + Math.pow(centerPt.y - inputPt.y, 2)) < 10;
   }
 
   function clearDeletedText() {
-- 
2.39.5