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

Add wiggly outline to some bike map features #159

Open
nvkelso opened this issue Mar 15, 2017 · 1 comment
Open

Add wiggly outline to some bike map features #159

nvkelso opened this issue Mar 15, 2017 · 1 comment

Comments

@nvkelso
Copy link
Member

nvkelso commented Mar 15, 2017

Worked with @patriciogonzalezvivo to come up with wavy pattern we can use with bike map enhancements:

import:
    - https://tangrams.github.io/blocks/shapes/type.yaml
    - https://tangrams.github.io/blocks/functions/zoom.yaml

sources:
    mapzen:
        type: TopoJSON
        url: https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson
        url_params:
            api_key: mapzen-xxxxxx    # your api key here

layers:
    earth:
        data: { source: mapzen }
        draw:
            polygons:
                order: 0
                color: grey
    water:
        data: { source: mapzen }
        draw:
            polygons:
                order: 1
                color: lightblue
    roads:
        data: { source: mapzen }
        draw:
            lines:
                order: 3
                color: [0.800, 0.180, 0.180, 1.00]
                width: 3m
            wavy_lines:
                order: 2
                color: yellow
                width: [[16,0px],[16,10px],[17,12m]]

styles:
    wavy_lines:
        base: lines
        mix: [shapes-type, functions-zoom]
        blend: inlay
        texcoords: true
        shaders:
            defines:
                ZOOM_START: 16
                STROKE: 0.564
                FREQ: 14.128
                AMP: zoom()*0.044
            blocks:
                color: |
                    vec2 st = v_texcoord.xy;
                    st.x += sin(st.y*FREQ)*AMP;
                    color.a = stroke(st.x,.5-STROKE*.5);
@patriciogonzalezvivo
Copy link

I made a block for it here

@nvkelso nvkelso modified the milestone: v4.1.0 bike map enhancements Apr 6, 2017
@nvkelso nvkelso removed this from the v4.1.0 bike map enhancements milestone Apr 17, 2017
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

2 participants