Hello, AMPs

100%

✓ Published0🌍 Public

Last edited Mar 18, 2016

Created on Mar 18, 2016

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.

AI-generated description

Example of a CartoDB iframe in the Amp library

Similar vizzes

Loading thumbnail…

embedded CARTO map

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.

AAlan McConchie

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

73% match

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

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

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

70% match

Loading thumbnail…

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.

Aandrewxhill

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

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

68% match