[openstreetmap/openstreetmap-website] Map note icon "X" too scary to click on (#2882)
Kai Michael Poppe
notifications at github.com
Sun Sep 6 12:27:25 UTC 2026
kmpoppe left a comment (openstreetmap/openstreetmap-website#2882)
> What are the colors you picked? Ideally in a perceptual colorspace
the base color (--marker-yellow in colors.scss) is `#f7d93a`, as shown in the picture above.
Additionaly, a block in the _markers.html.erb defines a "lighter" variant of the pin overlay:
```
<linearGradient id="fill" x1="0" x2="0" y1="0" y2="40" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#aaa6" />
<stop offset="1" stop-color="#2224" />
</linearGradient>
<%# Lighter variant of #fill, used only by the exclam pin: a fainter wash on
top and less darkening at the bottom, so the bright yellow note pin keeps
its brightness/contrast instead of being muted like the default pins. %>
<linearGradient id="fill-exclam" x1="0" x2="0" y1="0" y2="40" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff3" />
<stop offset="1" stop-color="#2222" />
</linearGradient>
```
this is then picked later:
```
<%# exclam uses the lighter #fill-exclam overlay; every other pin uses #fill. %>
<% body_overlay = type == "exclam" ? "fill-exclam" : "fill" %>
<g id="pin-<%= type %>" clip-path="url(#pin-clip)">
<use href="#pin-path" fill="currentColor" />
<use href="#pin-path" fill="url(#<%= body_overlay %>)" />
```
The thing I'm most worrying about is, that the yellow-ish pin gets buried in very busy areas.
Compare this:
<img width="688" height="450" alt="Image" src="https://github.com/user-attachments/assets/a8931b7d-7993-43eb-b864-44031f9d8b04" />
with this:
<img width="680" height="450" alt="Image" src="https://github.com/user-attachments/assets/2b4c7c06-7404-41d4-a3b2-f5fc0ea2d043" />
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2882#issuecomment-5559206504
You are receiving this because you are subscribed to this thread.
Message ID: <openstreetmap/openstreetmap-website/issues/2882/5559206504 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260906/818a70a6/attachment.htm>
More information about the rails-dev
mailing list