brouter-web
brouter-web copied to clipboard
Support custom coloring of imported .kml / .gpx tours
pick 1 of the 3 following options, that would be a great start (1 being maybe the most simple and probably also my favourite):
- allow changing default color of imported tours in Brouter Web from blue to other colors
- or: allow directly using the kml embedded coloring infos
- or: allow individual coloring of individual imported routes after they are imported
Whaa, I was about to raise exactly the same issue :-) (blue on blue, impossible to view !)
Should have known better, we had the same issue with the route color before.
For a short-term fix: Any suggestions for a better default track color that works for all layers and stands less in the foreground than the route color, anyone?
In fact, for the short term fix, it's mostly the layer CyclOSM
that has a significant issue, with exactly the same blue for cycling path and for imported gpx. And as it's the first proposed layer, it's this one that is tricky.
For the other layers, there are no visualization issue (except the fact that all the imported gpx tracks have the same colors: hard to distinguish them, but that would require a deeper solution).
For this layer CyclOSM
I would say any kind of strong yellow (#FFFF00) or mid/strong orange (like #FFBD5F or #FFAA00).
#FFAA00 would be my choice.
I couldn't find a color that works well with both OSM Carto and CyclOSM. I do like blue on Carto and other maps, although we might need a different tone, as Waymarked trails also uses plain blue.
As a quick fix for CyclOSM, I'm using yellow for now if the current layer when loading the track is CyclOSM.
Yellow instead of orange, because:
- MTB Routes are in some reddish orange (#d15000, map example)
- Waymarked trails overlays use orange
- suggested color combination with magenta in the Triad scheme by tools like Copaso
- despite we're already using yellow for route hightlighting
Potential future improvements:
- casing around track (white?)
- update color on base layer change
- (?) automatically extract tile image colors and choose best contrast ratio from a set of track colors, e.g. with color-thief and get-best-contrast-color
- another way to increase contrast is to add a slider to decrease opacity/saturation/lightness of the base layers
And as it's the first proposed layer, it's this one that is tricky.
CyclOSM is the default and available for French users only right now.
- allow changing default color of imported tours in Brouter Web from blue to other colors
- we first need to implement a configuration panel, see #248
- or maybe we could have a track load dialog, similar to No-go areas, with a color picker
- or: allow directly using the kml embedded coloring infos
togeojson would support KML styles, but Leaflet.FileLayer doesn't apply them to Leaflet. And I'm not sure if many people would benefit from this and if we should put work into supporting special features of a specific format.
- or: allow individual coloring of individual imported routes after they are imported
Potential options:
- make tracks interactive when route drawing is off and bind a popup with info (name), color picker and delete button (see also custom POIs popup)
- popup-style toolbar (color picker + delete buttons)
- horizontal (#88) Easybar (already used) in Leaflet Tooltip?
- Leaflet.toolbar - see popup example (draw shape and click)
- per layer configuration in switcher
- e.g. Leaflet.Control.Appearance (controls too wide, should be behind button?)
all the imported gpx tracks have the same colors: hard to distinguish them, but that would require a deeper solution
We could apply a "random" color to each track, probably as option, either by iterating a defined set of colors or by shifting HSL hue. But probably hard to impossible to ensure good contrast for all.
See #420#issuecomment-850724915 for a color picker UI remark.
- we first need to implement a configuration panel, see Create a configuration panel for user preferences #248
Thanks for all your considerations - I have to admit I totally forgot about this thread, however the yellow for CyclOSM was a welcomed change and in the meantime I had done some tinkering on a small little "hacky" chrome extension that did the job for me by looking into the DOM and apply a custom color and opacity to the found paths ...
I feel like a global configuration option which is remembered is the only really useful way to provide control over the path coloring. So keep this in mind if you'll decide to add such a configuration panel in the future.
When I use the .gpx Import I often import many long-distance cycle paths across multiple federal states, and having to chose the color each time I import another .gpx (although many times I bulk load them in one step) would feel cumbersome.