Skip to content

Commit ca509d0

Browse files
auremoserauremoser
committed
last checkpoints to add
1 parent 17ac032 commit ca509d0

File tree

5 files changed

+521
-0
lines changed

5 files changed

+521
-0
lines changed

‎ckpt-5-buttons/index.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>HTML Template | CartoDB</title>
5+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6+
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7+
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
8+
9+
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
10+
11+
<style type="text/css">
12+
html, body, #map {
13+
height: 100%;
14+
margin: 0;
15+
padding: 0;
16+
}
17+
#cartocss {
18+
position: absolute;
19+
right: 20px;
20+
top: 20px;
21+
}
22+
#sql {
23+
position: absolute;
24+
right: 292px;
25+
top: 20px;
26+
}
27+
/*BUTTON STYLES*/
28+
.layer_selector {
29+
background: rgba(255,255,255,0.9);
30+
border: 1px solid #999;
31+
border-radius: 5px;
32+
font-family: 'Unica One', sans-serif;
33+
font-size: 13px;
34+
padding: 0;
35+
text-align: center;
36+
width: 250px;
37+
}
38+
.layer_selector > p {
39+
border-bottom: 1px solid #999;
40+
padding: 5px 10px;
41+
text-transform: uppercase;
42+
}
43+
.layer_selector ul {
44+
padding: 0; margin: 0;
45+
list-style-type: none;
46+
}
47+
.layer_selector li {
48+
color: #444;
49+
cursor: pointer;
50+
padding: 10px 20px;
51+
}
52+
.layer_selector li:not(:last-child) {
53+
border-bottom: 1px solid #999;
54+
}
55+
.layer_selector li:hover {
56+
background-color: #98c4e2;
57+
cursor: pointer;
58+
}
59+
.layer_selector li.selected {
60+
background-color: #5CA2D1;
61+
}
62+
</style>
63+
64+
<!-- SQL TEMPLATE -->
65+
<script type='sql/text' id='sql'>
66+
SELECT
67+
*,
68+
CASE WHEN
69+
habitants > 0
70+
THEN
71+
ceil(ST_Area(the_geom::geography)/habitants)
72+
ELSE
73+
null
74+
END
75+
person_area
76+
FROM parcelas_islas_barcelona
77+
</script>
78+
79+
<!-- SIMPLE VIS CSS -->
80+
<style type='cartocss/text' id='simple'>
81+
/** simple visualization */
82+
#parcelas_islas_barcelona{
83+
polygon-fill: #5CA2D1;
84+
polygon-opacity: 0.7;
85+
line-color: #FFF;
86+
line-width: 0.25;
87+
line-opacity: 1;
88+
}
89+
</style>
90+
91+
<!-- CHOROPLETH CSS -->
92+
<style type='cartocss/text' id='choropleth'>
93+
/** choropleth visualization */
94+
95+
#parcelas_islas_barcelona{
96+
polygon-fill: #FFFFB2;
97+
polygon-opacity: 0.8;
98+
line-color: #FFF;
99+
line-width: 0;
100+
line-opacity: 1;
101+
}
102+
#parcelas_islas_barcelona [ person_area <= 145920] {
103+
polygon-fill: #BD0026;
104+
}
105+
#parcelas_islas_barcelona [ person_area <= 3192] {
106+
polygon-fill: #F03B20;
107+
}
108+
#parcelas_islas_barcelona [ person_area <= 1026] {
109+
polygon-fill: #FD8D3C;
110+
}
111+
#parcelas_islas_barcelona [ person_area <= 461] {
112+
polygon-fill: #FECC5C;
113+
}
114+
#parcelas_islas_barcelona [ person_area <= 191] {
115+
polygon-fill: #FFFFB2;
116+
}
117+
#parcelas_islas_barcelona [ person_area = null] {
118+
polygon-fill: #5CA2D1;
119+
}
120+
</style>
121+
</head>
122+
<body>
123+
<div id="map"></div>
124+
<!-- ADD BUTTONS -->
125+
<div id="cartocss" class="layer_selector">
126+
<p>Layers</p>
127+
<ul>
128+
<li data="choropleth">Habitant Choropleth</li>
129+
<li data="simple">Building Map (no habitants)</li>
130+
</ul>
131+
</div>
132+
<!-- include cartodb.js library -->
133+
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
134+
135+
<!-- place your code betwee the script tags below -->
136+
<script src="main.js"></script>
137+
</body>
138+
</html>

‎ckpt-5-buttons/main.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
window.onload = function() {
2+
var vizjson_url = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/f2735936-f268-11e4-8858-0e853d047bba/viz.json'; // <-- Paste viz.json URL between quotes
3+
4+
// ADD JQUERY TEMPLATE OPTIONS
5+
var options = {
6+
sql: $("#sql").text(), // here you can set sql to run on your tables
7+
cartocss: $("#simple").text() // here you can set css to style your choropleth
8+
}
9+
// CLEAR SQL OF SPACES/RETURNS
10+
options.sql = options.sql.replace(/(\r\n|\n|\r)/gm,'').trim();
11+
12+
var sublayers = [];
13+
14+
// instantiate map object from Leaflet
15+
var mapObj = new L.Map(map, {
16+
center: [41.3833, 2.1833], // Barcelona, Spain
17+
zoom: 13 // zoom projection to adjust starting point zoom
18+
});
19+
20+
// CREATE LAYER SELECTOR - AKA BUTTONS
21+
function createSelector(layer) {
22+
var cartocss = "";
23+
var $options = $(".layer_selector").find("li");
24+
$options.click(function(e) {
25+
var $li = $(e.target);
26+
var selected = $li.attr('data');
27+
28+
$options.removeClass('selected');
29+
$li.addClass('selected');
30+
31+
cartocss = $('#'+selected).text();
32+
33+
layer[0].setCartoCSS(cartocss);
34+
});
35+
}
36+
37+
// add basemap tiles
38+
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
39+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
40+
}).addTo(mapObj);
41+
42+
// add data tile layers here (if you have multiple layers, you can manipulate them in js here)
43+
cartodb.createLayer(mapObj,vizjson_url)
44+
.addTo(mapObj)
45+
.done(function(layer) {
46+
console.log("Map successfully created.");
47+
sublayers[0] = layer.getSubLayer(0);
48+
sublayers[1] = layer.getSubLayer(1);
49+
sublayers[2] = layer.getSubLayer(2);
50+
sublayers[0].set(options); // altering the SQL and CartoCSS; see above
51+
sublayers[1].hide(); // hiding the station line data
52+
sublayers[2].hide(); // hiding the station point data
53+
createSelector(sublayers);
54+
})
55+
.error(function(err) {
56+
console.log("Map not created: " + err);
57+
});
58+
}

0 commit comments

Comments
 (0)