Animals | CartoDB.js

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

75% 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.

74% match

Layer selector example | CartoDB.js

This example shows an interactive map with a layer selector that lets users toggle between two data categories, Sunday and Monday, or view all data at once. The map is built with CartoDB.js, using the `cartodb.createVis` API to load a visualization from a hosted CartoDB account. A custom HTML list serves as the selector, and clicking an item triggers JavaScript that calls `layers.getSubLayer().show()` or `.hide()` on the appropriate sublayers. The code also uses the `cartodb.SQL` API, though only for setup, and relies on jQuery for DOM event handling.

74% match

Layer selector example | CartoDB.js

An interactive map demonstrates layer selection through a custom side panel. Using CartoDB.js and Leaflet, the example loads a multi-layer visualization from a CartoDB viz.json URL, displaying countries, cables, and populated places as separate sublayers. A styled HTML list acts as the layer selector, where clicking different options triggers the `show()` and `hide()` methods on specific sublayer indices to toggle their visibility. The map initializes on a dark background with zoom controls, and a SQL query object from `cartodb.SQL` is created for potential data interactions.

Layer selector example | CartoDB.js

This example shows an interactive map of urban areas with a click-to-zoom-and-download feature. It displays polygon features from the Natural Earth dataset, and clicking a polygon either zooms to its centroid if the map is zoomed out, or triggers a download of shapefile data from an OpenStreetMap database query. The visualization uses CartoDB.js to create the map and manage layers, with a custom SQL query selecting geometry, area, and centroid coordinates. The code also enables feature interactivity and handles click events to update the map view or initiate a file download.

Gist 5830532

This example displays a map with a set of geographic features loaded from a CartoDB SQL query, which returns data in GeoJSON format. The visualization uses the Leaflet mapping library to render the map and a `L.geoJson` layer to draw the features. Each feature is processed with an `onEachFeature` callback that assigns a `cartodb_id` property to the corresponding Leaflet layer and adds it to a `drawnItems` layer group, which is then added to the map. The data source is the `leaflet_data` table from the osm2 CartoDB account.

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.

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.