Here what the library can do for other people
dead simple code example
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom infowindow 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, #map { | |
height: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet multilayer 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, #map { | |
height: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet multilayer 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, #map { | |
height: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet multilayer 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, #map { | |
height: 100%; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet multilayer 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, #map { | |
height: 100%; |
<!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"/> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; |
function vec3(xx, yy, zz) { | |
this.x = xx || 0; | |
this.y = yy || 0; | |
this.z = zz || 0; | |
this.translate = function (d) { return new vec3(this.x+d[0], this.y+d[1],this.z+d[2]) } | |
this.scale = function(s) { return new vec3(s*this.x, s*this.y,s*this.z) } | |
this.rotz = function(ang) { | |
var c = Math.cos(ang) | |
var s = Math.sin(ang) | |
return new vec3(this.x*c - this.y*s,this.y*c + this.x*s, this.z) |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet multilayer 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, #map { | |
height: 100%; |
cartodb.createLayer(map, 'viz.json').done(function(layer) { | |
map.addLayer(layer); | |
var countries = layer.getSubLayer(0); | |
countries.setSQL('select * from countries'); | |
var places = layer.createSubLayer({ | |
sql: "select * from populated_places", | |
cartocss: "#layer { marker-fill: red; }" | |
}) |