Old school D3 from simpler times

All examples By author By category About

rgdonohue

Full window Github gist

CartoDB layer switcher

Toggles between CartoDB layers. Is advantageous over sublayers in that all points are not redrawn with each toggle.

<!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="gasLayer" class="btn">gas</button>
    <button id="oilLayer" class="btn">oil</button>
    <button id="dryAbandonedLayer" 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 dryAbandonedLayer = {
            user_name: 'rgdonohue',
            type: 'cartodb',
            sublayers: [{
                    sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='D&A'",
                    cartocss: $("#wells-styles").text()
                }]
        },
        gasLayer = {
            user_name: 'rgdonohue',
            type: 'cartodb',
            sublayers: [{
                    sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='GAS'",
                    cartocss: $("#wells-styles").text()
            }]
        },
        oilLayer = {
            user_name: 'rgdonohue',
            type: 'cartodb',
            sublayers: [{
                    sql: "SELECT * FROM ky_oil_and_gas_wells WHERE org_result='OIL'",
                    cartocss: $("#wells-styles").text()
            }]
        }
        
     var layers = {};    
        
         
     cartodb.createLayer(map, gasLayer)
            .addTo(map)
            .done(function(layer) { 
                layers.gasLayer = layer;
            })
            .error(function(err) {
                console.log("An error occurred: " + err);
            });
        
     cartodb.createLayer(map, oilLayer)
            .addTo(map)
            .done(function(layer) { 
                layers.oilLayer = layer;
            })
            .error(function(err) {
                console.log("An error occurred: " + err);
            });
     cartodb.createLayer(map, dryAbandonedLayer)
            .addTo(map)
            .done(function(layer) { 
                layers.dryAbandonedLayer = layer;
            })
            .error(function(err) {
                console.log("An error occurred: " + err);
            });

$("#layer-controls button").on('click', function(e) {
        var currentLayer = $(e.target).attr('id'); 
        layers[currentLayer].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