Skip to content

Instantly share code, notes, and snippets.

@jatorre

jatorre/README.md

Created November 22, 2012 22:47
Show Gist options
  • Save jatorre/4133204 to your computer and use it in GitHub Desktop.
Save jatorre/4133204 to your computer and use it in GitHub Desktop.
Download ZIP
Example CartoDB 2.0 map
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real-Time Map (v. 0.1.0)</title>
<link href="http://dl.dropbox.com/u/580074/erepoublic/css/style.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
<script type="text/javascript" src="http://dl.dropbox.com/u/580074/erepoublic/js/allcompressed.js"></script>
<style type="text/css">
.leaflet-container {
background: #fff;
}
.leaflet-control {
position:absolute;
top:10px;
left:10px;
}
</style>
</head>
<body onload="init();">
<div id="map"></div>
<div class="leaflet-control-zoom leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in"></a><a class="leaflet-control-zoom-out" href="#" title="Zoom out"></a></div>
<script type="text/javascript">
CONFIG = {
lat: 30.849,
lng: -28.371,
zoom: 2,
maxZoom: 8,
minZoom: 1,
// CartoDB user and main table name
userName: 'jatorre-beta',
tableName: 'regions',
};
var
hoverData = null,
popup = null,
map = null,
layer = null;
function init() {
// Initialize the popup
popup = new L.CartoDBPopup();
// Get the counties geometries
//getHoverData();
// Set the map options
var mapOptions = {
center: new L.LatLng(CONFIG.lat, CONFIG.lng),
zoom: CONFIG.zoom,
maxZoom: CONFIG.maxZoom,
minZoom: CONFIG.minZoom,
zoomAnimation: true,
fadeAnimation: false,
zoomControl: false
};
map = new L.Map('map', mapOptions);
$('.leaflet-control-zoom a').on('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
var class_ = $(this).attr("class");
if (class_ == "leaflet-control-zoom-in") {
map.zoomIn()
} else {
map.zoomOut()
}
})
//Get the latest version of the data on the map and then add the layer
$.ajax({ url: "http://jatorre-beta.cartodb.com/api/v1/viz/758/viz.json",
jsonpCallback: "callback",
cache:true,
dataType: "jsonp", success: function(data) {
layer = new L.CartoDBLayer({
map: map,
tiler_domain: "{s}.tiles.cartocdn.com/jatorre-beta",
subdomains: "0123",
//user_name: "jatorre-beta", // <- if you don't use a CDN put your username here
table_name: CONFIG.tableName,
tile_style: CONFIG.style,
opacity: 1,
query: "SELECT * FROM "+CONFIG.tableName,
extra_params: {
cache_buster: data.updated_at,
cache_policy: 'persist'
},
interactivity: "cartodb_id, original_c",
featureOver: onFeatureHover,
featureOut: onFeatureOut,
featureClick: onFeatureClick,
debug: false
});
map.addLayer(layer, false);
}});
function onFeatureHover(e, latlng, pos, data) {
document.body.style.cursor = "pointer";
}
function onFeatureOut() {
document.body.style.cursor = "default";
}
function onFeatureClick(e, latlng, pos, data) {
if (typeof( window.event ) != "undefined" ) { // IE
e.cancelBubble=true;
} else { // Rest
e.preventDefault();
e.stopPropagation();
}
// Set popup content
popup.setContent(data);
// Set position
popup.setLatLng(latlng);
// Show the popup
map.openPopup(popup);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment