[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