Skip to main content
100%

cartodb_test.html

✓ Published0🌍 Public
Aandrewxhill
Last edited Aug 21, 2012
Created on Aug 21, 2012

This example presents a visual regression test suite comparing map tile rendering between production and staging environments. It displays a table of 40 test cases with a summary header showing 1 failure, and each row pairs thumbnail images from the production and staging servers for identical SQL queries and CartoCSS styles. The test data includes synthetic geometries such as polygons and markers generated from PostGIS functions, with varied style parameters including marker fill, opacity, line widths, and color schemes. The side-by-side image comparison allows quick visual identification of rendering differences between environments.

AI-generated description

Similar vizzes

Loading thumbnail…

cartodb_test.md

A CartoDB test compares production and staging tile rendering of a map that combines a large buffered polygon and a marker, both generated from SQL geometry functions like `st_makepoint`, `st_transform`, and `st_envelope`. The side-by-side images show the same Carto styling, which sets marker and polygon colors, opacity, line dasharrays, and arrow marker type. The example uses the CartoCSS styling language to define visual properties and relies on the CartoDB tile service to render the output.

Aandrewxhill
87% match
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
65% match
Loading thumbnail…

TileJSON.io - test

This example demonstrates a tile-based map comparison interface that layers two different tile sources over a base map, with adjustable opacity to blend between them. The visualization uses a WebGL-enabled map library to render Esri World Imagery as the base layer and Azavea’s NLCD land cover tiles as an overlaid layer, controlled by a slider. The code initializes a TileJSON 2.2.0 configuration, sets a default center and zoom level, and enables sharing the setup via a gist. It does not show any custom data processing or interaction beyond the basic tile loading and opacity control.

Aandrewbt
64% match
Loading thumbnail…

Template tester

This interactive tool lets you test and preview different CartoDB map templates by entering a viz.json API URL. It embeds the selected template in an iframe, updating the displayed map in real time. The interface includes an input field for the API URL and a button that creates a shareable Gist of the current template for easy distribution. The example demonstrates how to dynamically load and switch between map templates using CartoDB's JavaScript library.

Aandrewxhill
63% match
Loading thumbnail…

TileJSON.io - test

This example displays an interactive web map with three overlaid tile layers, including an OpenStreetMap basemap, an Azavea NLCD layer, and a CARTO Voyager basemap. The visualization uses TileJSON 2.2.0 metadata to define tile sources and layer properties such as opacity and visibility, which are rendered in a browser-based map client. A JSON configuration file controls the map’s center point, zoom level, and shareable Gist settings, while the tile layers are fetched from remote servers via standard XYZ tile scheme URLs. The code relies on TileJSON and map rendering APIs to composite and display the geographic data.

Aandrewbt
61% match
Loading thumbnail…

Map - Table

A map and sortable table display geographic data from a CartoDB visualization, with the table listing attribute columns and rows from the map's underlying dataset. The interface uses the CartoDB.js library to render the map and SQL API to query data, while jQuery DataTables provides interactive sorting and pagination. Users can filter table entries by column values, which dynamically updates the map's SQL query to highlight matching features. The example demonstrates a linked map-table workflow for exploring spatial and tabular data together.

Aandrewxhill
61% match
Loading thumbnail…

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.

Aandrewxhill
60% match
Loading thumbnail…

CartoDB SQL tricks: Various things that as a SQL-newbie I had to search for >10 minutes to find answers for.

This example demonstrates a collection of SQL recipes for solving common spatial data problems in CartoDB, ranging from merging neighboring county polygons with ST_Union to creating great circle lines via ST_MakeLine and ST_Segmentize. It shows practical techniques like updating geometries with conditional CASE statements, extracting coordinates with ST_X and ST_Y, stripping HTML tags using regexp_replace, and formatting zip codes with to_char. The code also covers performance strategies for large updates and querying spatial relationships with st_contains. Each snippet targets PostGIS functions within the CartoDB platform, emphasizing data preparation and geometric transformations.

Aandrewbt
60% match