Load a public CARTO Builder URL dynamically

Gist 2869abf438288423d49f56f8047b3ca9

This example builds a custom interactive map by layering a scanned historical campus map from MapWarper between two CARTO Voyager basemap tilesets: one without labels and one with labels only. The code constructs a JSON mapconfig specifying three HTTP tile layers and uses the requests library to post it to Carto’s map API. The result visually sandwiches the old map beneath modern road and label layers, preserving geographic context while overlaying contemporary annotations.

Aandrewbt

73% match

Add layer | CARTO

This example shows how to add a single CARTO layer to an interactive map. It displays populated places as points on a global basemap, centered at [0,0] with zoom level 1. The visualization uses Mapbox GL JS for map rendering and the CARTO VL library (v1.4.1) to define a data source from the `populated_places` dataset and add it as a layer to the map. The basemap uses CARTO’s `voyager` style, and the layer is added before the `watername_ocean` layer. A loading spinner hides once the layer finishes loading.

Aandrewbt

72% match

Instructions for Mapbox basemap in CartoDB

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.

71% match

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.

69% match

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

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.

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile

Layer selector example | CartoDB.js

This example shows an interactive map of urban areas with a click-to-zoom-and-download feature. It displays polygon features from the Natural Earth dataset, and clicking a polygon either zooms to its centroid if the map is zoomed out, or triggers a download of shapefile data from an OpenStreetMap database query. The visualization uses CartoDB.js to create the map and manage layers, with a custom SQL query selecting geometry, area, and centroid coordinates. The code also enables feature interactivity and handles click events to update the map view or initiate a file download.