Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tunnels are too prominent #48

Closed
westnordost opened this issue Feb 11, 2018 · 13 comments
Closed

Tunnels are too prominent #48

westnordost opened this issue Feb 11, 2018 · 13 comments

Comments

@westnordost
Copy link
Member

Tunnels are too prominent, too solid.
Only the outline of the tunnel should be shown half-transparent and dashed, but the line should not be filled - or if filled, with something along the lines like 90% transparency.
Also, the outlines of normal roads and those of tunnels are merged, this looks quite weird.

untitled

@ENT8R ENT8R self-assigned this Feb 11, 2018
@ENT8R
Copy link
Collaborator

ENT8R commented Feb 11, 2018

The problem is that I have absolutely no idea how to show only the outline but not the whole tunnel because the tunnel will always be drawn by default...

@westnordost
Copy link
Member Author

Draw it with 100% transparency?

@ENT8R
Copy link
Collaborator

ENT8R commented Feb 11, 2018

Adding

tunnel:
  filter: { is_tunnel: true }
  draw:
    lines:
      color: [0, 0, 0, 0]
      outline:
        dash: [0.6,0.4]
        color: [0.000, 0.000, 0.000, 1.00]
        order: 400
        width: function () { return 1*4 * Math.log($zoom); }

results in

@westnordost
Copy link
Member Author

Don't use the "opaque" (default) draw mode for translucent stuff. Try inlay.

@ENT8R
Copy link
Collaborator

ENT8R commented Feb 11, 2018

Looks still like this:

@westnordost
Copy link
Member Author

How about other blend modes?

@ENT8R
Copy link
Collaborator

ENT8R commented Feb 11, 2018

The same result...

@ENT8R
Copy link
Collaborator

ENT8R commented Feb 11, 2018

There is not even a visible effect when switching the modes...

@ENT8R ENT8R mentioned this issue Feb 20, 2018
@westnordost
Copy link
Member Author

Perhaps then disable rendering tunnels again for now. There is a rat-tail attached to that feature. I.e. look at Bonn Central Station:

bonn

@ENT8R
Copy link
Collaborator

ENT8R commented Feb 20, 2018

Alright.

@westnordost
Copy link
Member Author

Okay, the goal is to make the line fill of tunnels half-transparent or even fully-transparent+preserving the line outline.

I also had a go but did not succeed. I think why the translucent blend mode does not seem to work on tunnels is because the parent rule already defines a (white) color for the road. The half-transparent white of tunnels then just adds to the white of the road.

I tried to not define the road color in the parent draw rule (for roads) but in a rule like this:

        non-tunnel:
            filter: { not: { is_tunnel: true }}
            draw:
                lines:
                    color: global.road_color

(to achieve the line for tunnels not being filled but just the outline drawn)
that works insofar as this works for all other roads that are not tunnels. However, tunnels are not drawn at all this way - the road-outline rule further below does not draw. Perhaps because in tangram-es, if no color for the line fill is specified, also the outline is not drawn.

Adding

        tunnel:
            filter: { is_tunnel: true }
            draw:
                tunnel-way:
                    color: rgba(255,0,255,0.5)

styles:
    tunnel-way:
        base: lines
        blend: translucent
        blend_order: 1

does draw tunnels (for testing: pink), but not translucent but opaque.

@matteblair, do you know what I am doing wrong? My goal is to draw tunnels with a (half-)transparent fill (while keeping the outline at full opaqueness, if possible). Though, I am failing to draw the tunnels half-transparent in the first place.
Roads style

@matteblair
Copy link

I think what's going to work best here is a lines style using the translucent blend mode:

styles:
    tunnel-style:
        base: lines
        blend: translucent

Paired with draw rules that set a low (or zero) fill opacity and a high outline opacity:

layers:
    roads:
        data: { source: nextzen}
        filter: { not: { kind: [rail, ferry] } }
        tunnel:
            filter: {is_tunnel: true }
            draw:
                lines:
                    style: tunnel-style
                    color: [0., 1., 0., 0.1]
                    width: 7px
                    order: 6
                    outline:
                        color: [.8, .8, .8, 1.]
                        width: 3px

Let me know if that looks better!

@westnordost
Copy link
Member Author

westnordost commented Oct 29, 2018

Oh right, I tried your suggestion, and it looks pretty good now. I think what I did wrong was to write

        tunnel:
            filter: { is_tunnel: true }
            draw:
                tunnel-way:
                    color: rgba(255,0,255,0.5)

instead of

        tunnel:
            filter: { is_tunnel: true }
            draw:
               lines:
                    style: tunnel-way
                    color: rgba(255,0,255,0.5)

Thank you, @matteblair !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants