Skip to content

Instantly share code, notes, and snippets.

@rgdonohue
Last active November 5, 2015 18:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rgdonohue/e214b88043c5ec1dfa8f to your computer and use it in GitHub Desktop.
Save rgdonohue/e214b88043c5ec1dfa8f to your computer and use it in GitHub Desktop.
GeoJSON with CartoDB layer

Demonstrates loading a local data file (encoded in TopoJSON format) and symbolizes using Leaflet functionality. Also loads a data layer form CartoDB database. JQuery detects zoom level to remove or add the hexbin layer and toggle between the relevant legends/layer switcher.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Kentucky Oil and Gas Wells Demo</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
form {
position:absolute;
top: 15px;
right: 10px;
font-size: 1.3em;
background: #fff;
width: 70px;
padding: 5px 15px 10px;
border-radius: 4px;
}
input {
display: inline-block;
}
label {
margin: 0 10px 0 4px;
}
</style>
</head>
<body>
<div id='map'></div>
<form id="menu">
<input type="radio" name="well" id="wells" checked="true" /><label for="all">all</label>
<input type="radio" name="well" id="gas" /><label for="gas">gas</label>
<input type="radio" name="well" id="oil" /><label for="oil">oil</label>
<input type="radio" name="well" id="d&a" /><label for="d&a">d&amp;a</label>
</form>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.0/simple_statistics.min.js'></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map = L.map('map')
.setView([37.85, -84.77], 8);
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
cartodb.createLayer(map, 'https://rgdonohue.cartodb.com/api/v2/viz/bcdbfe36-6f4f-11e5-833d-0e674067d321/viz.json', { https: true })
.addTo(map)
.on('done', function(layer) {
layer.setInteraction(true);
$('.cartodb-legend').hide();
})
.on('error', function(err) {
alert("some error occurred: " + err);
});
var hexStyle = {
color: '#fff',
fillColor: 'grey',
opacity: 1,
weight: 1,
fillOpacity: 1
}
var classBreaks;
var colors = ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
var currentVar = 'wells';
var hex = omnivore.topojson('ky-wells.json')
.on('ready', function() {
hex.setStyle(hexStyle);
getClassBreaks();
symbolize();
retrieve();
})
.on('error', function() {
alert('hex data failed to load');
})
.addTo(map);
function getClassBreaks() {
var range = [];
hex.eachLayer(function(l) {
range.push(Number(l.feature.properties[currentVar]));
});
classBreaks = ss.quantile(range,[0,.2,.4,.6,.8,1]);
}
function getColor(val) {
return val > classBreaks[5] ? "#a63603" :
val > classBreaks[4] ? "#e6550d" :
val > classBreaks[3] ? "#fd8d3c" :
val > classBreaks[2] ? "#fdbe85" :
"#feedde";
}
function symbolize() {
hex.eachLayer(function(l) {
l.setStyle({
fillColor: getColor(Number(l.feature.properties[currentVar]))
})
});
}
function retrieve(){
hex.eachLayer(function(layer){
var popup = 'all wells: <b>'+layer.feature.properties.wells+'</b><br>'+
'gas wells: <b>'+layer.feature.properties.gas+'</b><br>'+
'oil wells: <b>'+layer.feature.properties.oil+'</b><br>'+
'd&amp;a wells: <b>'+layer.feature.properties['d&a']+'</b><br>';
layer.bindPopup(popup);
});
}
$('input').on('change', function() {
currentVar = this.id;
getClassBreaks();
symbolize();
});
map.on('zoomend', function(e) {
if(map.getZoom()>= 9){
map.removeLayer(hex);
$('#menu').hide();
$('.cartodb-legend').show();
} else {
if(!map.hasLayer(hex)){
map.addLayer(hex);
}
$('#menu').show();
$('.cartodb-legend').hide();
}
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment