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)
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> |
<!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%; |
/** simple visualization */ | |
#ne_10m_roads::roads{ | |
[zoom >= 6]{ | |
[type = 'Major Highway']{ | |
line-width: .8; | |
line-color: #E1E1E1; | |
} | |
} | |
[zoom >= 7]{ |
<!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%; |
// 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; |
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)
<!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%; |
<?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>Gmaps 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%; |
/** | |
* track changes and sync on every model | |
*/ | |
function instrumentBackbone() { | |
var events = []; | |
var eventMap = {} | |
instrumentBackbone.events = events; | |
EVENT_SET = "SET"; | |
EVENT_SYNC = "SYNC"; |