Skip to content

Instantly share code, notes, and snippets.

@anandthakker

anandthakker/index.html

Created September 22, 2015 21:56
Download ZIP

Revisions

  1. anandthakker created this gist Sep 22, 2015.
    74 changes: 74 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    <!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.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #color-map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>

    <div id='color-map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJnUi1mbkVvIn0.018aLhX0Mb0tdtaT2QNe2Q';
    var choroStyle = {
    version: 8,
    name: 'Basic',
    sources: {
    'us-counties': {
    'type': 'vector',
    'url': 'mapbox://devseed.us-counties'
    }
    },
    sprite: '',
    glyphs: '',
    layers: [{
    id: 'background',
    type: 'background',
    paint: { 'background-color': '#000' }
    }]
    }

    var breaks = [0, 4, 16, 64, 256, 1024, 4096, 16384, 65536]

    for (var p = 0; p < breaks.length; p++) {
    var filters
    if (p < breaks.length - 1) {
    filters = [ 'all',
    [ '>=', 'pop_density', breaks[p] ],
    [ '<', 'pop_density', breaks[p + 1] ]
    ]
    } else {
    filters = [ 'all',
    [ '>=', 'pop_density', breaks[p] ]
    ]
    }
    choroStyle.layers.push({
    id: 'counties-pop-' + p,
    type: 'fill',
    source: 'us-counties',
    'source-layer': 'counties',
    paint: {
    'fill-color': '#5b6b6b',
    'fill-opacity': (p + 1) / breaks.length
    },
    filter: filters
    })
    }

    var choro = new mapboxgl.Map({
    container: 'color-map',
    style: choroStyle,
    center: [-90, 38.5],
    zoom: 3 // starting zoom
    })
    </script>

    </body>
    </html>