Skip to main content
100%

Instructions for Mapbox basemap in CartoDB

✓ Published0🌍 Public
Aandrewxhill
Last edited Jul 26, 2013
Created on Jul 26, 2013

This example demonstrates how to use a Mapbox-hosted basemap inside a CartoDB visualization by constructing a custom XYZ tile URL. It shows the step-by-step process of creating a Mapbox map, retrieving its Map ID from the publish options, and formatting the URL template `http://{s}.tiles.mapbox.com/v3/MAP_ID/{z}/{x}/{y}.png`. The guide then explains how to paste this URL into CartoDB’s basemap selector under “add yours,” using Leaflet’s tile-loading syntax. The workflow relies on CartoDB’s map interface and Mapbox’s tile API, with no custom code or data processing involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.

Aandrewxhill
71% match
Loading thumbnail…

Gist fc77170db4eeca1daeb7

This example demonstrates how to initialize a Leaflet map centered at coordinates [0,0] with a zoom level of 2, then add a CartoDB layer to it. The code uses the `L.Map` constructor and `cartodb.createLayer` to load a visualization from a CartoDB visualization JSON URL. Once the layer finishes loading, a callback function is available for further interaction, while an error handler displays an alert if the layer fails to load. The map serves as the base canvas for displaying the CartoDB-provided geographic data.

Aandrewxhill
71% match
Loading thumbnail…

Load a public CARTO Builder URL dynamically

This example loads a public CARTO Builder URL into a Mapbox GL map as a raster tile layer. It shows how a user can paste a CARTO embed URL, select specific layers from a dropdown, and dynamically add the corresponding map tiles to the Mapbox GL view. The code parses the URL to extract the username and named map template, constructs an XYZ tile request, and uses `map.addLayer` with a raster source to display the data. The interface includes an input field, layer selector, and a button to trigger the tile loading.

Aandrewbt
71% match
Loading thumbnail…

Easy example | CartoDB.js

This example loads a CartoDB-hosted map visualization into a full-screen `<div id="map">` using the CartoDB.js library. It calls `cartodb.createVis` with a specific `viz.json` URL, setting initial center coordinates at latitude 0, longitude 0, zoom level 2, and disabling the time slider. The map renders the visualization’s default layers and styling from the referenced CartoDB account. The page includes the CartoDB CSS and JavaScript files from `libs.cartocdn.com`, and any loading errors are logged to the console.

Aandrewbt
69% match
Loading thumbnail…

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

Aandrewxhill
69% match
Loading thumbnail…

CartoDB Workshop | CartoDB.js

This example uses CartoDB.js to display an interactive map inside a full-screen div. The code initializes a map with a single custom overlay button labeled “Do Something,” which sits in the top-right corner and changes its background on hover. The map itself is rendered using the CartoDB library’s tile layers, while the button is styled with the included cartodb-infobox CSS class. The JavaScript structure defines a main function tied to the window load event, though no map layers or data sources are explicitly loaded in the provided snippet.

Aandrewxhill
69% match
Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill
68% match
Loading thumbnail…

Gist 48245d988832c60328d729e4c95db8db

This example demonstrates how to request a Mapbox vector tile and initialize it for rendering. The code constructs a `Tile.Parameters` object, sets its `Fs` property to the Mapbox access instance, and converts latitude, longitude, and zoom coordinates into a canonical tile ID. It then creates a `VectorTile` and calls its `Initialize` method with those parameters, passing a callback for tile data. The snippet highlights the step where a specific map style, such as `"mapbox.mapbox-terrain-v2"`, would normally be assigned, but that assignment is omitted here. The rendering approach relies on Mapbox’s tile API and the `VectorTile` class to handle the map data.

Aandybak
68% match