Skip to content

Instantly share code, notes, and snippets.

@andy-esch
Last active August 29, 2015 14:13
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save andy-esch/d1a45b8ff5e7bd90cd68 to your computer and use it in GitHub Desktop.
Named map with interactivity and config file used to create it
{
"version": "0.0.1",
"name": "namedmap_ex_test_interactive",
"auth": {
"method": "open"
},
"layergroup": {
"layers": [{
"type": "mapnik",
"options": {
"cartocss_version": "2.1.1",
"cartocss": "#namedmap_ex{ marker-fill-opacity: 0.5; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FFCC00; marker-allow-overlap: true; marker-comp-op: multiply; }",
"sql": "select * from namedmap_ex",
"interactivity": ["cartodb_id", "mag"]
}
}]
}
}
<!DOCTYPE html>
<html>
<head>
<title>Named Map with Interactivity | 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, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
scrollWheelZoom: false,
center: [43, 0],
zoomControl: true,
zoom: 3
})
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'andye',
type: 'namedmap',
named_map: {
name: "namedmap_ex_test_interactive",
layers: [{
layer_name: "t",
interactivity: "cartodb_id, mag"
}]
}
})
.addTo(map)
.done(function(layer) {
layer.getSubLayer(0).setInteraction(true)
layer.getSubLayer(0).on('featureOver', function(e, pos, pixel, data) {
console.log("Event #" + data.cartodb_id + ", magnitude " + data.mag);
// alert("Event #" + data.cartodb_id + ", magnitude " + data.mag);
});
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id','mag'])
});
}
// 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