Skip to content

Instantly share code, notes, and snippets.

@jorgeas80

jorgeas80/index.html

Last active August 29, 2015 14:09
Show Gist options
  • Save jorgeas80/5afd09618139f35f4351 to your computer and use it in GitHub Desktop.
Save jorgeas80/5afd09618139f35f4351 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Male vs Female expenses | CartoDB.js</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, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
@font-face {
font-family: 'staticregular';
src: url('fonts/static-webfont.eot');
src: url('fonts/static-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/static-webfont.woff') format('woff'),
url('fonts/static-webfont.ttf') format('truetype'),
url('fonts/static-webfont.svg#staticregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova Cn Rg';
src: url('fonts/ProximaNovaCond-Regular.eot');
src: url('fonts/ProximaNovaCond-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/ProximaNovaCond-Regular.woff') format('woff'),
url('fonts/ProximaNovaCond-Regular.ttf') format('truetype'),
url('fonts/ProximaNovaCond-Regular.svg#proximanovacondregular') format('svg');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Proxima Nova Cn Sb';
src: url('fonts/ProximaNovaCond-Semibold.eot');
src: url('fonts/ProximaNovaCond-Semibold.eot?#iefix') format('embedded-opentype'),
url('fonts/ProximaNovaCond-Semibold.woff') format('woff'),
url('fonts/ProximaNovaCond-Semibold.ttf') format('truetype'),
url('fonts/ProximaNovaCond-Semibold.svg#proximanovacondrsemibold') format('svg');
font-style: normal;
font-weight: 700;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html,
body,
#map {
height: 100%;
padding: 0;
margin: 0;
}
body {
text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font: 300 16px/19px 'Proxima Nova Cn Rg', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
.h-left {
float: left;
}
.h-right {
float: right;
}
h3 {
font: 700 16px/22px 'Proxima Nova Cn Sb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
div.cartodb-timeslider,
div.cartodb-legend-stack,
.leaflet-control-zoom {
display: none !important;
}
.map-info {
position: absolute;
right: 40px;
top: 40px;
z-index: 5;
font: 20px 'staticregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #fff;
}
.map-info li {
margin-bottom: 40px;
}
.map-info h2 {
margin-bottom: 4px;
}
.map-count {
width: 140px;
height: 6px;
border-radius: 10px;
background: rgba(0, 0, 0, .4);
position: relative;
}
.map-count > span {
display: inline-block;
height: 6px;
border-radius: 10px;
position: absolute;
left: 0;
top: 0;
width: 0;
transition: ease-in, width, 10s;
-webkit-transition: ease-in, width, 10s;
}
.map-count > span p {
position: absolute;
bottom: -24px;
left: 0;
width: 200px;
font-size: 15px;
color: rgba(255, 255, 255, .5);
}
.bullet_apple,
.apple > span { background: #1611E4 }
.bullet_sony,
.sony > span { background: #E812BD }
.bullet_samsung,
.samsung > span { background: #bc4841 }
.notifications {
position: absolute;
right: 40px;
top: 40px;
z-index: 5;
width: 360px;
bottom: 100px;
overflow: hidden;
}
.notifications > ul {
position: relative;
}
.notifications > ul ul {
margin: 20px 0 0;
}
.notifications > ul ul li {
margin: 0 0 10px;
}
.notifications > ul ul li:last-child {
margin-bottom: 0;
}
.notification {
display: none;
float: right;
width: 360px;
margin-right: -30px;
padding: 0 40px 40px;
background: rgba(54,59,65,.8);
opacity: 0;
}
.notification-inner {
border-top: 1px solid rgba(255,255,255,.2);
padding: 40px 0 0 25px;
}
.notification:first-child .notification-inner {
border-top: 0;
}
.notification h3 {
margin-bottom: 6px;
opacity: .5;
}
.notification strong {
font-family: 'Proxima Nova Cn Sb';
}
.bullet {
display: inline-block;
float: left;
width: 10px;
height: 10px;
margin-top: 4px;
margin-left: -25px;
border-radius: 6px;
}
.footer {
position: absolute;
bottom: 20px;
left: 40px;
right: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.8);
}
.footer span {
display: inline-block;
vertical-align: middle;
opacity: .8;
}
.footer h3 {
font-size: 18px;
}
.footer a {
color: rgba(255,255,255,.8);;
}
.footer a:hover {
color: #fff;;
}
.progress {
background: rgb(191, 4, 160);
height: 1px;
position: absolute;
top: -1px;
}
.share {
position: absolute;
top: 270px;
left: 40px;
z-index: 100000;
}
.share li {
float: left;
margin-right: 10px;
}
.share a {
opacity: .6;
}
.share a:hover {
opacity: .8;
}
.cartodb-logo,
.leaflet-control-attribution {
display: none !important;
}
@media (max-width: 600px) {
.notifications {
top: 100%;
margin-top: -331px;
left: 40px;
right: 40px;
height: 150px;
overflow: hidden;
bottom: auto;
width: auto;
}
.notification {
width: 100%;
}
.notification-inner {
border: 0;
}
.h-left,
.h-right {
float: none;
display: block;
width: 100%;
text-align: center;
}
.h-left {
margin-bottom: 10px;
}
}
@media (max-width: 750px) {
.h-left,
.h-right {
float: none;
display: block;
width: 100%;
text-align: center;
}
.h-left {
margin-bottom: 10px;
}
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div class="map-info">
<ul>
<li>
<h2>Gasto hombres</h2>
<div class="map-count apple">
<span id="apple-percent" style="width: 88.94%">
<p><span id="apple-figure">142.31</span> Mex $</p>
</span>
</div>
</li>
<li>
<h2>Gasto mujeres</h2>
<div class="map-count sony">
<span id="sony-percent" style="width: 97.20%">
<p><span id="sony-figure">157.48</span> Mex $</p>
<span>
</div>
</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
var map = new L.Map('map', {
zoomControl: true,
center: [22.156, -100.98],
zoom: 6
});
var options = {legends: false, time_slider: false}
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/868f495a-6e60-11e4-b23a-0e853d047bba/viz.json', options)
.addTo(map)
.on('done', function(layer) {
layer.setInteraction(true);
layer.on('featureOver', function(e, pos, latlng, data) {
cartodb.log.log(e, pos, latlng, data);
});
layer.on('error', function(err) {
cartodb.log.log('error: ' + err);
});
}).on('error', function() {
cartodb.log.log("some error occurred");
});
}
// you could use $(window).load(main);
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment