embedded CARTO map

100%

embedded CARTO map

✓ Published0🌍 Public

Last edited Sep 15, 2017

Created on Sep 10, 2017

This example embeds an interactive CARTO map inside an HTML page using a full-width iframe. The map, hosted by Stamen and sourced from a public CARTO builder URL, displays geographic data through CARTO’s built-in rendering. The page uses D3.js v4 only to set up the document structure, while the map itself relies on CARTO’s embedding API. The iframe is configured to fill the viewport with a fixed height of 520 pixels and supports fullscreen interactions. The visualization demonstrates how to combine a minimal D3 setup with an external mapping service, with no custom geographic projections or data processing in the code.

AI-generated description

Sorry, this is really ugly!

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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

87% match

Loading thumbnail…

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

86% match

Loading thumbnail…

d3.carto - Simple Map Example

This example demonstrates the use of the d3.carto library to create a simple, layer-based map. It displays geographic features rendered as SVG elements, with support for canvas rendering and animation. The map leverages d3.carto’s API to define map layers, handle panning and zooming controls, and provide interactive features such as clickable markers and modals. The accompanying CSS ensures that vector elements maintain stroke width regardless of zoom, and the interface includes zoom and pan buttons positioned over the map.

AAlan McConchie

75% match

Loading thumbnail…

Hello, AMPs

This example demonstrates how an interactive CartoDB map can be embedded within an Accelerated Mobile Pages (AMP) document. The page displays a 300x300 pixel iframe that loads a CartoDB visualization, positioned after a tall filler paragraph to satisfy AMP’s 600px/75% iframe placement rule. The code uses the AMP `amp-iframe` custom element with a sandbox attribute allowing scripts and popups, alongside standard AMP boilerplate and JSON-LD metadata. The map itself comes from a CartoDB embed URL, showing a geographic data visualization without custom JavaScript or rendering libraries.

Aandrewxhill

74% match

Loading thumbnail…

DataKind Workshop | Demo

This demo embeds a CartoDB map visualization centered on global coordinates, displaying geographic data points as an interactive web map. The iframe loads a published CartoDB visualization with pan and zoom controls enabled, while hiding search, layer selection, and legends for a clean presentation. The underlying map uses CartoDB’s tile-based rendering to show spatial patterns, with the page’s HTML and CSS ensuring the map fills the entire viewport. The code relies on the CartoDB embed API and standard iframe integration rather than custom JavaScript libraries.

Aandrewxhill

74% match

Loading thumbnail…

d3.carto.map - globe mode

The d3.carto.map globe mode example renders an interactive globe with multiple map layers, using D3 v3 and the d3.carto.map library. The visualization combines a stamen.trianglegrid tile layer with a recursively generated tile layer, overlaid with GeoJSON country polygons. Countries with names shorter than six characters are extracted and rendered as SVG features with a distinct styling, while the full country set is drawn to canvas. The globe supports pan and zoom via the control buttons, and a minimap rectangle indicates the current viewport. Layer toggles are provided in a control panel, allowing users to switch between tile layers and feature sets. The example demonstrates d3.carto.map's ability to blend multiple data sources and rendering modes (canvas and SVG) in a 3D globe context.This example demonstrates **d3.carto.map** in globe mode, showcasing a full-featured interactive map with multiple data layers and rendering modes. Built with D3 v3, it combines a rotatable globe with tile layers, GeoJSON features rendered to canvas, and selected countries drawn as SVG. Users can toggle layers, pan, and zoom, with styling for country borders, roads, rivers, and custom point markers. The map also includes a minimap with extent rectangle and modal info popups, illustrating the library's capacity for rich, multi-layer cartographic visualization.

AAlan McConchie

73% match

Loading thumbnail…

World map economy

This example presents a world map visualization focused on economic data, embedding an interactive map created with CartoDB’s builder interface. The page uses d3.v4 to load and structure the environment, but the core rendering is handled by an external iframe that pulls from a Carto map. The visualization displays geographic regions with economic indicators, allowing users to explore the data through Carto’s interactive mapping tools. The code relies on d3’s selection and utility functions for DOM setup, while the primary map rendering occurs outside d3’s native drawing capabilities.

CCartophile

72% 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

72% match