[openstreetmap/openstreetmap-website] Switch to inline colourable markers (PR #5854)

Marwin Hochfelsner notifications at github.com
Thu Mar 27 11:18:09 UTC 2025


### Description
This is an attempt at parametrifying marker colors with `currentColor` since it has come up in #5764.
Together with optimizing the path geometry, this required rewriting the marker layout to be compatible with partially transparent gradients.
While an even simpler path has been proposed and demonstrated in https://antonkhorev.github.io/msvgen, I was searching for a solution without a sudden change in curvature, which I found by constraining a Bezier curve to a specified slope, 1.92 in this case. (See [CodePen](//codepen.io/hlfan/pen/OPJOGxg))

Where I had the source colors, I tried to fit the colors to the sources, e.g. for the note markers see this before/after:
![image](https://github.com/user-attachments/assets/879fcd9b-38ed-4a93-a882-948625a29c2d)

For now, this is only a barebones switch to the new markers, but moving in the direction of https://github.com/openstreetmap/openstreetmap-website/issues/872#issuecomment-2589899767, #2787 or #507

### How has this been tested?
Server side and client/browser side separately, no integration testing though.

### Considerations
For the raster icons where I didn't have the colors, I took them from the note markers, so
- either I need better sources than I could find, or
- the dot markers will differ in color a bit more:
![image](https://github.com/user-attachments/assets/0f7e4a62-f013-437d-b2da-94898e433ea9)


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

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

-- Commit Summary --

  * Collect note marker icon definitions
  * Inline note markers
  * Inline colored markers

-- File Changes --

    D app/assets/images/closed_note_marker.svg (19)
    D app/assets/images/marker-blue.png (0)
    D app/assets/images/marker-green.png (0)
    D app/assets/images/marker-red.png (0)
    D app/assets/images/marker-yellow.png (0)
    D app/assets/images/new_note_marker.svg (15)
    D app/assets/images/open_note_marker.svg (19)
    M app/assets/javascripts/index/directions-endpoint.js (11)
    M app/assets/javascripts/index/directions.js (4)
    M app/assets/javascripts/index/layers/notes.js (22)
    M app/assets/javascripts/index/new_note.js (22)
    M app/assets/javascripts/index/note.js (20)
    M app/assets/javascripts/leaflet.map.js (28)
    M app/assets/javascripts/osm.js.erb (7)
    M app/assets/javascripts/user.js (2)
    M app/assets/stylesheets/leaflet-all.scss (5)
    M app/views/dashboards/_contact.html.erb (2)
    M app/views/dashboards/show.html.erb (2)
    A app/views/layouts/_defs_markers.html.erb (43)
    M app/views/layouts/_search.html.erb (8)
    M app/views/layouts/map.html.erb (4)
    M app/views/notes/index.html.erb (12)
    M test/system/account_home_test.rb (16)
    M test/system/note_layer_test.rb (6)

-- Patch Links --

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

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

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


More information about the rails-dev mailing list