brouter-web icon indicating copy to clipboard operation
brouter-web copied to clipboard

Support custom coloring of imported .kml / .gpx tours

Open momentmal opened this issue 4 years ago • 7 comments

pick 1 of the 3 following options, that would be a great start (1 being maybe the most simple and probably also my favourite):

  1. allow changing default color of imported tours in Brouter Web from blue to other colors
  2. or: allow directly using the kml embedded coloring infos
  3. or: allow individual coloring of individual imported routes after they are imported

momentmal avatar May 22 '20 22:05 momentmal

Whaa, I was about to raise exactly the same issue :-) (blue on blue, impossible to view !)

Cuervino avatar May 22 '20 22:05 Cuervino

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?

nrenner avatar May 29 '20 20:05 nrenner

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. 2020-05-30_10h54_37

Cuervino avatar May 30 '20 08:05 Cuervino

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.

nrenner avatar Jun 03 '20 09:06 nrenner

  1. 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
  1. 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.

  1. 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)
  • per layer configuration in switcher

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.

nrenner avatar Jun 03 '20 10:06 nrenner

See #420#issuecomment-850724915 for a color picker UI remark.

rkflx avatar May 28 '21 23:05 rkflx

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.

momentmal avatar Jul 30 '23 09:07 momentmal