[openstreetmap/openstreetmap-website] Fix issue #6256: Add info icon with Wiki links to map layers menu (PR #6669)

Swayam notifications at github.com
Fri Jan 2 11:36:32 UTC 2026


### Description
This PR Fixes #6256 by adding an "info" icon next to the layer names in the "Map Layers" sidebar. This allows users to access the wiki page for each layer to understand its purpose. 

### Implementation Details
- **Inline SVG:** Injected a lightweight SVG info icon directly into the layer control in `leaflet.layers.js`.
- **Wiki Linking:** Mapped all 8 production layer IDs (including `cyclemap`, `transportmap`, and `openmaptiles_osm`) to their respective OpenStreetMap Wiki URLs.
- **Event Handling:** Added `e.stopPropagation()` to ensure clicking the info icon opens the wiki link without triggering a map layer switch.
- **UI/UX Polish:**
    - Positioned the icon in the top-right corner of the layer preview button.
    - Used `mix-blend-mode: difference` CSS. This ensures the icon automatically inverts colors to be visible on both light backgrounds (Standard) and dark backgrounds (Shortbread) without needing complex logic.

### Verification & Testing
I verified the implementation locally with the following steps:
1. **Visual Check:** Confirmed the icon is visible and aligned correctly on the Standard layer.
2. **Contrast Check:** Confirmed the icon remains visible on the dark "Shortbread" layer due to the `mix-blend-mode` setting.
3. **Functionality:** Verified that clicking the icon opens the correct Wiki page in a new tab, while clicking the text label still switches the map layer.
4. Third-Party Layers: I configured local API keys to verify that icons appear and link correctly for third-party layers (Cycle Map, Transport Map, MapTiler) that are not enabled by default.

### Screenshots
Before:
<img width="1919" height="927" alt="image" src="https://github.com/user-attachments/assets/923f0b60-4a38-4555-8454-bc8849de154f" />

After:
<img width="1919" height="925" alt="image" src="https://github.com/user-attachments/assets/33f75d11-d0bf-4dba-8c48-fcc87a443ece" />

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

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

-- Commit Summary --

  * Fix issue #6256: Add info icon with Wiki links to map layers menu

-- File Changes --

    M app/assets/javascripts/leaflet.layers.js (41)

-- Patch Links --

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

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

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


More information about the rails-dev mailing list