From 8bed4fa2fa176aece6c75cf232bf9aa5b669487b Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 3 Feb 2026 17:22:32 +0000
Subject: [PATCH] Pan slowly on click on the nuisance map

---
 html/static/js/map-locator.js | 8 ++++----
 rmo/template/nuisance.html    | 7 +++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/html/static/js/map-locator.js b/html/static/js/map-locator.js
index ab10e65a..251bc9dd 100644
--- a/html/static/js/map-locator.js
+++ b/html/static/js/map-locator.js
@@ -125,12 +125,12 @@ class MapLocator extends HTMLElement {
 		this._map.jumpTo(args);
 	}
 
+	PanTo(coords, options) {
+		this._map.panTo(coords, options);
+	}
+
 	SetMarker(coords) {
 		console.log("Setting map marker", coords);
-		this._map.jumpTo({
-			center: coords,
-			zoom: 14,
-		});
 		this._markers.forEach((marker) => marker.remove());
 
 		const marker = new mapboxgl.Marker({
diff --git a/rmo/template/nuisance.html b/rmo/template/nuisance.html
index 10720db9..7c5b84fa 100644
--- a/rmo/template/nuisance.html
+++ b/rmo/template/nuisance.html
@@ -12,6 +12,7 @@
 const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
 async function handleMapClick(mapLocator, lngLat) {
 	mapLocator.SetMarker(lngLat);
+	mapLocator.PanTo(lngLat, {duration: 2000});
 	const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
 		lat: lngLat.lat,
 		lng: lngLat.lng,
@@ -115,10 +116,12 @@ document.addEventListener('DOMContentLoaded', function() {
 				},
 				zoom: 14,
 			});
-			mapLocator.SetMarker([
+			const coords = [
 				position.coords.longitude,
 				position.coords.latitude,
-			]);
+			];
+			mapLocator.SetMarker(coords);
+			mapLocator.JumpTo({center: coords, zoom: 14});
 			handleMarkerDrag({
 				lat: position.coords.latitude,
 				lng: position.coords.longitude,