Page MenuHomePhabricator

Style tunnels differently
Closed, ResolvedPublic

Assigned To
Authored By
Pnorman
Jan 6 2017, 11:16 PM
Referenced Files
F10125971: image.png
Oct 10 2017, 9:16 PM
F10126607: image.png
Oct 10 2017, 9:16 PM
F10126579: image.png
Oct 10 2017, 9:16 PM
F10126614: image.png
Oct 10 2017, 9:16 PM
F10125874: image.png
Oct 10 2017, 9:16 PM
F10125995: image.png
Oct 10 2017, 9:16 PM
F10125760: image.png
Oct 10 2017, 9:16 PM

Event Timeline

Pnorman raised the priority of this task from Medium to High.Jun 14 2017, 7:22 PM

A couple of different ideas with the styling applied to the tunnel part

Dashed across

image.png (307×305 px, 51 KB)

::casing {
  line-dasharray: 8,8;
}
::fill {
  line-dasharray: 8,8;
  line-cap: butt;
}

Dashed across, casing around dashes

image.png (231×265 px, 32 KB)

::casing {
  line-dasharray: 9,6,1,0;
}
::fill {
  line-dasharray: 8,8;
  line-cap: butt;
}

Inner dashes

image.png (263×276 px, 38 KB)

::casing {
  // no changes
}
::fill {
  b/line-color: mix(white,@motorway-inner, 60%);
  b/line-width: @motorway-z14-width * (1 - 2*@motorway-casing-width);
  b/line-dasharray: 8,8;
  b/line-cap: butt;
}

Dashed casing

image.png (272×269 px, 39 KB)

::casing {
  line-dasharray: 8,8;
}
::fill {
  // no changes
}

Alternating dash casing

image.png (200×258 px, 26 KB)

::casing {
  b/line-dasharray: 8,8;
  b/line-width: @motorway-z14-width;
  b/line-color: mix(@motorway-outer,@land,20%);
  b/line-cap: butt;
}
::fill {
  // no changes
}

Existing

This is a dashed casing implementation with high frequency dashes and a fill colour alteration

image.png (173×211 px, 18 KB)

OpenStreetMap Carto

This is a dashed casing implementation with moderate frequency dashes and an obvious fill colour alteration

image.png (175×230 px, 24 KB)

None of these options are difficult to implement. Dashed across and dashed casing require the fewest lines of code, I prefer alternating dash casing and inner dashes.

I find that the dashed casing options look a bit strange with width changes.

Of course, the size of the dashes can be tweaked.

@Pnorman in order of (my) preference:

  1. Dashed casing
  2. Alternating dash casing
  3. Dashed across, casing around dashes
Pnorman moved this task from Backlog to Done on the Maps-Sprint board.