70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CartoDB map demo</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html, body, #map {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
|
||
|
|
<link rel="stylesheet" href="../themes/light.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script src="../src/cartodb.js"></script>
|
||
|
|
<script>
|
||
|
|
window.onload = function() {
|
||
|
|
cdb.load('../src/', function() {
|
||
|
|
|
||
|
|
var vis = new Vis({el: $('#map')});
|
||
|
|
vis.load({
|
||
|
|
|
||
|
|
title: "visualization title",
|
||
|
|
description: "this is my description",
|
||
|
|
center: [0, 0],
|
||
|
|
zoom: 4,
|
||
|
|
|
||
|
|
overlays: [
|
||
|
|
{
|
||
|
|
type: 'header'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'zoom',
|
||
|
|
template: '<a class="zoom_in">+</a> <a class="zoom_out">-</a>'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
layers: [
|
||
|
|
{
|
||
|
|
type: 'tilejson',
|
||
|
|
version: '1.0.0',
|
||
|
|
tiles: [
|
||
|
|
'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'cartodb',
|
||
|
|
user_name: 'examples',
|
||
|
|
table_name: 'earthquakes',
|
||
|
|
query: 'SELECT * FROM {{table_name}}',
|
||
|
|
tile_style: "#{{table_name}}{marker-fill:red}",
|
||
|
|
infowindow: {
|
||
|
|
fields: [{ name: 'magnitude', title: true }, {name: 'catalog', title: true}],
|
||
|
|
template: '<div class="cartodb-popup"> <div class="cartodb-popup-content-wrapper"> <div class="cartodb-popup-content"> {{#content.fields}} {{#title}}<h4>{{title}}</h4>{{/title}} <p>{{value}}</p> {{/content.fields}} </div> </div> <div class="cartodb-popup-tip-container"> </div> </div>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
window.map = map; // to play in console
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</html>
|