Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/README.md

Last active March 9, 2017 17:18
Show Gist options
  • Save jsanz/84660e1c4a07a8e33e312a013e75b67e to your computer and use it in GitHub Desktop.
Save jsanz/84660e1c4a07a8e33e312a013e75b67e to your computer and use it in GitHub Desktop.
Download ZIP
Debugging CARTO.js
Raw
README.md

Doesn't throw errors, nor does it enable the intended functionality. Question is not what's specifically wrong with this script, but how do we debug these requests that ping the CARTO server but don't seem to return errors.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>HIV in Africa</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,
#map {
height: 100%;
padding: 0;
margin: 0;
}
h1 {
padding: 15px 15px;
margin: 0;
color: whitesmoke;
font-size: 2em;
background: rgba(25, 25, 25, 0.8);
}
p {
font-size: 1em;
color: #001323;
}
footer {
position: absolute;
width: 340px;
bottom: 20px;
left: 20px;
background: rgba(256, 256, 256, .6);
padding: 0 15px;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<h1>HIV Infection Rates in Africa</h1>
<div id="map"></div>
<footer>
<p> This map shows the prevalence of HIV across Africa as the % of population infected aged 15-49 by country. Darker colour shades represent a higher infection rate of HIV. The country with the highest rate of HIV is Swaziland, with a value of 28.8%.
<p>Data was not available for Guinea-Bissau, Libya, Western Sahara or Republic of the Congo. Data sourced from UNAIDS estimates.</p>
<ul>
<li>Explore the raw <a class='link' href='https://unstats.un.org/home/'>data</a></li>
<li>Map authored by<a class='link' href='https://github.com/cassieporter'> Cassie Porter</a></li>
</ul>
</footer>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!--carto db is bundled with leaflet and j query (note that j query carto uses is old version)-->
<!-- include cartodb.js CSS library -->
<script type="cartocss/html" id="hiv_styles">
#layer { polygon-fill: ramp([hiv_2015_1], (#ffc6c4, #f4a3a8, #e38191, #cc607d, #ad466c, #8b3058, #672044), jenks); line-width: 1; line-color: #FFF; line-opacity: 0.5; }
</script>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
{{ }}
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</script>
<script>
// create leaflet map
var map = L.map('map', {
center: [0, 20],
zoom: 4,
scrollWheelZoom: false
});
var sourceObject = {
user_name: 'porterc',
type: 'cartodb',
sublayers: [
//do not need additional data attrbute unless you want them styled a particular wy like in uninsured below
{
// add a base layer
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c"]
},
{
sql: "SELECT * FROM porterc.hiv_clipped_africa",
cartocss: $("#hiv_styles").text(),
interactivity: "cartodb_id"
}
]
};
cartodb.createLayer(map, sourceObject, {
infowindows: true
}).addTo(map)
.on('done', function(layer) {
// define sublayer
cartodb.vis.Vis.addInfowindow(map, layer.getSubLayer(1), ['cartodb_id','name', 'hiv_2015_1'], {
infowindowTemplate: $('#infowindow_template').html(),
templateType: 'mustache'
})
}).on('error', function(error) {
throw error;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment