Skip to main content
100%

Style selector example | CartoDB.js

✓ Published0🌍 Public
Aandrewxhill
Last edited May 6, 2014
Created on Jan 8, 2014

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.

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
78% 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
77% 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…

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

Clustering stylings for CartoDB

This CartoDB map visualizes clustered point data by varying marker width and opacity based on count attributes and zoom levels. It uses CartoCSS styling to define rules that scale marker size with cluster counts, while zoom-dependent conditions control which hierarchy levels appear. The code applies opacity and line styling only when the map reaches specific zoom thresholds, hiding higher-level clusters at closer views. The example demonstrates how CartoDB’s styling language can create interactive, zoom-aware cluster representations without JavaScript libraries.

Aandrewxhill
71% match
Loading thumbnail…

Something crazy

This example displays a choropleth map of U.S. postal codes, where a randomly selected threshold dynamically recolors polygons based on their population totals. The visualization uses the CartoDB.js library to load a Leaflet map layer, then modifies its CartoCSS styling on each page load. A JavaScript function converts the current timestamp into an RGB color, which is applied to polygons exceeding a random population value, while all other areas retain a fixed pink fill. The underlying data comes from a CartoDB-hosted dataset of postal code boundaries.

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