### 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/[email protected]>
_______________________________________________
rails-dev mailing list
[email protected]
https://lists.openstreetmap.org/listinfo/rails-dev
