turbo-cartocss examples

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.

70% match

Color ramp for a topology

A color ramp encodes a topology of traffic density in the Troparevo-Nikulino district, with each road segment colored by a normalized `cars` value. The CartoCSS styles define nested thresholds from red (high traffic) to blue (low traffic), using CSS attribute selectors like `[cars<0.5]` to adjust line color and opacity. A second, glow layer overlays thicker, semi-transparent lines to emphasize the density gradient. The rendering relies on Mapnik’s CartoCSS syntax, processing the point and line layers from the GeoJSON data source.

67% match

Gist 7c1efd9bdead734010b0

This tutorial demonstrates how to build interactive maps and animated visualizations of a cat’s GPS tracking data using CartoDB’s web interface, SQL, and CartoCSS. It shows point, categorical, and temporal bubble maps, including a Torque animation of Spencer the Cat’s movements over time. The code uses CartoDB’s SQL API with functions like `ST_MakeLine` and `date_part`, along with CartoCSS styling for markers. It also covers importing polygon building datasets from MassGIS and querying them with spatial operations like `ST_Distance` and `CDB_LatLng`.

CartoCSS for Animated Bubble Map

CartoCSS drives an animated bubble map of crime incidents, showing how event density changes over time. The visualization uses Torque’s time-based rendering with 72 frames over a 30-second duration, aggregating counts from the `fromdate` attribute. Bubble sizes scale progressively when aggregated values exceed thresholds (2, 8, 16), with an XOR composite operation blending overlapping markers. The map relies on CartoDB’s Torque API and CartoCSS styling, referencing `cartodb_id` for counting, while marker properties like fill color, line width, and ellipse shape are defined in the stylesheet.

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB.js, Google Maps, and a custom SQL template. It visualizes tornado data, grouping nearby points into hexagonal clusters of varying sizes based on a user-adjustable "cluster size" slider. The clustering algorithm runs through a SQL query that creates three levels of hexagon grids (large, medium, small) to aggregate points, with each cluster's size and opacity reflecting the number of points it contains. Clicking a cluster reveals details about the original points it represents. The side panel includes a range input to dynamically adjust the cluster radius, which updates the visualization via CartoDB's SQL and CartoCSS templating.

Gist d7a736227751a4a49072

This example demonstrates Torque, a CartoCSS compiler that renders animated point data directly on HTML canvas in the browser, bypassing server-side Mapnik processing for responsive visualizations. The code shows how CartoCSS rules are translated into canvas drawing instructions, with markers rendered efficiently using Sprites generated at runtime. It includes static torque maps, animated bubble maps that change size over time, and a non-map visualization, all leveraging the Torque library’s shader and cartocss_reference.js APIs. The approach keeps data client-side, enabling fast, interactive rendering of temporal geospatial data.

Easy example | CartoDB.js

This example demonstrates the flexibility of CartoDB.js for interactive map visualization of a global submarine cable network. Using a Leaflet basemap, the map is created via `cartodb.createVis` with a Viz.json URL, and the code shows how to access the native map object and work with sublayers. It includes a variety of styling techniques in CartoCSS, from simple line styling to variable-based and zoom-dependent styling, as well as composite operations. Interactive features include an infobox that displays cable attributes, and buttons that let users filter data with SQL and swap styles on the fly by changing the CartoCSS.

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.