[openstreetmap/openstreetmap-website] Add `autoPan`-ing for draggin markers on the diary adding page (PR #7188)

[Frank Elsinga]

@CommanderStorm commented on this pull request.



> +      if (!map) return;
+
+      const point = map.project(this.getLngLat()),
+            { clientWidth, clientHeight } = map.getContainer();
+
+      let dx = 0,
+          dy = 0;
+      if (point.x < edgeDistance) dx = point.x - edgeDistance;
+      else if (point.x > clientWidth - edgeDistance) dx = point.x - (clientWidth - edgeDistance);
+      if (point.y < edgeDistance) dy = point.y - edgeDistance;
+      else if (point.y > clientHeight - edgeDistance) dy = point.y - (clientHeight - edgeDistance);
+      if (!dx && !dy) return;
+
+      const clamp = (v) => Math.max(-maxPanStep, Math.min(maxPanStep, v));
+      map.panBy([clamp(dx), clamp(dy)], { duration: 0 });
+      this.setLngLat(map.unproject(point));

No, your intuition is not quite right due to the `project`/`unproject`.

We get lat/lon of the marker -> transfer to viewport units (xy pixels on the screen, not lat/lon).
We then calculate the dy/dx in xy viewport to know how much we need to shift.
We then shift the map.
Since `point` is in viewport units and we just shifted exactly these viewport units, we now need to update the placement of the map.

Now, the marker is where it needs to and everyone is happy.
If we don't do this, it looks like this (so only panning the map once because afterwards we are within dy/dx...):

<img width="1920" height="906" alt="Recording 2026-07-05 at 23 07 52" src="https://github.com/user-attachments/assets/f71976f1-aa8a-4093-8303-604fa43a20c5" />


-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/7188#discussion_r3525636748
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/7188/review/4632003318 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260705/87086868/attachment-0001.htm>