Skip to main content
100%

Layer selector example | CartoDB.js

✓ Published0🌍 Public
Aandrewxhill
Last edited Apr 11, 2014
Created on Apr 11, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewxhill
93% match
Loading thumbnail…

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.

Aandrewxhill
87% 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
83% match
Loading thumbnail…

Leaflet multilayer example | CartoDB.js

A gallery of small, synchronized Leaflet maps displays each country from the Natural Earth dataset in its own bounding box, with the target country highlighted in red. Using CartoDB.js, the code executes a SQL query to fetch country extents, then creates a separate map per row and applies CartoCSS styling to emphasize the selected polygon. Hover interactions fetch simplified GeoJSON geometries via `cartodb.SQL` and dynamically add or remove highlight layers using Leaflet’s `L.GeoJSON.geometryToLayer` and `featureOver`/`featureOut` events.

Aandrewxhill
82% match
Loading thumbnail…

Lesson 2 | CARTO.js | CartoDB

This example demonstrates interactive layer controls for a map built with CARTO.js. It displays two CartoDB sublayers—African countries and global lakes—over an OpenStreetMap basemap using the Leaflet map object. Two dashboard buttons toggle the visibility of each sublayer by calling the `hide()` and `show()` methods on the corresponding sublayer. The map is centered on southern France at zoom level 3, and the sublayers are defined with custom SQL queries and CartoCSS styling.

Aandrewbt
82% match
Loading thumbnail…

Easy example | CartoDB.js

This example demonstrates the flexibility of CartoDB.js for interactive map visualization of a global submarine cable network. Using a Leaflet basemap, the map is created via `cartodb.createVis` with a Viz.json URL, and the code shows how to access the native map object and work with sublayers. It includes a variety of styling techniques in CartoCSS, from simple line styling to variable-based and zoom-dependent styling, as well as composite operations. Interactive features include an infobox that displays cable attributes, and buttons that let users filter data with SQL and swap styles on the fly by changing the CartoCSS.

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

basemap/layer Selectors

This example demonstrates a map interface with selectable basemaps and data layers. Users switch between CartoDB’s Voyager, Positron, and Dark Matter tile basemaps via radio buttons, and toggle prevalence layers for years 2013–2016 using checkboxes. The code uses the Leaflet map library via cartodb.js, updating the tile layer’s URL for basemap changes and calling `show()` or `hide()` on sublayers for data visibility.

Aalexsroth
80% match