Initial commit
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,103 @@
|
||||
<style>
|
||||
div.cartodb-popup a.cartodb-popup-close-button {
|
||||
top: 2px;
|
||||
left: 3px;
|
||||
width:22px;
|
||||
height: 15px;
|
||||
padding: 4px 0 3px 0;
|
||||
background: none;
|
||||
|
||||
text-align: right;
|
||||
font: bold 15px "Helvetica",Arial;
|
||||
color: #666666;
|
||||
text-decoration: none;
|
||||
line-height: 15px;
|
||||
text-indent: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
div.cartodb-popup a.cartodb-popup-close-button:hover {
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content-wrapper {
|
||||
width: 186px;
|
||||
padding: 25px 18px 5px 10px;
|
||||
margin: 0;
|
||||
background: #FFF;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content {
|
||||
width: 186px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content label {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding: 0 0 0 5px;
|
||||
font: normal 11px Arial;
|
||||
color: #B3B3B3;
|
||||
text-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content p {
|
||||
display: block;
|
||||
width: 170px;
|
||||
max-width: 170px;
|
||||
padding: 2px 4px!important;
|
||||
margin: 2px 0 7px!important;
|
||||
font: bold 11px 'Helvetica',Arial;
|
||||
color: #666666;
|
||||
border: none;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-content p.empty {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
color: #b7b7b7;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-tip-container {
|
||||
width: $width;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-tip-container label {
|
||||
float: left;
|
||||
margin: 5px 0 0 3px;
|
||||
font: normal 11px Arial;
|
||||
color: #B3B3B3;
|
||||
text-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
div.cartodb-popup div.cartodb-popup-tip-container label strong {
|
||||
font: bold 11px 'Helvetica',Arial;
|
||||
color: #666666;
|
||||
text-shadow: 0 1px white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="cartodb-popup">
|
||||
<div class="cartodb-popup-content-wrapper">
|
||||
<a class="cartodb-popup-close-button">x</a>
|
||||
<div class="cartodb-popup-content">
|
||||
<%= content %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cartodb-popup-tip-container">
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CartoDB map demo</title>
|
||||
|
||||
<style>
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#zoom_controls {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
z-index: 10;
|
||||
}
|
||||
#zoom_controls a {
|
||||
padding: 20px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
|
||||
</head>
|
||||
<script id="zoom_tmpl" type="tmpl">
|
||||
<div id="zoom_controls">
|
||||
<a class="zoom_in">+</a>
|
||||
<a class="zoom_out">-</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div id="zoom"></div>
|
||||
<div id="map"></div>
|
||||
</body>
|
||||
|
||||
<script src="../../src/cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../../src/', function() {
|
||||
$.get('infowindow.tmpl', function(data) {
|
||||
cdb.templates.add({
|
||||
name: 'geo/zoom',
|
||||
template: $('#zoom_tmpl').html()
|
||||
})
|
||||
cdb.templates.add({
|
||||
name: 'geo/infowindow',
|
||||
template: data
|
||||
})
|
||||
// create a map
|
||||
var map = new cdb.geo.Map();
|
||||
var mapView = new cdb.geo.LeafletMapView({
|
||||
el: $('#map'),
|
||||
map: map
|
||||
});
|
||||
|
||||
var zoom = new cdb.geo.ui.Zoom({
|
||||
model: map,
|
||||
el: $('#zoom')
|
||||
})
|
||||
zoom.render();
|
||||
|
||||
map.setCenter([34.95799531086792, -0.6591796875])
|
||||
map.setZoom(3);
|
||||
|
||||
map.bind('change:center', function(model, center) {
|
||||
//console.log(center[0], center[1]);
|
||||
});
|
||||
|
||||
var infowindowModel = new cdb.geo.ui.InfowindowModel({
|
||||
latlng: [72, -45],
|
||||
offset: [216/2, 10],
|
||||
content: "testing"
|
||||
});
|
||||
|
||||
var infowindow = new cdb.geo.ui.Infowindow({
|
||||
model: infowindowModel,
|
||||
mapView: mapView
|
||||
});
|
||||
infowindow.el.setAttribute('style', "position: absolute; width: 216px;padding:0;");
|
||||
|
||||
mapView.addInfowindow(infowindow);
|
||||
|
||||
|
||||
// Adds a TileLayer
|
||||
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
|
||||
var URL = 'http://a.tiles.mapbox.com/v3/mapbox.mapbox-streets/2/0/2.png';
|
||||
|
||||
//map.addLayer(new cdb.geo.TileLayer({urlTemplate: URL}));
|
||||
map.addLayer(new cdb.geo.PlainLayer({ color: '#8AC'}));
|
||||
|
||||
// Adds a CartoDBLayer
|
||||
var options = {
|
||||
user_name: 'staging20',
|
||||
table_name: 'tm_world_borders_s_11',
|
||||
extra_params: {
|
||||
cache_policy: 'persist'
|
||||
},
|
||||
subdomains: [null]
|
||||
};
|
||||
|
||||
|
||||
var layer = new cdb.geo.CartoDBLayer(options);
|
||||
map.addLayer(layer);
|
||||
var dataLayer = mapView.getLayerByCid(layer.cid);
|
||||
dataLayer.bind('featureClick', function(e, latlng) {
|
||||
infowindow.setLatLng(latlng).showInfowindow();
|
||||
});
|
||||
|
||||
window.map = map; // to play in console
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<html>
|
||||
<body>
|
||||
</body>
|
||||
<script src="../src/core/profiler.js"></script>
|
||||
<script>
|
||||
|
||||
setInterval(function() {
|
||||
Profiler.new_value('test', Math.random());
|
||||
}, 500);
|
||||
|
||||
setInterval(function() {
|
||||
Profiler.new_value('test2', Math.random());
|
||||
}, 1500);
|
||||
|
||||
Profiler.ui();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Script example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<script id="cartodb-1363814637181" src="http://patrick82.cartodb.com/tables/hotels_in_hamburg/embed_map.js?title=true&description=true&search=false&shareable=false&cartodb_logo=true&scrollwheel=true&sql=&sw_lat=53.532196740421945&sw_lon=9.931301302246084&ne_lat=53.56901374884948&ne_lon=10.075496858886709&height=650&;id=cartodb-1363814637181"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scroll map example | CartoDB.js</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
||||
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.example {
|
||||
display:block;
|
||||
padding:0 20px;
|
||||
}
|
||||
|
||||
div.example p {
|
||||
font:normal 0.9em "Helvetica", Arial;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
div.example h2 {
|
||||
font:bold 1.3em "Helvetica", Arial;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
#map {
|
||||
width:100%;
|
||||
height:400px;
|
||||
margin:50px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="example">
|
||||
<h2>TRYING A CARTODB MAP IN A PAGE WITH SCROLL</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum sem id arcu posuere semper. Fusce consectetur ipsum et augue laoreet aliquet. Donec imperdiet nisi vel tellus accumsan quis dapibus sem consectetur. Fusce ultrices tellus ut lacus molestie ultricies. Proin lacus metus, venenatis vitae sodales gravida, bibendum non magna. Morbi vitae euismod sem. Suspendisse sit amet sem in arcu vehicula ultrices ut ac arcu.</p>
|
||||
|
||||
<p>Sed vehicula, urna ut tempus bibendum, tellus nisl luctus dolor, et convallis nisi nisl a tellus. Fusce ante metus, elementum in consectetur vitae, ultricies et arcu. Fusce nec metus a nunc pharetra rhoncus. Curabitur et enim sit amet dolor iaculis pulvinar ac et lacus. Vivamus ullamcorper est ut tellus sagittis adipiscing. Nam eget nunc vel turpis consectetur gravida. Morbi varius felis ut mauris aliquam vel sollicitudin metus pulvinar.</p>
|
||||
|
||||
<p>Aenean lobortis lorem ac mauris condimentum tempor. Nam aliquet fringilla augue in ullamcorper. Maecenas auctor hendrerit nulla, ut laoreet purus pharetra sit amet. In auctor fermentum mi, et egestas ipsum varius a. Morbi commodo, eros eu mollis convallis, mauris lacus interdum tellus, non vehicula lectus eros eu quam. Duis hendrerit elementum ipsum, in consectetur augue mollis sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus commodo, nisl eget luctus convallis, dui tellus scelerisque quam, at hendrerit mauris felis id magna. Ut vel lacus nisl. Aenean lacinia laoreet posuere. Duis ultrices bibendum mi, tincidunt scelerisque eros pretium in. Nunc ornare porttitor porta. Duis luctus tristique diam id aliquam.</p>
|
||||
|
||||
<p>Sed nec lorem diam, eget tempus lorem. Praesent sit amet urna purus, non tincidunt urna. Duis accumsan, enim sit amet facilisis interdum, massa sem pretium nisi, a aliquam lectus massa ut orci. Vivamus vestibulum bibendum augue ut pretium. Nulla rhoncus fringilla neque id euismod. In hac habitasse platea dictumst. Morbi blandit luctus iaculis.</p>
|
||||
|
||||
<p>Vivamus ut magna dui, feugiat iaculis lorem. In nunc augue, aliquam tristique blandit non, tempus ac neque. In commodo sagittis ante, vel ullamcorper lorem ultrices ut. In nec sem nec nunc tempus fringilla nec pellentesque nibh. Mauris varius pulvinar nibh, quis placerat eros consectetur eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum nisl id elit sollicitudin imperdiet. Nulla eget est leo. Aenean at velit vel quam imperdiet molestie quis sit amet turpis. In hac habitasse platea dictumst.</p>
|
||||
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
|
||||
<!-- include cartodb.js library -->
|
||||
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
|
||||
<script>
|
||||
|
||||
function main() {
|
||||
|
||||
var map = L.map('map', {
|
||||
zoomControl: false,
|
||||
center: [43, 0],
|
||||
zoom: 3
|
||||
})
|
||||
|
||||
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
|
||||
attribution: 'Stamen'
|
||||
}).addTo(map);
|
||||
|
||||
cartodb.createLayer(map, 'http://examples.cartodb.com/api/v1/viz/european_countries_e/viz.json', {
|
||||
query: 'select * from {{table_name}} where area::float > 10000'
|
||||
})
|
||||
.on('done', function(layer) {
|
||||
map.addLayer(layer);
|
||||
|
||||
layer.on('featureOver', function(e, pos, latlng, data) {
|
||||
cartodb.log.log(e, pos, latlng, data);
|
||||
});
|
||||
|
||||
layer.on('error', function(err) {
|
||||
cartodb.log.log('error: ' + err);
|
||||
});
|
||||
|
||||
}).on('error', function() {
|
||||
cartodb.log.log("some error occurred");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// you could use $(window).load(main);
|
||||
window.onload = main;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cartodb demo template</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
<script src="../cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../', function() {
|
||||
console.log("CARTODB LOADED");
|
||||
// your code here
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CartoDB demo template</title>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #666;
|
||||
}
|
||||
.dialog {
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
background-color: #FFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h1 { margin: 0; }
|
||||
h2 { font-size: 20px; }
|
||||
|
||||
.bottom {
|
||||
margin: 10px 0 0 0;
|
||||
padding: 10px 0 0 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
button { float: left; }
|
||||
|
||||
.cancel {
|
||||
float:right;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script id="base_template" type="text/tmpl">
|
||||
<h1 class="title"><%= title %></h1>
|
||||
<h2 class="description"><%= description %></h2>
|
||||
<div class="content">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<button class="ok">
|
||||
<%= ok_title %>
|
||||
</button>
|
||||
<a href="#" class="cancel">close</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="../../../src/cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../../../src/', function() {
|
||||
|
||||
var MyDialog = cdb.ui.common.Dialog.extend({
|
||||
render_content: function() {
|
||||
return "Always begin typing in the upper search area. Press return to add a new note with that title. While you type, NV searches for notes whose body or title contain your words. Observe that naming a note and searching always occur simultaneously.";
|
||||
},
|
||||
})
|
||||
|
||||
var dialog = new MyDialog({
|
||||
title: 'test',
|
||||
description: 'long description here',
|
||||
template_base: $('#base_template').html(),
|
||||
width: 500
|
||||
});
|
||||
|
||||
$('body').append(dialog.render().el);
|
||||
|
||||
dialog.open();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cartodb demo template</title>
|
||||
</head>
|
||||
|
||||
<script id="template" type="text/tmpl">
|
||||
<p><%= msg %></p>
|
||||
<a class="close">close</a>
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<a id="o" href="#open">open</a>
|
||||
<div id="notification">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="../../../src/cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../../../src/', function() {
|
||||
var notification = new cdb.ui.common.Notification({
|
||||
el: $('#notification'),
|
||||
msg: 'this is a test notification, click on close to close!',
|
||||
template: $('#template').html()
|
||||
});
|
||||
$("#o").click(function() {
|
||||
notification.open();
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Settings</title>
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color: #D7D7D7;
|
||||
}
|
||||
.settings ul {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:auto;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:white;
|
||||
-webkit-border-radius:3px;
|
||||
border:none;
|
||||
box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
|
||||
list-style:none;
|
||||
overflow:visible;
|
||||
}
|
||||
.settings ul::before {
|
||||
content:' ';
|
||||
position:absolute;
|
||||
display:block!important;
|
||||
top:-5px;
|
||||
right:10px;
|
||||
width:0;
|
||||
height:0;
|
||||
border-bottom:8px solid white;
|
||||
border-left:8px solid transparent;
|
||||
border-right:8px solid transparent;
|
||||
z-index:10;
|
||||
}
|
||||
.settings li {
|
||||
padding:10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="settings_template" type="text/tmpl">
|
||||
<ul>
|
||||
<li><a href="#api-keys">Your API keys</a></li>
|
||||
<li><a href="#settings">Account settings</a></li>
|
||||
<li><a href="#close">Close session</a></li>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
<script src="../../../cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../../../', function() {
|
||||
|
||||
var Settings = cdb.ui.common.Settings.extend();
|
||||
|
||||
var settings = new Settings({
|
||||
template_base: $('#settings_template').html(),
|
||||
speed: 300
|
||||
});
|
||||
|
||||
$('body').append(settings.render().el);
|
||||
|
||||
setTimeout(function(){
|
||||
settings.open();
|
||||
},3000)
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>cartodb demo template</title>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFF;
|
||||
}
|
||||
td {
|
||||
border: 1px solid #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<body>
|
||||
<h1>table</h1>
|
||||
<p>use console to modify cols variable, i.e:</p>
|
||||
<pre>
|
||||
cols.add({'id': 10, 'col1': 1, 'col2': 2, 'col3': 3});
|
||||
cols.at(0).destroy()
|
||||
</pre>
|
||||
</body>
|
||||
|
||||
<script src="../../../src/cartodb.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
cdb.load('../../../src/', function() {
|
||||
cols = new cdb.ui.common.TableData();
|
||||
|
||||
tableMetadata = new cdb.ui.common.TableProperties({
|
||||
schema: [
|
||||
['id', 'number'],
|
||||
['col1','number'],
|
||||
['col2','number'],
|
||||
['col3','number']
|
||||
]
|
||||
});
|
||||
|
||||
cols.reset([
|
||||
{'id': 1, 'col1': 1, 'col2': 2, 'col3': 3},
|
||||
{'id': 2, 'col1': 4, 'col2': 5, 'col3': 6}
|
||||
]);
|
||||
|
||||
table = new cdb.ui.common.Table({
|
||||
dataModel: cols,
|
||||
model: tableMetadata
|
||||
});
|
||||
|
||||
$('body').append(table.render().el);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user