Skip to content

Instantly share code, notes, and snippets.

@javisantana
javisantana / style.xml
Created August 18, 2014 15:32
tessera with cartodb style
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE Map[]>
<Map srs="+init=epsg:3857" maximum-extent="-20037508.34,-20037508.34,20037508.34,20037508.34">
<Parameters>
<Parameter name="interactivity_layer">layer1</Parameter>
<Parameter name="interactivity_fields">cartodb_id</Parameter>
</Parameters>
<!DOCTYPE html>
<html>
<head>
<title>Easy 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%;

using cartodb.js and mapbox.js

if you want to use all the features of cartodb (infowindows, legends, dynamic layers) with mapbox basemaps

http://bl.ocks.org/javisantana/7200781

if you want to use mapbox.js features and show a cartodb layer (without any cartodb feature)

@javisantana
javisantana / index.html
Last active October 1, 2017 14:41
mapbox.js + cartodb.core.js - useful when you want to show cartodb tiles on top of mapbox layers
<!DOCTYPE html>
<html>
<head>
<meta charaset=utf-8 />
<title>mapbox.js + cartodb.js</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<script src='https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.core.js'></script>
// same than CDB_XYZ_Extent but this does not include the points just
// on the tile border for upper bounds, i.e for resolution=1 and tile_size=256
// the values after normalizing to tile coordinates are in range [0, 255]
function CDB_XYZ_Extent_Without_Upper_Border(x, y, z, resolution) {
var initial_resolution = CDB_XYZ_Resolution(0);
var origin_shift = (initial_resolution * tile_size) / 2.0;
var pixres = initial_resolution / Math.pow(2,z);
var tile_geo_size = tile_size * pixres;
@javisantana
javisantana / index.html
Created April 22, 2014 07:36
torque - wait until all tiles are loaded to start playing
<!DOCTYPE html>
<html>
<head>
<title>Easy 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%;
@javisantana
javisantana / cartocss_roads.less
Created March 3, 2014 12:11
cartocss for cartodb dark basemap
/** simple visualization */
#ne_10m_roads::roads{
[zoom >= 6]{
[type = 'Major Highway']{
line-width: .8;
line-color: #E1E1E1;
}
}
[zoom >= 7]{
@javisantana
javisantana / index.html
Created February 24, 2014 14:45
torque without looping
<!DOCTYPE html>
<html>
<head>
<title>Easy 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%;
@javisantana
javisantana / index.html
Created February 18, 2014 07:38
torque with a custom formatter
<!DOCTYPE html>
<html>
<head>
<title>Easy 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%;
drag this link to bookmarks bar
<a href='javascript:(function(){var w=window,loc=w.location;try{w.open(loc.origin+"/api/v2/viz/"+loc.pathname.match(/\/viz\/([0-9a-f\-]+)/)[1]+"/viz.json");}catch(e){alert("not an embed")}}())'>VIZ.JSON</a>