Named Maps Tutorial | CartoDB

100%

Named Maps Tutorial | CartoDB

✓ Published0🌍 Public

Last edited Aug 15, 2017

Created on Aug 15, 2017

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

AI-generated description

Similar vizzes

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

73% 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

73% match

Loading thumbnail…

Gist 734eccf8853aef50f07b

This example shows a Leaflet map centered at the equator with zoom level 2, overlaid with a CartoDB layer. It uses Stamen’s toner tile layer as the base map, then creates a CartoDB layer via `cartodb.createLayer` and adds it to the map. The code includes callbacks for the layer’s `done` and `error` events, though no specific layer styling or data processing is shown.

Aandrewxhill

73% match

Loading thumbnail…

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.

Aandrewxhill

72% match

Loading thumbnail…

Leaflet example | CartoDB.js

This example combines Leaflet with CartoDB.js to display two CartoDB layers on a Stamen Toner base map, centered on global coordinates. A queue library loads both viz.json layer definitions, then adds them to the map, cycling through visibility states on any body click. The first click hides the first layer, the second hides the second and shows the first, and the third restores both layers. The code uses the Leaflet map API, CartoDB.js `createLayer`, and the D3 queue for asynchronous loading.

Aandrewxhill

71% match

Loading thumbnail…

Gist fc77170db4eeca1daeb7

This example demonstrates how to initialize a Leaflet map centered at coordinates [0,0] with a zoom level of 2, then add a CartoDB layer to it. The code uses the `L.Map` constructor and `cartodb.createLayer` to load a visualization from a CartoDB visualization JSON URL. Once the layer finishes loading, a callback function is available for further interaction, while an error handler displays an alert if the layer fails to load. The map serves as the base canvas for displaying the CartoDB-provided geographic data.

Aandrewxhill

71% match

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

70% match

Loading thumbnail…

Leaflet multilayer example | CartoDB.js

This example uses CartoDB.js to create a multilayer Leaflet map, combining multiple interactive layers into a single view. It overlays geographic data points from CartoDB tables on a dark basemap, with each layer rendering distinct visual encodings such as colored markers. A custom animated menu, built with CSS transitions, lets users toggle between layers or projections. The code relies on Leaflet’s map API and CartoDB.js’s `createLayer` method to manage the data layers, while the menu interactivity is handled purely through HTML and CSS.

Aandrewxhill

69% match