Typeahead + CartoDB

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

CartoDB Backbone for data-driven webpages

This example demonstrates how to integrate CartoDB’s geographic data services with the Backbone.js framework to build data-driven webpages. The code defines a custom Backbone model that queries the `nyc_parks` table via SQL, fetching the ten largest parks by area and then binding a `reset` event to display their names in an alert. It uses CartoDB’s `CartoDBCollection` and the `fetch()` method to load remote data asynchronously, while Backbone’s event system triggers the callback. The example shows a minimal pattern for combining SQL queries with a client-side MVC structure.

69% match

Animals | CartoDB.js

This example visualizes animal sightings on an interactive map using CartoDB.js. It displays all animals by default and dynamically adds a layer selector list that groups animals by type, with counts derived from SQL queries against the `all_animals` table. Clicking a type filters the map by updating the SQL for sublayers and the data layer, drawing connected lines via `ST_MakeLine` on the selected subset. The code uses CartoDB’s `createVis` and `SQL` APIs to load the map and query data from the `seatheanimals` user account.

69% match

CartoDB + D3 Bubble Map

A bubble map renders world borders and populated places on a blue SVG canvas, with city markers animating from random positions to their geographic coordinates. The visualization combines CartoDB’s SQL API (fetching GeoJSON from `d3_world_borders` and `d3_populated_places`) with D3’s `d3.geo.mercator` projection and `d3.geo.path` for borders. City circles scale by population, and clicking a marker displays its name via SVG text. A `d3.behavior.zoom` handler enables panning and zooming through SVG transforms.

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.

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.

Map - Table

The example pairs a CartoDB map with a paginated, sortable HTML table of aquifer data. The map renders a GeoJSON layer from a remote viz.json, while the table lists non-geometric fields from the `aquifrp025` table. CartoDB’s SQL API fetches row counts and column metadata, then queries data in pages of ten rows. jQuery DataTables provides sorting, and custom next/back buttons update the table’s offset, re-querying the API on each click.