Suggestions for better UX (Map-Color Related) #2014

ViktorP06 commented 2026年04月13日 21:31:16 +02:00

Décrivez votre problème, votre suggestion

First of all: You have made an incredible App with a lot of potential in the future!

I make these Suggestions in Three Steps (as someone who has at a bit experience with colors and UI Design)
> dynamic POIs
If zoomed in within a city center the map gets very cluttered in dozends of POIs. It would be a good idea to group them and have them appear only after a certain zoomlevel is reached. That could mean showing a restaurant much later (higher zoom) and a church in a lower zoom than before

> Contrast Issues
The minor or low speed roads are sometimes pretty hard to read. This is due to there beeing too less contrast between roads and background.

The easiest way to check if contrast between foreground and background is sufficient is pretty easy actually: Just go to Maputnik and view your style without colors (under the "View" tab within the menu "Color accessibility")

These two things above I find neccesary.

---

> Optional: Adapting Map Styles (possibly in the Future):
Depending on which routing mode is selected the map the map engine could highlight certain infrastructure or OSM-highways.

• general mode (nothing explicitly highlighted)
• public transit (shows PT-Lines more prominently than Car-infrastructure)
• driving (shows mostly car infrastructure)
• cycling (highlights cycleways)
• foot (highlights footpaths and pedestrian streets, as well as sights)

Example for adapting Map styles made by me initially for usage in CoMaps: for Demonstration-Purposes ;) in what direction I am visually thinking with adapting the style based on the mode.

• public transit: (Especially here limitations with the in this example choosen style idea become very noticeable: Dark lines are invisible in Dark mode) - But this is just a concept to lead into the direction. Probably the roads and buildings in Public transit mode would have to be a lot brighter ;)
  But I hope you can see the potential in highlighting certain stuff.
  image
  image
• driving:
  image
  image
• foot:
  image
  image

---

Thank you for listening to my feedback :)
I know the adapting thing is probably still far away from beeing ready to adapt, but I think it is a cool idea. Apple Maps for example does it greatly, so it is definitly possible :)

I am in no way trying to change your style, as it looks great as it stands. But as I said with slight modifications to differenciate background and roads better apart the app would feel a lot better regarding UX.

### Décrivez votre problème, votre suggestion First of all: You have made an incredible App with a lot of potential in the future! I make these Suggestions in Three Steps (as someone who has at a bit experience with colors and UI Design) `>` **dynamic POIs** If zoomed in within a city center the map gets very cluttered in dozends of POIs. It would be a good idea to group them and have them appear only after a certain zoomlevel is reached. That could mean showing a restaurant much later (higher zoom) and a church in a lower zoom than before `>` **Contrast Issues** The minor or low speed roads are sometimes pretty hard to read. This is due to there beeing too less contrast between roads and background. The easiest way to check if contrast between foreground and background is sufficient is pretty easy actually: Just go to Maputnik and view your style without colors (under the "View" tab within the menu "Color accessibility") **These two things above I find neccesary.** ---- `>` **Optional:** Adapting Map Styles (possibly in the Future): Depending on which routing mode is selected the map the map engine could highlight certain infrastructure or OSM-highways. - general mode (nothing explicitly highlighted) - public transit (shows PT-Lines more prominently than Car-infrastructure) - driving (shows mostly car infrastructure) - cycling (highlights cycleways) - foot (highlights footpaths and pedestrian streets, as well as sights) Example for adapting Map styles made by me initially for usage in CoMaps: for Demonstration-Purposes ;) in what direction I am visually thinking with adapting the style based on the mode. - public transit: (Especially here limitations with the in this example choosen style idea become very noticeable: Dark lines are invisible in Dark mode) - But this is just a concept to lead into the direction. Probably the roads and buildings in Public transit mode would have to be a lot brighter ;) But I hope you can see the potential in highlighting certain stuff.   - driving:   - foot:   ---- Thank you for listening to my feedback :) I know the adapting thing is probably still far away from beeing ready to adapt, but I think it is a cool idea. Apple Maps for example does it greatly, so it is definitly possible :) I am in no way trying to change your style, as it looks great as it stands. But as I said with slight modifications to differenciate background and roads better apart the app would feel a lot better regarding UX.

ViktorP06 commented 2026年04月13日 21:34:09 +02:00

Linking the related suggestion on CoMaps, that was quite liked by their community: comaps/comaps#2595
>> sadly not so much liked by some of their main Designers - as they want to stick the original styling to be similar to Organic-Maps like colors..

Linking the related suggestion on CoMaps, that was quite liked by their community: https://codeberg.org/comaps/comaps/issues/2595 `>>` sadly not so much liked by some of their main Designers - as they want to stick the original styling to be similar to Organic-Maps like colors..

etienneJr commented 2026年04月13日 22:55:40 +02:00

Hi!
Thanks for your detailed feedback!

@DerKaiserschmarren wrote in #2014 (comment):

If zoomed in within a city center the map gets very cluttered in dozends of POIs. It would be a good idea to group them and have them appear only after a certain zoomlevel is reached. That could mean showing a restaurant much later (higher zoom) and a church in a lower zoom than before

This is already the case for some kind of elements. Check poiOpacity() here.
but you are right we could extend this mecanism with mush more thresholds (not necessarily integers)
However : it’s very difficult to strike a balance: in a densely built-up city centre, you want to hide certain features, whereas in the countryside or in the mountains, you want to display them sooner, as the map is typically viewed at a much lower zoom level. (on the outdoors style, we already display all POIs 1 zoom level before)

The minor or low speed roads are sometimes pretty hard to read. This is due to there beeing too less contrast between roads and background.

I understand that you’re well experienced with maplibre-style specs, right? Would you have time to prepare a PR with the changes you’re suggesting?
The file with a road style is app/styles/roadLayers.ts

Hi! Thanks for your detailed feedback! @DerKaiserschmarren wrote in https://codeberg.org/cartes/web/issues/2014#issue-4352463: > If zoomed in within a city center the map gets very cluttered in dozends of POIs. It would be a good idea to group them and have them appear only after a certain zoomlevel is reached. That could mean showing a restaurant much later (higher zoom) and a church in a lower zoom than before This is already the case for some kind of elements. Check [poiOpacity() here](https://codeberg.org/cartes/web/src/commit/ba11a5d399441408d8b3b5dcd74326df3e8f6c7d/app/styles/base.ts#L368-L469). but you are right we could extend this mecanism with mush more thresholds (not necessarily integers) However : it’s very difficult to strike a balance: in a densely built-up city centre, you want to hide certain features, whereas in the countryside or in the mountains, you want to display them sooner, as the map is typically viewed at a much lower zoom level. (on the outdoors style, we already display all POIs 1 zoom level before) > The minor or low speed roads are sometimes pretty hard to read. This is due to there beeing too less contrast between roads and background. I understand that you’re well experienced with maplibre-style specs, right? Would you have time to prepare a PR with the changes you’re suggesting? The file with a road style is [app/styles/roadLayers.ts](https://codeberg.org/cartes/web/src/branch/master/app/styles/roadLayers.ts)

laem commented 2026年04月14日 09:33:53 +02:00

About changing the map style depending on the mode : it's already the case ! Speed limits appear as road signs for the car mode. We're planning to generalize this, but haven't had time to do it. I'm 100 % in favor of this : designing bike maps from the ground up, ignoring all dangerous roads is one of my objectives.

For cars, charging stations will be shown (but not gas stations of course). Etc.

About changing the map style depending on the mode : it's already the case ! Speed limits appear as road signs for the car mode. We're planning to generalize this, but haven't had time to do it. I'm 100 % in favor of this : designing bike maps from the ground up, ignoring all dangerous roads is one of my objectives. For cars, charging stations will be shown (but not gas stations of course). Etc.

ViktorP06 commented 2026年04月15日 11:32:37 +02:00

Good to hear!
I'll have a look at it when I have time :)

Good to hear! I'll have a look at it when I have time :)

etienneJr commented 2026年04月15日 12:48:07 +02:00

@DerKaiserschmarren wrote in #2014 (comment):

Good to hear! I'll have a look at it when I have time :)

Perfect! Take a look at #1183 but sorry it's in French 😬
If you have any question about the code, feel free to ask here.

@DerKaiserschmarren wrote in https://codeberg.org/cartes/web/issues/2014#issuecomment-13162692: > Good to hear! I'll have a look at it when I have time :) Perfect! Take a look at #1183 but sorry it's in French 😬 If you have any question about the code, feel free to ask here.

ViktorP06 commented 2026年04月18日 10:48:56 +02:00

I have taken a look at it, but I think my original idea with quickly improving contrast on roads by making them more grey doesn't work, because then they are not as greatly visible when there is greenery around them. (at arround z14)

It would not really be an improvement - so I need to think a bit differently ;)

I have taken a look at it, but I think my original idea with quickly improving contrast on roads by making them more grey doesn't work, because then they are not as greatly visible when there is greenery around them. (at arround z14) It would not really be an improvement - so I need to think a bit differently ;)

yoyo34 commented 2026年04月18日 14:56:06 +02:00

I would use colors like red or orange for streets. These colores are already used in most (offline and online) topographical maps. Especially if you want to have a map which is used for navigating, clear and helpful cartographic symbols are useful. You could make the motorways more redish and play in the street subclasses with orange.

Also note that the default color of routes like in the screenshot can not well be distinguished from the background map.

I would use colors like red or orange for streets. These colores are already used in most (offline and online) topographical maps. Especially if you want to have a map which is used for navigating, clear and helpful cartographic symbols are useful. You could make the motorways more redish and play in the street subclasses with orange. Also note that the default color of routes like in the screenshot can not well be distinguished from the background map.

ViktorP06 commented 2026年04月18日 15:49:50 +02:00

In general I am in favor of coloring roads, however you have to think that the colorful roads should only be active for driving.
As for example modes for cycling or Public Transit they are not really ideal, as seeable in the App CoMaps. It makes then the overlay pretty hard to read if both road infrastructure and the overlay are both colored ;)

This is especially noticeable on lines that have similar colors to the map-color-schme (in Case of CoMaps that is Orange and Yellow, possibly even blue), in our current situation that are grey and light-purple (for example Berlin U6/U7)

In short: the "overlay" and the roads in the Background should clearly be disctinct from another.

For Public Transit that is the hardest of course, as any agency could use any color they like.

In general I am in favor of coloring roads, however you have to think that the colorful roads should only be active for driving. As for example modes for cycling or Public Transit they are not really ideal, as seeable in the App CoMaps. It makes then the overlay pretty hard to read if both road infrastructure and the overlay are both colored ;) This is especially noticeable on lines that have similar colors to the map-color-schme (in Case of CoMaps that is Orange and Yellow, possibly even blue), in our current situation that are grey and light-purple (for example Berlin U6/U7) In short: the "overlay" and the roads in the Background should clearly be disctinct from another. For Public Transit that is the hardest of course, as any agency could use any color they like.

etienneJr commented 2026年04月18日 18:28:04 +02:00

I feel it’s time to provide some details about the styles we already have available 😁

• standard style was designed for cyclists and pedestrians. Roads are grey, with brightness depending on maxspeed! It was quite complicated to write the code which understand all the different maxspeed tagging schemes 😅 The light pastel shade is intentional, to ensure that anything superimposed on top stands out clearly (poi and categories especially). The style is also political : motorway are much less visible than train lines at low zoom, to show that another way of drawing maps is possible, with an environmental perspective. At higher zoom, cycleway are well visible.
• transport map use standard style as background, but we could change this to set an even less saturated style if necessary
• people who prefer saturation and contrast can use CoMaps like style, roads are as usual colored with an orange scale depending on highway tag
• outdoors style was derived from standard style, but is now more saturated. Roads are colored in red orange yellow depending on highway tag, but with very low saturation

Any improvements are possible, but standard style must remain consistent with the core message of cartes.app: to prioritise sustainable transport with a low environmental impact.

I feel it’s time to provide some details about the styles we already have available 😁 - standard style was designed for cyclists and pedestrians. Roads are grey, with brightness depending on maxspeed! It was quite complicated to write the code which understand all the different maxspeed tagging schemes 😅 The light pastel shade is intentional, to ensure that anything superimposed on top stands out clearly (poi and categories especially). The style is also political : motorway are much less visible than train lines at low zoom, to show that another way of drawing maps is possible, with an environmental perspective. At higher zoom, cycleway are well visible. - transport map use standard style as background, but we could change this to set an even less saturated style if necessary - people who prefer saturation and contrast can use CoMaps like style, roads are as usual colored with an orange scale depending on highway tag - outdoors style was derived from standard style, but is now more saturated. Roads are colored in red orange yellow depending on highway tag, but with very low saturation Any improvements are possible, but standard style must remain consistent with the core message of cartes.app: to prioritise sustainable transport with a low environmental impact.

ViktorP06 commented 2026年04月18日 18:50:25 +02:00

I know some of you are anti-car people - I also fall into that group! It totally makes sense to sort of make roads less visible that are not designed for car traffic.

I think the main problem with this technique that I have is that finding these places with low traffic (eg Pedestrian Areas, low limit streets) is not as easy to see as places mainly for driving cars.
This issue is of course also existent on other Maps. They are all focused on cars, so why should they highlight streets where you want to go as pedestrian.

So I am kindof in favor of only highlighting the infrastructure that the user wants. ;)
For one that means cycling, for the other public transport and for the third that is walking.

Edit: Highlighting streets on some zoomlevels could make sense though for orientation ;)

I know some of you are anti-car people - I also fall into that group! It totally makes sense to sort of make roads less visible that are not designed for car traffic. I think the main problem with this technique that I have is that finding these places with low traffic (eg Pedestrian Areas, low limit streets) is not as easy to see as places mainly for driving cars. This issue is of course also existent on other Maps. They are all focused on cars, so why should they highlight streets where you want to go as pedestrian. So I am kindof in favor of only highlighting the infrastructure that the user wants. ;) For one that means cycling, for the other public transport and for the third that is walking. Edit: Highlighting streets on some zoomlevels could make sense though for orientation ;)

yoyo34 commented 2026年04月18日 20:02:41 +02:00

It's totally up to you how you style your map, and it also depends on how big you want to go. However, if you do go big, you may want to bear in mind that some people with dyslexia find it hard to read low-contrast maps.
Additionally in my humble opinion, public transport routes and pedestrian paths are also not that easy to distinguish from the background at first glance.

It's totally up to you how you style your map, and it also depends on how big you want to go. However, if you do go big, you may want to bear in mind that some people with dyslexia find it hard to read low-contrast maps. Additionally in my humble opinion, public transport routes and pedestrian paths are also not that easy to distinguish from the background at first glance.

etienneJr commented 2026年04月18日 23:27:22 +02:00

@DerKaiserschmarren wrote in #2014 (comment):

So I am kindof in favor of only highlighting the infrastructure that the user wants. ;)

I completely agree. We’ve wanted to create a style tailored to cycling for a long time. A sort of vector-tile cyclosm. But we haven’t had any time at all to work on it.

Once again, if you both have time to work on standard style improvements, or the design of new styles, it would be awesome! I’ll answer your questions here if needed. For a new style, I can set everything up so that all you have to do is change the colours.

@DerKaiserschmarren wrote in https://codeberg.org/cartes/web/issues/2014#issuecomment-13299951: > So I am kindof in favor of only highlighting the infrastructure that the user wants. ;) I completely agree. We’ve wanted to create a style tailored to cycling for a long time. A sort of vector-tile cyclosm. But we haven’t had any time at all to work on it. Once again, if you both have time to work on standard style improvements, or the design of new styles, it would be awesome! I’ll answer your questions here if needed. For a new style, I can set everything up so that all you have to do is change the colours.