48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||
|
|
<style type="text/css">
|
||
|
|
html { height: 100% }
|
||
|
|
body { height: 100%; margin: 0px; padding: 0px }
|
||
|
|
#map_canvas { height: 100% }
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://maps.google.com/maps/api/js?sensor=false&v=3.30">
|
||
|
|
</script>
|
||
|
|
<script src="../../src/cartodb.js"></script>
|
||
|
|
</head>
|
||
|
|
<body >
|
||
|
|
<div id="map_canvas" style="width:100%; height:100%"></div>
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
cdb.load('../../src/', function() {
|
||
|
|
var map = new cdb.geo.Map();
|
||
|
|
var mapView = new cdb.geo.GoogleMapsMapView({
|
||
|
|
el: $('#map_canvas'),
|
||
|
|
map: map
|
||
|
|
});
|
||
|
|
map.setCenter([34.95799531086792, -0.6591796875])
|
||
|
|
map.setZoom(4);
|
||
|
|
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
|
||
|
|
|
||
|
|
//map.addLayer(new cdb.geo.TileLayer({urlTemplate: URL}));
|
||
|
|
map.addLayer(new cdb.geo.GMapsBaseLayer({ base_type: 'terrain' }));
|
||
|
|
var options = {
|
||
|
|
user_name: 'examples',
|
||
|
|
table_name: 'earthquakes',
|
||
|
|
query: 'SELECT * FROM {{table_name}}',
|
||
|
|
tile_style: "#{{table_name}}{marker-fill:red}",
|
||
|
|
interactivity: "cartodb_id, magnitude"
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var layer = new cdb.geo.CartoDBLayer(options);
|
||
|
|
map.addLayer(layer);
|
||
|
|
window.map = map;
|
||
|
|
window.mapv = mapView;
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|