cartodb_test.md

100%

cartodb_test.md

✓ Published0🌍 Public

Last edited Aug 21, 2012

Created on Aug 21, 2012

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.

AI-generated description

Similar vizzes

Loading thumbnail…

cartodb_test.html

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.

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

69% match

Loading thumbnail…

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

Aandrewxhill

65% match

Loading thumbnail…

Clustering stylings for CartoDB

This CartoDB map visualizes clustered point data by varying marker width and opacity based on count attributes and zoom levels. It uses CartoCSS styling to define rules that scale marker size with cluster counts, while zoom-dependent conditions control which hierarchy levels appear. The code applies opacity and line styling only when the map reaches specific zoom thresholds, hiding higher-level clusters at closer views. The example demonstrates how CartoDB’s styling language can create interactive, zoom-aware cluster representations without JavaScript libraries.

Aandrewxhill

65% match

Loading thumbnail…

CartoDB Point Clustering

This example uses CartoDB to render U.S. state polygons with clustered point data. Clicking a state triggers an SQL query that applies ST_Dump and ST_SimplifyPreserveTopology to generate line segments radiating from the state centroid to its boundary points, producing a stylized "POW!" label effect. The visualization combines CartoDB’s tile layer API with custom CartoCSS styling, including pattern fills and text labels, to show how dynamic SQL can reshape geographic features interactively.

Aandrewxhill

64% 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…

On the fly size sort of polygons in CartoDB

A CartoDB map displays building polygons from OpenStreetMap, sorted and repositioned by size. The polygons are ordered by height and laid out in rows using a recursive SQL query that translates each geometry into a packed grid. The visualization uses CartoDB.js with Leaflet to render the map and tiles, while the query employs `ST_Area`, `ST_Translate`, and `ST_Transform` to compute offsets and project the geometries. Red polygons with white outlines appear over a Mapbox basemap.

Aandrewxhill

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

63% match