Different track colours on same map

If you can target the right track with CSS, you could apply a filter effect to the <path> element. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

The tracks have the same class – “leaflet-interactive” – so even if you could target that, it would change all the tracks to the same colour.

I have no experience with multiple tracks, but if they are represented on the webpage by separate HTML elements, then there is always a way to target them individually, for example with :nth-child() or some unique attribute value. Can you share an example page?

https://carnethy.com/table-test-page/
There are 2 tracks in the gpx file used in the map. Look for <div class="leaflet-pane leaflet-overlay-pane"> in Inspector.

I’d rather have a solution involving the gpx file though!

Yes, the tracks show up as two separate <path> elements. I take your point about fixing the gpx for preference, but you could change the colour of the shortcut path from blue to (say) green with

path.leaflet-interactive:nth-child(2) {
  filter: hue-rotate(270deg);
}

I did try a CSS selector of path.leaflet-interactive[d^="M318"], since it is only the d attribute, defining the actual track, that distinguishes the paths; but its value changes when you zoom in :-(.

I agree this really needs to go in the plugin, but the GPX file itself is handled by an external module which I don’t want to start changing. How about allowing multiple GPX files using a similar method as is used for markers?

gpx=”https://mydomain.com/route1.gpx!red|https://mydomain.com/route2.gpx!blue”

@skirridsystems that sounds worth a try! I had thought that maybe there might be a syntax for the gpx file that might work that I didn’t find, but I know that track colour isn’t well handled by gpx.

@timjh we are deeply into “really can’t be bothered” territory here! And I don’t know of any way of targeting a single WP page with CSS let alone a shortcode (but then again I don’t know everything!).

Hmm, that turned out to be not so simple. The GPX plugin doesn’t seem to support adding multiple track files off the bat. The second just replaces the first. I’m going to have to punt on this one for the time being.

I’ve updated the plugin so it will now use the colour embedded in the GPX file within the track data. The syntax is a little different to what you used.

<extensions>
    <line xmlns="https://www.topografix.com/GPX/gpx_style/0/2">
        <color>FF0000</color>
    </line>
</extensions>

In the plugin attributes you need to specify gpxstyle=1 to tell it not to override GPX styling as it normally does.

• This reply was modified 4 years, 2 months ago by skirridsystems.

Excellent! Thanks!