Skip to content

Instantly share code, notes, and snippets.

@rgdonohue

rgdonohue/README.md

Last active October 31, 2015 14:03
Show Gist options
  • Save rgdonohue/5cb0a729b0558a84e4f8 to your computer and use it in GitHub Desktop.
Save rgdonohue/5cb0a729b0558a84e4f8 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB layer switcher
Raw
README.md

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

Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment