/
custom-popup.html
97 lines (88 loc) · 3.51 KB
/
custom-popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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>