D3 Examples - GeoJSON with CartoDB layer

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Kentucky Oil and Gas Wells Demo</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
​
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    form {
        position:absolute;
        top: 15px;
        right: 10px;
        font-size: 1.3em;
        background: #fff;
        width: 70px;
        padding: 5px 15px 10px;
        border-radius: 4px;
    }
    input {
        display: inline-block;
    }
    label {
        margin: 0 10px 0 4px;
​
    }
</style>
</head>
<body>
<div id='map'></div>
<form id="menu">
    <input type="radio" name="well" id="wells" checked="true" /><label for="all">all</label>
    <input type="radio" name="well" id="gas" /><label for="gas">gas</label>
    <input type="radio" name="well" id="oil" /><label for="oil">oil</label>
    <input type="radio" name="well" id="d&a" /><label for="d&a">d&amp;a</label>
 </form>
    
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.0/simple_statistics.min.js'></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
    var map = L.map('map')
        .setView([37.85, -84.77], 8);
​
    L.tileLayer('https://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);
​
    cartodb.createLayer(map, 'https://rgdonohue.cartodb.com/api/v2/viz/bcdbfe36-6f4f-11e5-833d-0e674067d321/viz.json', { https: true })
        .addTo(map)
        .on('done', function(layer) {
​
            layer.setInteraction(true);
​
             $('.cartodb-legend').hide();
        })
        .on('error', function(err) {
            alert("some error occurred: " + err);
        });
​
    var hexStyle = {
        color: '#fff',
            fillColor: 'grey',
        opacity: 1,
        weight: 1,
        fillOpacity: 1
    }
​
    var classBreaks;
​
    var colors = ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
​
    var currentVar = 'wells';
​
    var hex = omnivore.topojson('ky-wells.json')
        .on('ready', function() {
            hex.setStyle(hexStyle);
            getClassBreaks();
            symbolize();
            retrieve();
        })
        .on('error', function() {
            alert('hex data failed to load');
        })
        .addTo(map);
​
    function getClassBreaks() {
            var range = [];
            hex.eachLayer(function(l) {
                range.push(Number(l.feature.properties[currentVar]));
            });
​
            classBreaks = ss.quantile(range,[0,.2,.4,.6,.8,1]);
        }
​
    function getColor(val) {
        return  val > classBreaks[5] ? "#a63603" :
                val > classBreaks[4] ? "#e6550d" :
                val > classBreaks[3] ? "#fd8d3c" :
                val > classBreaks[2] ? "#fdbe85" :
                                       "#feedde";
    }
    function symbolize() {
​
        hex.eachLayer(function(l) {
            l.setStyle({
                fillColor: getColor(Number(l.feature.properties[currentVar]))
            })
        });
    }
    function retrieve(){
        hex.eachLayer(function(layer){
            var popup = 'all wells: <b>'+layer.feature.properties.wells+'</b><br>'+
                                    'gas wells: <b>'+layer.feature.properties.gas+'</b><br>'+
                                    'oil wells: <b>'+layer.feature.properties.oil+'</b><br>'+
                                    'd&amp;a wells: <b>'+layer.feature.properties['d&a']+'</b><br>';
            layer.bindPopup(popup);
        });
    }
    $('input').on('change', function() {
        currentVar = this.id;
        getClassBreaks();
        symbolize();
    });
    
​
    map.on('zoomend', function(e) {
        if(map.getZoom()>= 9){
            map.removeLayer(hex);
            $('#menu').hide();
            $('.cartodb-legend').show();
            
        } else {
            if(!map.hasLayer(hex)){
                map.addLayer(hex);
            }
             $('#menu').show();
             $('.cartodb-legend').hide();
        }
    });
​
</script>
</body>
</html>
    