[openstreetmap/openstreetmap-website] Make search show multiple markers (PR #6235)

Marwin Hochfelsner notifications at github.com
Wed Jul 23 17:39:46 UTC 2025


This PR improves the visualization and interactivity of search results in the sidebar and map.

- Search result entries now have permanent map markers (instead of hover-only).
- Each marker is assigned a unique color based on the golden angle[^1], improving distinction even with many results.
- List entries visually match their corresponding markers via a colored border (`--marker-color`).
- Hovering over a list entry highlights the marker, and vice versa.
- Clicking a marker forwards that to the associated list entry.
- Refactored fetch logic into a reusable `fetchReplace()` function.

This touches a multitude of issues, see the list at https://github.com/openstreetmap/openstreetmap-website/issues/872#issuecomment-2588598803.

[^1]: Why this way? This approach scales better for arbitrary result counts. The golden angle ensures that hues are distributed evenly and only begin to visually converge after over 20 entries.

https://github.com/user-attachments/assets/b9af00e5-2968-4d0e-8bc7-4f075853edf7

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6235

-- Commit Summary --

  * Reuse search results fetcher
  * Make search show multiple markers

-- File Changes --

    M app/assets/javascripts/index/search.js (58)
    M app/assets/stylesheets/common.scss (11)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6235.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6235.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/6235 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250723/658cbfea/attachment-0001.htm>


More information about the rails-dev mailing list