Skip to main content
100%

Map - Table

✓ Published0🌍 Public
Aandrewxhill
Last edited Mar 20, 2015
Created on Mar 20, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewxhill
88% 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
79% match
Loading thumbnail…

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.

Aandrewxhill
74% match
Loading thumbnail…

Application | CartoDB

This example shows how to add download buttons to a CartoDB map, allowing users to export the underlying dataset in CSV, GeoJSON, or Shapefile formats. The map itself displays earthquake data (all_week) and is rendered using the CartoDB.js library via cartodb.createVis(). Below the map, three styled buttons link to the CartoDB SQL API, querying the same dataset with different format parameters so visitors can easily download the raw data. The page demonstrates a clean pattern for combining an embedded interactive map with simple data export functionality.

Aandrewxhill
72% match
Loading thumbnail…

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.

Aandrewxhill
71% match
Loading thumbnail…

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.

Aandrewxhill
71% match
Loading thumbnail…

DataKind Workshop | Demo

This demo embeds a CartoDB map visualization centered on global coordinates, displaying geographic data points as an interactive web map. The iframe loads a published CartoDB visualization with pan and zoom controls enabled, while hiding search, layer selection, and legends for a clean presentation. The underlying map uses CartoDB’s tile-based rendering to show spatial patterns, with the page’s HTML and CSS ensuring the map fills the entire viewport. The code relies on the CartoDB embed API and standard iframe integration rather than custom JavaScript libraries.

Aandrewxhill
71% match
Loading thumbnail…

Named Maps Tutorial | CartoDB

This example demonstrates how to create a map with CartoDB's named map API, combining a raster point layer and a torque layer over a Stamen toner basemap. The code loads two named map configurations, one for interactive points with hover and click infowindows displaying city name and population, and another for a torque visualization that is stopped after loading. It uses the Leaflet map library via `L.map`, CartoDB.js's `cartodb.createLayer` with `type: 'namedmap'` and `'torque'`, and the `cdb.vis.Vis.addInfowindow` method for popups. The data source is a table named `named_map_tutorial_table`.

Aandrewbt
70% match