Dynamic line previews in line preset icons

[quincylvania]

Closes #5839. Re: #5873, #5882.

• Remove embedded line geometry from iD line feature icons
• Add dynamic line previews to all line preset icons
• Use the same stroke styling for line icons as when rendering the lines in the map
• Icon styling can be overridden. For example, the stroke/casing of cycle paths is reversed for the light background

This PR does not address embedded geometry in relation icons.

• The stroke-dasharray could probably be improved for railways, ferry routes

Nicer icons when using line preset as areas:

A selection of the new icons:

[kymckay]

It sounds crazy and I've checked your maths (10.5 + 6/2 = 13.5), but I swear the vertices are slightly lower than the line 😆

[quincylvania]

It sounds crazy and I've checked your maths (10.5 + 6/2 = 13.5), but I swear the vertices are slightly lower than the line 😆

@SilentSpike Are you seeing this in the images or live? Now I'm worried that certain browsers or screens don't like the partial-pixel alignment.

[kymckay]

@quincylvania I noticed it particularly in the residential road image, then checked a live instance and see the same. Took a screenshot and see a 1px difference

Edit:

Scratch that, I realised that's not a true test since I had zoomed the page there. However, here is a screen shot I just took at default zoom running a live instance where the difference is clearly visible:

I checked your images and there actually isn't a difference where I thought I saw one. So it must be monitor specific.

[bhousel]

@SilentSpike Are you seeing this in the images or live? Now I'm worried that certain browsers or screens don't like the partial-pixel alignment.

Maybe try -

• setting an explicit viewBox=0 0 40 20 attribute on the svg. (width and height should do the same thing, but I'm not 100% sure).
• changing lineSvg's height from 20 to 19 or 21? (you can open Chrome's dev tools and play with this value live)

Retina screens should handle the half pixel alignment ok - non retina screens would blur it. Also SVG strokes are measured from the center of the stroke

OH and I'd draw those vertices as svg circles, not rounded divs. Actually that's probably the real issue and the lines are probably fine.

[quincylvania]

@bhousel Thanks for the tips! I implemented them and this should be ready for review.

@SilentSpike I changed the line casing in the icons to use full-pixel increments, which I think was the problem. Let me know if you're still seeing issues. I updated the railways screenshot so you can check that, or preferably on live.

[bhousel]

This looks great, and you can merge it whenever you're happy with it 😄
Are you going to do the relation ones too?

[quincylvania]

@bhousel Thanks! I could do the relation ones but I'm not sure that would unblock new features like this did for #5873. Feel free to create an issue.

[bhousel]

@bhousel Thanks! I could do the relation ones but I'm not sure that would unblock new features like this did for #5873. Feel free to create an issue.

It seems kind of silly not to just do all of them at the same time.