Old school D3 from simpler times

All examples By author By category About

rgdonohue

Full window Github gist

CartoDB sublayer switcher

Demonstrates switching between mapped attributes using sublayers of a CartoDB layer.

<!DOCTYPE html>
<html>
  <head>
    <title>MUG</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
    
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #layer-controls {
          position: absolute;
          top: 15px;
          right: 15px;
          margin: 10px 15px;
          z-index: 100;
      }
    </style>

<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
<div id="layer-controls">
    <button id="sublayer0" class="btn">gas</button>
    <button id="sublayer1" class="btn">oil</button>
    <button id="sublayer2" class="btn">d&amp;a</button>
</div>
    <div id="map"></div>

<script type="cartocss/html" id="wells-styles">
      
      #ky_oil_and_gas_wells {
           marker-fill-opacity: 0.9;
           marker-line-color: #FFF;
           marker-line-width: .2;
           marker-line-opacity: 1;
           marker-placement: point;
           marker-type: ellipse;
           marker-width: 3;
           marker-allow-overlap: true;
           [zoom > 9]{
               marker-width: 5;
           }
           [zoom > 9]{
               marker-width:7;
           }
           [zoom > 9]{
               marker-width:9;
           }
        }
      
        #ky_oil_and_gas_wells[org_result="D&A"] {
           marker-fill: #a6cee3;
        }
    
    
        #ky_oil_and_gas_wells[org_result="GAS"] {
           marker-fill: #FF5C00;
        }

#ky_oil_and_gas_wells[org_result="OIL"] {
           marker-fill: #850200;
        }
    </script>

<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

<script>

var map = new L.Map("map", {
        center: [38.8369, -84.6847],
        zoom: 7
    });
    
    L.tileLayer('https://tile.stamen.com/toner/{z}/{x}/{y}.png', {
        attribution: 'Stamen'
        }).addTo(map);
        
    var layerSource = {
        user_name: 'rgdonohue',
        type: 'cartodb',
        sublayers: [{
                sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='GAS'",
                cartocss: $("#wells-styles").text()
            },
            {
                sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='OIL'",
                cartocss: $("#wells-styles").text()
            },
            {
                sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='D&A'",
                cartocss: $("#wells-styles").text()
            }]
        }
    
     var sublayers = [];
        
     cartodb.createLayer(map, layerSource)
        .addTo(map)
        .done(function(layer) {
            for (var i = 0; i < layer.getSubLayerCount(); i++) {
               sublayers[i] = layer.getSubLayer(i);
            } 
        })
        .error(function(err) {
            console.log("An error occurred: " + err);
        });
        
        $("#layer-controls button").on('click', function(e) {
            var currentLayer = $(e.target).attr('id'),
                currentIndex = currentLayer.slice(-1);
            sublayers[currentIndex].toggle();
        });
        
    </script>

</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js