Support » Plugin: OS DataHub Maps » Different track colours on same map

  • Resolved digbymaass

    (@digbymaass)


    Hi! It’s easy enough to edit a gpx file to add more than one track, but is it possible to display them with different colours? I’ve tried various things like <trk color="blue"> to more complex things like

    <trk>
         <extensions>
          <gpxx:TrackExtension>
            <gpxx:DisplayColor>Blue</gpxx:DisplayColor>
          </gpxx:TrackExtension>
        </extensions>
        <trkseg>

    and the tracks just show up with the default red.
    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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

    Thread Starter digbymaass

    (@digbymaass)

    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?

    Thread Starter digbymaass

    (@digbymaass)

    http://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 :-(.

    Plugin Author skirridsystems

    (@skirridsystems)

    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”

    Thread Starter digbymaass

    (@digbymaass)

    @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!).

    Plugin Author skirridsystems

    (@skirridsystems)

    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.

    Plugin Author skirridsystems

    (@skirridsystems)

    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="http://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.

    Thread Starter digbymaass

    (@digbymaass)

    Excellent! Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Different track colours on same map’ is closed to new replies.