CartoDB layer switcher

10/31/2015 - 2:01 PM
Rendered
Source
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="http://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="http://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="http://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('http://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>
thumbnail.png
Rendered
Source
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CartoDB layer switcher
