Skip to content

Instantly share code, notes, and snippets.

@andrewxhill
Last active December 20, 2015 06:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewxhill/6090363 to your computer and use it in GitHub Desktop.
Save andrewxhill/6090363 to your computer and use it in GitHub Desktop.
Instructions for Mapbox basemap in CartoDB

Create new map

create

Design and Save changes

save

Click 'publish'

publish

Get Map ID

mapid

The Map ID can most easily be found by clicking mapbox.js on the Publish link. In the above image, my map id is highlighted in the text box.

Create your basemap URL

CartoDB takes a XYZ Tile URL template, it looks generally like this,

http://{s}.someurl.com/{z}/{x}/{y}.png

the curly brackets remain in the URL, they let CartoDB (or more specifically Leaflet) know how to load the right parts of the map at a time. So the Mapbox URL template looks like this,

http://{s}.tiles.mapbox.com/v3/MAP_ID/{z}/{x}/{y}.png

the value you need to change for a new basemap is MAP_ID. My MAP_ID, given the above part of the tutorial is cartodb.map-208dddrd, so my final URL is,

http://{s}.tiles.mapbox.com/v3/cartodb.map-208dddrd/{z}/{x}/{y}.png

Add to CartoDB

This can be done from any map or visualization in CartoDB. Simply click the basemap selector

add

and then select the 'add yours'. In the window that pops up, drop the URL you created,

paste

click 'Add basemap' and you should be all set!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment