rgdonohue/README.md

## README.md

      
    Raw
  

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

  
## index.html
<!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

      
    Raw
  

              thumbnail.png
	<!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&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>