Make amazing maps with CartoDB

Make amazing maps with CartoDB

This example uses CartoDB to create interactive maps from a user-supplied VizJSON URL, with a timezone selector to adjust temporal data. It demonstrates a sunrise map built with CartoDB’s Torque engine, overlaying a Leaflet map with the Leaflet.Terminator plugin to show day-night boundaries. The interface lets users paste a VizJSON link, choose a GMT offset, and submit to render the map dynamically. CartoDB.js v3 handles map creation, while the terminator layer visualizes solar terminator positions based on the selected timezone.

86% match

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.

74% match

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

74% match

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.

Torque runtime example | CartoDB.js

This example displays a Torque animated map of Twitter data from the table `twitter_wowfakta`, showing cumulative point aggregation over time. It uses CartoDB.js with the Leaflet map API, initializing a map centered on Java with a Stamen toner basemap. The Torque layer is created via `cartodb.createLayer` with a custom CartoCSS template that sets cumulative aggregation, a marker width of 4 pixels, and a red fill color. The animation runs through the Torque runtime, which processes the data client-side to render temporal patterns.

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.

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`.

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.