Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/.block

Last active November 4, 2016 16:55
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 clhenrick/59513f45bc99bf40ba55de923c490f09 to your computer and use it in GitHub Desktop.
Save clhenrick/59513f45bc99bf40ba55de923c490f09 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet with a Carto Layer I extended
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- This script makes it easy to use Stamen basemaps -->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map {
height: 100%;
}
.popup-content p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// necessary for making AJAX calls on Blockbuilder.org as of 2016-11-02
jQuery.support.cors = true;
// create a new map centered on the U.S.
var map = L.map('map').setView([39.69, -99.185], 5);
// create a tile layer for our toner basemap
var darkmatterLayer = new L.TileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png');
// add the tile layer to the map
map.addLayer(darkmatterLayer);
// function to make our popup-content
var makePopUpContent = function(props) {
return '<div class="popup-content">' +
'<p><strong>Date:</strong> ' + props.date + '</p>' +
'<p><strong>Magnitude:</strong> ' + props.mag + '</p>' +
'<p><strong>Injured:</strong> ' + props.inj + '</p>' +
'</div>'
}
// color ramp via ColorBrewer: http://colorbrewer2.org/#type=sequential&scheme=Purples&n=5
var ramp = ['#f2f0f7','#cbc9e2','#9e9ac8','#6a51a3'];
// returns a color based on a value passed, in this case we are using the value for "mag"
var getColor = function(d) {
console.log(d);
return d >= 4 ? ramp[0] :
d >= 3 ? ramp[1] :
d >= 2 ? ramp[2] :
d >= 1 ? ramp[3] :
'#333';
}
// style function for styling the GeoJSON layer, uses getColor function above
var style = function(feature) {
return {
color: getColor(feature.properties.mag),
weight: 3,
opacity: 1
}
}
// function we can use to filter what data is added to the GeoJSON layer
// eg try changing the value from 0 to 3 or 4
var filter = function(feature) {
return feature.properties.mag > 0;
}
// this will be called on each of the GeoJSON features and can be used to create Popups
// for each GeoJSON feature on our map
var onEachFeature = function(feature, layer) {
if (feature.properties) {
var popUpContent = makePopUpContent(feature.properties);
layer.bindPopup(popUpContent);
}
}
// Set up our GeoJSON layer with options: filter, onEachFeature, & style
// add it to the map, but don't add data just yet
var tornadoLayer = L.geoJson(null, {
filter: filter,
onEachFeature: onEachFeature,
style: style
}).addTo(map);
// sample query for our Tornado table
var query = "SELECT * FROM tornado WHERE \"timestamp\" >= '2012-01-01' and \"timestamp\" < '2013-01-01'";
// load our data asynchronously from Carto
var sql = new cartodb.SQL({ user: 'stamen-builder' });
sql.execute(query, null, { format: 'geojson' })
.done(function(data) {
console.log(data);
// add the tornado data to our tornadoLayer
tornadoLayer.addData(data);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment