Skip to main content
100%

Layer selector example | CartoDB.js

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 29, 2015
Created on Jan 29, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Layer selector example | CartoDB.js

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.

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
85% 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
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
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
79% 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
77% match
Loading thumbnail…

Style selector example | CartoDB.js

This example shows a map of U.S. ZIP code tabulation areas with an interactive layer selector that switches between three visual styles: a solid red fill, a black-and-white fill, and a choropleth based on the `aland10` attribute. The code uses the CartoDB.js library to load the visualization and applies different CartoCSS styles to the sublayer when the user clicks a menu item. It demonstrates dynamic style switching via `setCartoCSS`, with the choropleth style embedded as a template in the HTML.

Aandrewxhill
77% 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
77% match