tangrams / walkabout-style

Preview map:
https://tangrams.github.io/walkabout-style
MIT License
32 stars 14 forks source link

Add wiggly outline to some bike map features #159

Open nvkelso opened 7 years ago

nvkelso commented 7 years ago

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 commented 7 years ago

I made a block for it here