Skip to main content
100%

basemap/layer Selectors

✓ Published0🌍 Public
Aalexsroth
Last edited Nov 6, 2017
Created on Nov 6, 2017

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.

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

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP
72% 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
71% match