Template tester

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

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

69% match

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.

Make amazing maps with CartoDB

A CartoDB example demonstrates how to reformat the timestamp labels on a Torque timeslider for animated maps. Users paste a VIZJSON URL and select between two date formats—one displaying the weekday and time, the other showing a full date—which customizes the slider’s display. The code uses the CartoDB JavaScript API (cartodb.js) to create the visualization and the slider’s formatter function to modify the output. The embedded map is rendered with CartoDB’s tile and overlay layers.

Advanced Infowindows | Demo

This demo shows how to create fully customized map infowindows with CartoDB, embedding images, videos, and dynamic row-based content through the platform’s advanced editor. It uses CartoDB’s built-in Mustache templating, where column names like `{{image_url}}` are replaced with real data values at click time. The example also demonstrates required HTML structure classes such as `cartodb-popup` and `cartodb-popup-content-wrapper`, and embeds a live interactive map via an iframe pointing to a CartoDB visualization.

Gist 24e4e0ec42cdeff6633c

This example presents a promotional slideshow for CartoDB, a cloud-based mapping and data visualization platform. The presentation uses D3.js to animate text bullet points and an interactive map visualization, showcasing features like drag-and-drop data importing, real-time dashboards, and GIS analysis through PostGIS. The map rendering employs d3.geoPath to draw geographic boundaries, while the slideshow transitions through sections covering web development integration, team collaboration, and high-performance data processing on scalable infrastructure.

ugly test carto map

This example displays an embedded interactive map from Carto, framed inside a full-width iframe on an otherwise blank page. The visualization itself is a cartographic rendering of geographic data, though the map’s specific layers and styling are not defined in the provided code. The page uses D3 v4 only to load and structure the document, while the actual map is delivered by Carto’s embed service, which handles the tile rendering and user interaction. No custom data or D3 drawing functions are used.

AAlan McConchie

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.