Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: d362dc27d9
Fetching contributors…

Cannot retrieve contributors at this time

97 lines (88 sloc) 3.592 kb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>CartoDB + Leaflet | Custom infowindow</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0;} #map {position:relative; margin:0; width:100%; height:100%;}</style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if IE]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../js/leaflet-0.4.0.js"></script>
<script type="text/javascript" src="../js/wax.leaf.min-7.0.0dev1-touched.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>
<script type="text/javascript">
function initialize() {
var map = new L.Map('map').setView(new L.LatLng(30.718379593199494, -24.99772644042969), 4)
, mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
, mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: "Powered by Leaflet and Mapbox"});
map.addLayer(mapbox,true);
// Create a CartoDB popup
var popup = new L.CartoDBPopup();
// First cartodb layer, countries
var cartodb_leaflet1 = new L.CartoDBLayer({
map: map,
user_name:'examples',
table_name: 'country_colors',
query: "SELECT * FROM {{table_name}}",
opacity:0.5,
interactivity: "cartodb_id",
featureOver: function(ev,latlng,pos,data) {
document.body.style.cursor = "pointer";
},
featureOut: function() {
document.body.style.cursor = "default";
},
featureClick: function() {},
auto_bound: false,
debug: true
});
// Adding layer to map
map.addLayer(cartodb_leaflet1);
// Now the CartoDB layer, the earthquakes
var earthquakes = new L.CartoDBLayer({
map: map,
user_name:"examples",
table_name: 'earthquakes',
query: "SELECT cartodb_id,the_geom_webmercator,the_geom,magnitude FROM {{table_name}}",
tile_style: "#{{table_name}}{marker-fill:#E25B5B}",
opacity:0.2,
interactivity: "cartodb_id, magnitude",
featureOver: function(ev,latlng,pos,data) {
document.body.style.cursor = "pointer";
},
featureOut: function() {
document.body.style.cursor = "default";
},
featureClick: function(ev,latlng,pos,data) {
if (typeof( window.event ) != "undefined" ) {
// IE
ev.cancelBubble=true;
} else {
// Rest
ev.preventDefault();
ev.stopPropagation();
}
// Set popup content
popup.setContent(data);
// Set latlng
popup.setLatLng(latlng);
// Show it!
map.openPopup(popup);
},
auto_bound: false,
debug: true
});
// Adding layer to map
map.addLayer(earthquakes);
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.