Skip to main content
100%

combining styles across layers

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 31, 2012
Created on Jan 31, 2012

This visualization combines multiple cartographic layers into a single tile-rendered map, using CartoDB’s tile server with SQL queries that union river and country boundary data. The CartoCSS styling applies distinct rules per layer ID: rivers render as semi-transparent blue lines whose width varies by zoom level, while country borders use dashed strokes that solidify at higher zooms. A dedicated `::glow` symbolizer adds a subtle black outline for emphasis. The example demonstrates how zoom-dependent styling and layer-specific properties can be merged in one tile request, with data pulled from the `rivers` and `country_attributes_live` tables.

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
71% 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
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
70% 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
70% 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
68% 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
68% 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
67% match
Loading thumbnail…

Leaflet multilayer example | CartoDB.js

A Leaflet map displays tornado data aggregated into hexagon bins at three distinct scales, with each bin labeled by its point count. The visualization uses CartoDB.js to run a SQL query that computes three nested hexagon grids, filtering points into large, medium, and small clusters based on density thresholds. A CartoDB sublayer applies CartoCSS to scale text sizes by cluster tier, overlaying the raw points with red labels on a Stamen toner base layer.

Aandrewxhill
67% match