From f9765bb74f966afe51c75cf2c60a49b5cc219ebb Mon Sep 17 00:00:00 2001 From: Frank Elsinga Date: Sun, 26 Apr 2026 14:14:02 +0200 Subject: [PATCH] Migrate to lat, lng coords Signed-off-by: Frank Elsinga --- app/assets/javascripts/index/contextmenu.js | 16 +++++------ .../javascripts/index/directions-endpoint.js | 3 ++- app/assets/javascripts/index/directions.js | 27 ++++++++++--------- app/assets/javascripts/index/export.js | 19 +++++++------ .../index/history-changesets-layer.js | 4 +-- app/assets/javascripts/index/new_note.js | 2 +- app/assets/javascripts/index/note.js | 4 +-- app/assets/javascripts/index/query.js | 10 +++---- app/assets/javascripts/index/search.js | 4 +-- app/assets/javascripts/leaflet.map.js | 7 +++-- app/assets/javascripts/osm.js.erb | 12 ++++++--- app/assets/javascripts/user.js | 5 ++-- 12 files changed, 60 insertions(+), 53 deletions(-) diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 4808b8f81..1b5e77dad 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -20,15 +20,13 @@ OSM.initializations.push(function (map) { return $input.val(); }; - const latLngFromContext = () => - L.latLng($contextMenu.data("lat"), $contextMenu.data("lng")); + const latLngFromContext = () => L.latLng($contextMenu.data("lat"), $contextMenu.data("lng")); - const croppedLatLon = () => - OSM.cropLocation(latLngFromContext(), map.getZoom()); + const croppedLatLng = () => OSM.cropLocation(latLngFromContext(), map.getZoom()); const routeWithLatLon = (path, extraParams = {}) => { - const [lat, lon] = croppedLatLon(); - OSM.router.route(`${path}?` + new URLSearchParams({ lat, lon, ...extraParams })); + const { lat, lng } = croppedLatLng(); + OSM.router.route(`${path}?` + new URLSearchParams({ lat, lon: lng, ...extraParams })); }; const contextmenuItems = [ @@ -37,8 +35,9 @@ OSM.initializations.push(function (map) { icon: "bi-cursor", text: OSM.i18n.t("javascripts.context.directions_from"), callback: () => { + const { lat, lng } = croppedLatLng(); const params = new URLSearchParams({ - from: croppedLatLon().join(","), + from: `${lat},${lng}`, to: getDirectionsCoordinates($("#route_to")) }); OSM.router.route(`/directions?${params}`); @@ -49,9 +48,10 @@ OSM.initializations.push(function (map) { icon: "bi-flag", text: OSM.i18n.t("javascripts.context.directions_to"), callback: () => { + const { lat, lng } = croppedLatLng(); const params = new URLSearchParams({ from: getDirectionsCoordinates($("#route_from")), - to: croppedLatLon().join(",") + to: `${lat},${lng}` }); OSM.router.route(`/directions?${params}`); } diff --git a/app/assets/javascripts/index/directions-endpoint.js b/app/assets/javascripts/index/directions-endpoint.js index d44158574..cb6b17140 100644 --- a/app/assets/javascripts/index/directions-endpoint.js +++ b/app/assets/javascripts/index/directions-endpoint.js @@ -20,7 +20,8 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, marker, dragCallback, cha }; function markerDragListener(e) { - const latlng = L.latLng(OSM.cropLocation(e.target.getLatLng(), map.getZoom())); + const { lat, lng } = OSM.cropLocation(e.target.getLatLng(), map.getZoom()); + const latlng = L.latLng(lat, lng); if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort(); delete endpoint.geocodeRequest; diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index f75420228..76778fbf5 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -5,7 +5,7 @@ OSM.Directions = function (map) { let controller = null; // the AbortController for the current route request if a route request is in progress - let lastLocation = []; + let lastLocation = null; let chosenEngine; let sidebarReadyPromise = null; @@ -185,21 +185,21 @@ OSM.Directions = function (map) { } }); - function sendstartinglocation({ latlng: { lat, lng } }) { - map.fire("startinglocation", { latlng: [lat, lng] }); + function sendstartinglocation({ lat, lng }) { + map.fire("startinglocation", { lat, lng }); } - function startingLocationListener({ latlng }) { + function startingLocationListener({ lat, lng }) { if (endpoints[0].value) return; - endpoints[0].setValue(latlng.join(", ")); + endpoints[0].setValue(`${lat}, ${lng}`); } - map.on("locationfound", ({ latlng: { lat, lng } }) => - lastLocation = [lat, lng] - ).on("locateactivate", () => { - map.once("startinglocation", startingLocationListener); - }); + map + .on("locationfound", ({ latlng: { lat, lng } }) => lastLocation = { lat, lng }) + .on("locateactivate", () => { + map.once("startinglocation", startingLocationListener); + }); function initializeFromParams() { const params = new URLSearchParams(location.search), @@ -207,7 +207,8 @@ OSM.Directions = function (map) { if (params.has("engine")) setEngine(params.get("engine")); - endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", ")); + const lastLocationAsString = lastLocation ? `${lastLocation.lat}, ${lastLocation.lng}` : ""; + endpoints[0].setValue(params.get("from") || route[0] || lastLocationAsString); endpoints[1].setValue(params.get("to") || route[1] || ""); } @@ -229,9 +230,9 @@ OSM.Directions = function (map) { pt.y += 20; const ll = map.containerPointToLatLng(pt); - const llWithPrecision = OSM.cropLocation(ll, map.getZoom()); + const { lat, lng } = OSM.cropLocation(ll, map.getZoom()); - endpoints[type === "from" ? 0 : 1].setValue(llWithPrecision.join(", ")); + endpoints[type === "from" ? 0 : 1].setValue(`${lat}, ${lng}`); }); map.on("locationfound", sendstartinglocation); diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index fc9db9d41..5219fe54a 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -10,8 +10,8 @@ OSM.Export = function (map) { function getBounds() { return L.latLngBounds( - L.latLng($("#minlat").val(), $("#minlon").val()), - L.latLng($("#maxlat").val(), $("#maxlon").val())); + { lat: $("#minlat").val(), lng: $("#minlon").val() }, + { lat: $("#maxlat").val(), lng: $("#maxlon").val() }); } function boundsChanged() { @@ -60,16 +60,15 @@ OSM.Export = function (map) { } function setBounds(bounds) { - const truncated = [bounds.getSouthWest(), bounds.getNorthEast()] - .map(c => OSM.cropLocation(c, map.getZoom())); - $("#minlon").val(truncated[0][1]); - $("#minlat").val(truncated[0][0]); - $("#maxlon").val(truncated[1][1]); - $("#maxlat").val(truncated[1][0]); + const sw = OSM.cropLocation(bounds.getSouthWest(), map.getZoom()); + $("#minlon").val(sw.lng); + $("#minlat").val(sw.lat); + const ne = OSM.cropLocation(bounds.getNorthEast(), map.getZoom()); + $("#maxlon").val(ne.lng); + $("#maxlat").val(ne.lat); $("#export_overpass").attr("href", - "https://overpass-api.de/api/map?bbox=" + - truncated.map(p => p.reverse()).join()); + `https://overpass-api.de/api/map?bbox=${sw.lng},${sw.lat},${ne.lng},${ne.lat}`); } function validateControls() { diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js index f33099f5c..e6f122c22 100644 --- a/app/assets/javascripts/index/history-changesets-layer.js +++ b/app/assets/javascripts/index/history-changesets-layer.js @@ -125,8 +125,8 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({ mapViewPixelBounds.max.y += mapViewExpansion; for (const changeset of this._changesets.values()) { - const changesetNorthWestLatLng = L.latLng(changeset.bbox.maxlat, changeset.bbox.minlon), - changesetSouthEastLatLng = L.latLng(changeset.bbox.minlat, changeset.bbox.maxlon), + const changesetNorthWestLatLng = { lat: changeset.bbox.maxlat, lng: changeset.bbox.minlon }, + changesetSouthEastLatLng = { lat: changeset.bbox.minlat, lng: changeset.bbox.maxlon }, changesetCenterLng = (changesetNorthWestLatLng.lng + changesetSouthEastLatLng.lng) / 2, shiftInWorldCircumferences = Math.round((changesetCenterLng - mapViewCenterLng) / 360); diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js index 0beff16be..ab1caba93 100644 --- a/app/assets/javascripts/index/new_note.js +++ b/app/assets/javascripts/index/new_note.js @@ -120,7 +120,7 @@ OSM.NewNote = function (map) { let markerLatlng; if (params.has("lat") && params.has("lon")) { - markerLatlng = L.latLng(params.get("lat"), params.get("lon")); + markerLatlng = { lat: params.get("lat"), lng: params.get("lon") }; } else { markerLatlng = map.getCenter(); } diff --git a/app/assets/javascripts/index/note.js b/app/assets/javascripts/index/note.js index a587daf49..ad3844559 100644 --- a/app/assets/javascripts/index/note.js +++ b/app/assets/javascripts/index/note.js @@ -6,8 +6,8 @@ OSM.Note = function (map) { OSM.loadSidebarContent(path, function () { const data = $(".details").data(); if (!data) return; - const latLng = L.latLng(data.coordinates.split(",")); - initialize(path, id, map.getBounds().contains(latLng)); + const [lat, lng] = data.coordinates.split(",").map(parseFloat); + initialize(path, id, map.getBounds().contains({ lat, lng })); }); }; diff --git a/app/assets/javascripts/index/query.js b/app/assets/javascripts/index/query.js index 5c4f9e9eb..50a961d4e 100644 --- a/app/assets/javascripts/index/query.js +++ b/app/assets/javascripts/index/query.js @@ -26,9 +26,9 @@ OSM.initializations.push(function (map) { }); function clickHandler(e) { - const [lat, lon] = OSM.cropLocation(e.latlng, map.getZoom()); + const { lat, lng } = OSM.cropLocation(e.latlng, map.getZoom()); - OSM.router.route("/query?" + new URLSearchParams({ lat, lon })); + OSM.router.route("/query?" + new URLSearchParams({ lat, lon: lng })); } function enableQueryMode() { @@ -270,9 +270,9 @@ OSM.Query = function (map) { function queryOverpass(latlng) { const bounds = map.getBounds(), zoom = map.getZoom(), - bbox = [bounds.getSouthWest(), bounds.getNorthEast()] - .map(c => OSM.cropLocation(c, zoom)) - .join(), + sw = OSM.cropLocation(bounds.getSouthWest(), zoom), + ne = OSM.cropLocation(bounds.getNorthEast(), zoom), + bbox = `${sw.lat},${sw.lng},${ne.lat},${ne.lng}`, geom = `geom(${bbox})`, radius = 10 * Math.pow(1.5, 19 - zoom), here = `(around:${radius},${latlng})`, diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index e1882ddc3..2ad294740 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -26,9 +26,9 @@ OSM.initializations.push(function (map) { e.preventDefault(); $("header").addClass("closed"); const zoom = map.getZoom(); - const [lat, lon] = OSM.cropLocation(map.getCenter(), zoom); + const { lat, lng } = OSM.cropLocation(map.getCenter(), zoom); - OSM.router.route("/search?" + new URLSearchParams({ lat, lon, zoom })); + OSM.router.route("/search?" + new URLSearchParams({ lat, lon: lng, zoom })); }); }); diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index 0b4744de9..64697ea60 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -141,7 +141,9 @@ L.OSM.Map = L.Map.extend({ const params = {}; if (marker && this.hasLayer(marker)) { - [params.mlat, params.mlon] = OSM.cropLocation(marker.getLatLng(), this.getZoom()); + const { lat, lng } = OSM.cropLocation(marker.getLatLng(), this.getZoom()); + params.mlat = lat; + params.mlon = lng; } let url = location.protocol + "//" + OSM.SERVER_URL + "/"; @@ -223,7 +225,8 @@ L.OSM.Map = L.Map.extend({ latLng = marker.getLatLng(); } - return `geo:${OSM.cropLocation(latLng, zoom).join(",")}?z=${zoom}`; + const { lat, lng } = OSM.cropLocation(latLng, zoom); + return `geo:${lat},${lng}?z=${zoom}`; }, addObject: function (object, callback) { diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb index e081e3213..35f02b7c5 100644 --- a/app/assets/javascripts/osm.js.erb +++ b/app/assets/javascripts/osm.js.erb @@ -196,7 +196,8 @@ OSM = { layers = layers.replace("M", ""); - let hash = "#map=" + [zoom, ...OSM.cropLocation(center, zoom)].join("/"); + const { lat, lng } = OSM.cropLocation(center, zoom); + let hash = `#map=${zoom}/${lat}/${lng}`; if (layers) { hash += "&layers=" + layers; @@ -214,13 +215,16 @@ OSM = { cropLocation: function (latLng, zoom) { const precision = OSM.zoomPrecision(zoom), wrapped = latLng.wrap(); - return [wrapped.lat, wrapped.lng].map(c => c.toFixed(precision)); + return { + lat: wrapped.lat.toFixed(precision), + lng: wrapped.lng.toFixed(precision) + }; }, locationCookie: function (map) { const zoom = map.getZoom(), - center = OSM.cropLocation(map.getCenter(), zoom).reverse(); - return [...center, zoom, map.getLayersCode()].join("|"); + { lat, lng } = OSM.cropLocation(map.getCenter(), zoom); + return [lng, lat, zoom, map.getLayersCode()].join("|"); }, showAlert: function (title, message) { diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index 8fcde7c1b..6c6c44b13 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -70,10 +70,9 @@ $(function () { map.on("click", function (e) { if (!$("#updatehome").is(":checked")) return; - const [lat, lon] = OSM.cropLocation(e.lngLat, map.getZoom() + 1); - + const { lat, lng } = OSM.cropLocation(L.latLng(e.lngLat.lat, e.lngLat.lng), map.getZoom() + 1); $("#home_lat").val(lat); - $("#home_lon").val(lon); + $("#home_lon").val(lng); clearDeletedText(); respondToHomeLatLonUpdate(); -- 2.47.3