Skip to content

Instantly share code, notes, and snippets.

@andrewxhill

andrewxhill/README.md

Last active December 8, 2015 17:20
Show Gist options
  • Save andrewxhill/d3537756e170de30f8a6 to your computer and use it in GitHub Desktop.
Save andrewxhill/d3537756e170de30f8a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This code shows you how to include dataset download buttons for a map built with CartoDB.js

Raw
buttons.html
<!DOCTYPE html>
<html>
<head>
<title>Download buttons | CartoDB</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 {
height: 100%;
padding: 0;
margin: 0;
}
/*
Name: ph-buttons
Description: Pixcil Hub Buttons
Author: Pixcils®
Version: 1.0
*/
/*Main button class
==========================*/
.ph-button {
width: 100px;
border-style: solid;
border-width: 0px 0px 3px;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
color: #FFF;
border-radius: 6px;
cursor: pointer;
display: inline-block;
font-style: normal;
overflow: hidden;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
transition: all 200ms ease-in-out 0s;
white-space: nowrap;
font-family: "Gotham Rounded A","Gotham Rounded B",Helvetica,Arial,sans-serif;
font-weight: 700;
padding: 19px 39px 18px;
font-size: 18px;
}
/*Blue
==========================*/
.ph-btn-blue {
border-color: #326E99;
background-color: #3E7BB6
}
.ph-btn-blue:hover, .ph-btn-blue:focus, .ph-btn-blue:active {
border-color: #3E7BB6;
background-color: #5CA2D1;
}
/*DEMO ONLY FOR CENTER POSITION*/
.ph-container {
margin: 0 auto;
display: inline;
}
.ph-float {
float: left;
width: 30%;
padding: 10px;
padding-top: 50px;
text-align: center;
}
.ph-clear {
clear: both;
}
</style>
</head>
<body>
<iframe width='100%' height='420' frameborder='0' src='//andrewxhill.cartodb.com/viz/d56c6f06-1354-11e4-9ad2-7054d21a95e5/embed_map?title=true&description=true&search=false&shareable=true&cartodb_logo=true&layer_selector=false&legends=true&scrollwheel=true&fullscreen=true&sublayer_options=1&sql=&zoom=3&center_lat=44.402391829093915&center_lon=-109.77539062499999' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<!-- Button design from http://codepen.io/Pixcils/pen/KfzFL -->
<div class="ph-container">
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=CSV&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>CSV</a>
</div>
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>GeoJSON</a>
</div>
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=SHP&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>Shapefile</a>
</div>
</div>
<div class="ph-clear"></div>
</body>
</html>
Raw
cartodbjs.html
<!DOCTYPE html>
<html>
<head>
<title>CartoDB.js Intro | CartoDB</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 {
height: 100%;
padding: 0;
margin: 0;
}
/*
Name: ph-buttons
Description: Pixcil Hub Buttons
Author: Pixcils®
Version: 1.0
*/
/*Main button class
==========================*/
.ph-button {
width: 100px;
border-style: solid;
border-width: 0px 0px 3px;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
color: #FFF;
border-radius: 6px;
cursor: pointer;
display: inline-block;
font-style: normal;
overflow: hidden;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
transition: all 200ms ease-in-out 0s;
white-space: nowrap;
font-family: "Gotham Rounded A","Gotham Rounded B",Helvetica,Arial,sans-serif;
font-weight: 700;
padding: 19px 39px 18px;
font-size: 18px;
}
/*Blue
==========================*/
.ph-btn-blue {
border-color: #326E99;
background-color: #3E7BB6
}
.ph-btn-blue:hover, .ph-btn-blue:focus, .ph-btn-blue:active {
border-color: #3E7BB6;
background-color: #5CA2D1;
}
/*DEMO ONLY FOR CENTER POSITION*/
.ph-container {
margin: 0 auto;
display: inline;
}
.ph-float {
float: left;
width: 30%;
padding: 10px;
padding-top: 50px;
text-align: center;
}
.ph-clear {
clear: both;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<style>
#map {
width: 100%;
height: 420px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
// get the viz.json url from the CartoDB Editor
// - click on visualize
// - create new visualization
// - make visualization public
// - click on publish
// - go to API tab
window.onload = function() {
cartodb.createVis('map', 'http://andrewxhill.cartodb.com/api/v2/viz/d56c6f06-1354-11e4-9ad2-7054d21a95e5/viz.json');
}
</script>
<!-- Button design from http://codepen.io/Pixcils/pen/KfzFL -->
<div class="ph-container">
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=CSV&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>CSV</a>
</div>
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>GeoJSON</a>
</div>
<div class="ph-float">
<a href='https://andrewxhill.cartodb.com/api/v2/sql?format=SHP&q=SELECT%20*%20FROM%20all_week' class='ph-button ph-btn-blue'>Shapefile</a>
</div>
</div>
<div class="ph-clear"></div>
</body>
</html>
Raw
iframe.html
<!DOCTYPE html>
<html>
<head>
<title>Using IFRAMEs | CartoDB</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 {
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<iframe width='100%' height='520' frameborder='0' src='//andrewxhill.cartodb.com/viz/d56c6f06-1354-11e4-9ad2-7054d21a95e5/embed_map?title=true&description=true&search=false&shareable=true&cartodb_logo=true&layer_selector=false&legends=true&scrollwheel=true&fullscreen=true&sublayer_options=1&sql=&zoom=3&center_lat=44.402391829093915&center_lon=-109.77539062499999' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Application | CartoDB</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" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Open Sans', serif;
font-size: 28px;
}
</style>
<style>
#map {
width: 100%;
height: 420px;
padding: 0;
margin: 0;
}
#report {
padding: 18px;
}
#report .text{
margin-top: 8px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="report">
<h3>Report</h3>
<div class="text">Monday, July 23 - A sonic boom with 3.5 magnitude was recorded 11km NE of San Simeon, California</div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
// get the viz.json url from the CartoDB Editor
// - click on visualize
// - create new visualization
// - make visualization public
// - click on publish
// - go to API tab
window.onload = function() {
cartodb.createVis('map', 'http://andrewxhill.cartodb.com/api/v2/viz/d56c6f06-1354-11e4-9ad2-7054d21a95e5/viz.json')
.done(function(vis, layers){
var earthquakes = layers[1].getSubLayer(0);
earthquakes.setSQL("SELECT *, to_char(time, 'Day, Month DD') date FROM all_week");
earthquakes.setInteraction(true);
earthquakes.setInteractivity("latitude, longitude, date, place, type, mag");
earthquakes.on('featureClick', function(e, latlng, pos, data, subLayerIndex) {
$('.text').html(data.date+" - A "+data.type+" with "+data.mag+" magnitude was recorded "+data.place);
vis.getNativeMap().setView([data.latitude, data.longitude], 8);
});
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment