california hot springs

hot_springs.geojson

hot_springs.yaml

import:
    - https://www.nextzen.org/carto/refill-style/11/refill-style.zip
    - https://gist.githubusercontent.com/burritojustice/12e5f901fd1f48318ad9b1aded1bb2b3/raw/demo.yaml

sources:
    hot_springs:
        type: GeoJSON
        # url: https://gist.githubusercontent.com/burritojustice/9bc6c94276808b020789540e287a9286/raw/163e89de2880e55e3cfef9989ba2faabd3d15bbc/hot_springs.geojson
        url: https://maphub.cit.api.here.com/geospace/x-california-hotsprings/tile/web/{z}_{x}_{y}
        url_params: 
            app_id: global.app_id
            app_code: global.app_code
        type: GeoJSON


layers:
    _hot_springs:
        data: {source: hot_springs}
        draw:
            points:
                collide: false
                # color: red
                color: |
                    function(){
                        // temp = 60
                        // var test = "hsl(90, 100%, 50%)"
                        var temp = feature.F
                        if (temp == 'W' || temp == 'H'){temp = 0}
                        console.log(temp)
                        temp = (203 - temp)/2
                        var color = "hsla(" + temp.toString() + ", 100%, 50%, 60%)"
                        return color
                        }
                outline:
                    color: black
                    width: 1px
                size: [[5,10px],[15,40px]]
                order: 2000
                text:
                    optional: true
                    text_source: Name
                    font:
                        size: 10px
                        fill: red
                        
        temp:
            filter: {$zoom: {min: 10}}
            draw:
                text:
                    collide: false
                    text_source: function(){return feature.F + 'º'}
                    font:
                        size: 10px
                        fill: black
                        # stroke:
                        #     color: white
                        #     width: 2px