D3 Examples - Interactive map with MapboxGL

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
        <link href='main.css' rel="stylesheet"/>
    </head>
​
    <body>
​
        <h1>Building a map with MapboxGL.js</h1>
        <h2>Interactive web map tutorial - part 6</h2>
​
        <div id="map-area">
​
            <div id='map'></div>
​
            <div id='layer-switch'>
                <span class="title">Demographic Origin:</span>
                <div id='layers'></div>
                <div id="legend"></div>
            </div>
​
        </div>
​
        <script>
        // Replace this with your own token when making maps with your own layers
        mapboxgl.accessToken = 'pk.eyJ1IjoibWZpbmNrZXIiLCJhIjoiY2o3cW1vdTdlNDRiNjMzbnB4Yzc5OTF2cSJ9.ZOpKJ4FmWj8CUpsKbsh-dg';
​
        const color_scale = [
                                [0,   '#fdffb4'],
                                [0.1, '#d1f7ae'],
                                [0.2, '#a7e7ad'],
                                [0.3, '#7ed6ad'],
                                [0.4, '#57c3ae'],
                                [0.5, '#30b0ae'],
                                [0.6, '#009cab'],
                                [0.7, '#0087a4'],
                                [0.8, '#007398'],
                                [0.9, '#1a5e89'],
                            ];
        // Initialize mapbox map with desired stylesheet
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mfincker/cj8q54extaap22rqmx4ylissd',
            center: [-98, 38.88],
            minZoom: 3,
            zoom: 3
        });
        map.on('load', function() {
            // Specify the source for the map layers
            map.addSource('state', {
                'type': 'vector',
                'url': 'mapbox://mfincker.5a5pwuuf'
            });
        
            map.addSource('county', {
                'type': 'vector',
                'url': 'mapbox://mfincker.6cry8xr7'
            });
        
            map.addSource('tract', {
                'type': 'vector',
                'url': 'mapbox://mfincker.8wiiisxj'
            });
            // Add layers,
            // Toggle between layers based on zoom level
            // State
            map.addLayer({
                'id': 'state',
                'source': 'state',
                'source-layer': 'state',
                     'maxZoom': 4,
                'type': 'fill',
                'paint': {
                    'fill-color': {
                        property: 'white_percent',
                        stops: color_scale,
                    },
                    'fill-opacity': 0.75
                }
            }, 'border-admin-3-4');
            // County
            map.addLayer({
                'id': 'county',
                'source': 'county',
                'source-layer': 'county',
                'maxZoom': 8,
                'type': 'fill',
                'paint': {
                    'fill-color': {
                        property: 'white_percent',
                        stops: color_scale,
                    },
                    'fill-opacity': 0.7,
                    'fill-outline-color': '#acb1bb'
                }
            }, 'border-admin-3-4');
            // Tract
            map.addLayer({
                'id': 'tract',
                'source': 'tract',
                'source-layer': 'tract',
                'minZoom': 8,
                'type': 'fill',
                'paint': {
                    'fill-color': {
                        property: 'white_percent',
                        stops: color_scale,
                    },
                    'fill-opacity': 0.65,
                    'fill-outline-color': '#acb1bb'
                }
            }, 'border-admin-3-4');
        });
​
​
        // Variable buttons
        const var_names = [
                            { varname: "asian_percent", name: "asian"},
                            { varname: "black_percent", name: "black"},
                            { varname: "hispanic_percent", name: "hispanic"},
                            { varname: "pacific_percent", name: "pacific islander"},
                            { varname: "white_percent", name: "white"},
                            { varname: "other_percent", name: "other"},
                          ];
​
        // Populate the layer div automatically
        document.getElementById("layers").innerHTML =
            var_names.reduce((innerHtml, l) => {
            return (l.name === "white")
            ? innerHtml + '<label><input type="radio" name="layers" value="' + l.varname + '" checked>' + l.name + "</label>"
            : innerHtml + '<label><input type="radio" name="layers" value="' + l.varname + '">' + l.name + "</label>"
            }, '');
​
​
        // Event listener  to switch between variables
        document.getElementById("layers").addEventListener("click", layerSwitch, false);
​
​
        function layerSwitch(e) {
            if (e.target.value && e.target !== e.currentTarget) {
​
                console.log(e.target.value)
​
                // TODO: make it into an array map
                map.setPaintProperty('county', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });
​
                map.setPaintProperty('tract', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });
​
                map.setPaintProperty('state', 'fill-color', {
                        property: e.target.value,
                        stops: color_scale
                });
            }
​
            e.stopPropagation();
        }
​
        const svg = d3.selectall("#legend")
                        .append("svg")
        
​
        </script>
​
    </body>
</html>
    