[openstreetmap/openstreetmap-website] Replace custom SVG map controls with Bootstrap Icons (PR #6695)

Snehal Jadhav notifications at github.com
Sat Jan 10 19:34:25 UTC 2026


### Description
This PR replaces the legacy hardcoded SVG generation in the Leaflet map controls with standard Bootstrap Icons, as requested by @hlfan. This simplifies the codebase by removing manual SVG element construction and ensures visual consistency across the UI.

**Changes made:**
* Updated `leaflet.zoom.js`: Replaced zoom in/out SVGs with `plus-lg` and `dash-lg`.
* Updated `leaflet.locate.js`: Replaced geolocation SVG with `cursor-fill`.
* Updated `leaflet.note.js`: Replaced note SVG with `chat-square-fill`.
* Updated `leaflet.query.js`: Replaced query SVG with `question-square-fill`.
* Updated `leaflet.sidebar-pane.js`: Added mapping for generic sidebar buttons (Layers -> `stack`, Share -> `share-fill`, Legend -> `info-lg`).
* Updated `index/contextmenu.js`: Updated the right-click context menu items to match the new sidebar icons.

**Screenshots:** 
<img width="579" height="477" alt="Verified_status1" src="https://github.com/user-attachments/assets/57a71417-24f6-41a1-8f12-59f45e7aa01f" />


### How has this been tested?
I tested these changes locally by running the Rails server (`bundle exec rails server`) and verifying the following:
1.  **Zoom Controls:** Confirmed (+) and (-) buttons render correctly and function.
2.  **Sidebar:** Verified all 5 sidebar buttons (Layers, Legend, Share, Note, Query) render with sharp, filled Bootstrap icons.
3.  **Context Menu:** Right-clicked the map and verified the "Add a note" and "Query features" icons match the sidebar style.
4.  **Functionality:** Confirmed that clicking the new icons still triggers the correct actions (e.g., opening the note pane, enabling query mode).
You can view, comment on, or merge this pull request online at:

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

-- Commit Summary --

  * Refactor sidebar icons to use Bootstrap icons (fixes #6681)

-- File Changes --

    M app/assets/javascripts/index/contextmenu.js (4)
    M app/assets/javascripts/leaflet.locate.js (7)
    M app/assets/javascripts/leaflet.note.js (7)
    M app/assets/javascripts/leaflet.query.js (7)
    M app/assets/javascripts/leaflet.sidebar-pane.js (12)
    M app/assets/javascripts/leaflet.zoom.js (13)
    M app/views/dashboards/show.html.erb (2)
    M app/views/diary_entries/_form.html.erb (2)
    M app/views/profiles/locations/show.html.erb (2)

-- Patch Links --

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

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

Message ID: <openstreetmap/openstreetmap-website/pull/6695 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260110/099a0b72/attachment.htm>


More information about the rails-dev mailing list