Skip to main content
100%

Map - Table

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

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
75% 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
71% 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
70% 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
69% match
Loading thumbnail…

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
68% match
Loading thumbnail…

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.

Aandrewxhill
67% match
Loading thumbnail…

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.

Aandrewxhill
67% match