Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/app.css

Last active August 28, 2017 07:43
Show Gist options
  • Save ramiroaznar/9cabbfa21c9ab3a8dc6fc6e528ff8da7 to your computer and use it in GitHub Desktop.
Save ramiroaznar/9cabbfa21c9ab3a8dc6fc6e528ff8da7 to your computer and use it in GitHub Desktop.
Download ZIP
Map clicker with CARTO.js
Raw
app.css
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#infobox{
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 20px;
box-sizing: border-box;
background: #fff;
box-shadow: -2px 1px 1px rgba(0,0,0,.2);
width: 350px;
z-index: 100;
}
.infobox-header{
text-align: center;
}
Raw
app.js
function main() {
function Continent(name, id, clickCount) {
this.name = name;
this.id = id;
this.clickCount = clickCount;
};
var map, style, query, continentsArray = [];
map = L.map('map', {
zoomControl: false,
center: [43, 40],
zoom: 3
});
map.doubleClickZoom.disable();
style = $("#style").text();
query = $("#query").text();
list = $("#continents-list");
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {attribution: 'CARTO'})
.addTo(map);
cartodb.createLayer(map, {
user_name: 'ramirocartodb',
type: 'cartodb',
sublayers: [{
sql: query,
cartocss: style
}]
},{
https: true
})
.addTo(map)
.on('done', function(layer) {
/* Set interactivity & pointer when hovering */
var sublayer = layer.getSubLayer(0);
sublayer.setInteractivity("cartodb_id");
sublayer.setInteraction(true);
sublayer.on('featureOver', function() {
$('#map').css('cursor', 'pointer');
});
sublayer.on('featureOut', function() {
$('#map').css('cursor', 'auto');
});
/* --- */
var sql = cartodb.SQL({ user: 'ramirocartodb' });
sql.execute(query).done(function(data){
/* Populate list of continents */
var continents = data.rows;
_.each(continents, function(continent, index, continents) {
continentsArray.push(new Continent(continent["name"],continent["cartodb_id"], 0));
});
_.each(continentsArray, function(continent, index, continents) {
list.append('<li>' + continent["name"] + ' - <span id="' + continent["id"] + '">' + continent["clickCount"] + '</span></li>');
});
/* --- */
/* Click counter */
sublayer.on('featureClick', function(e, latlng, pos, data) {
var id = data.cartodb_id,
continentId = continentsArray.findIndex((continentsArray => continentsArray.id == id)),
clicks = continentsArray[continentId].clickCount += 1;
return $('#' + id).text(clicks);
});
/* --- */
});
}).on('error', function() {
console.log("Some error occurred.");
});
}
window.onload = main;
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Map Clicker with CARTO.js and knockout</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="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="app.css">
</head>
<body>
<script type="text/cartocss" id="style">
#layer {
polygon-opacity: 0.5;
polygon-fill: ramp([name], (#7F3C8D,#11A579,#3969AC,#F2B701,#E73F74,#80BA5A), category(6));
line-width: 2;
line-color: ramp([name], (#7F3C8D,#11A579,#3969AC,#F2B701,#E73F74, #80BA5A), category(6));
line-opacity: 0.4;
line-offset: -1;
}
</script>
<script type="text/sql" id="query">
SELECT
*
FROM
continents
</script>
<!-- map div -->
<div id="map"></div>
<!-- infobox div -->
<div id ="infobox">
<div class="infobox-header">
<h2>Map Clicker</h2>
</div>
<div class="infobox-content">
<ul id="continents-list">
</ul>
</div>
</div>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment