Skip to main content
100%

Map Connections | CartoDB.js

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 13, 2014
Created on Jan 13, 2014

Clicking a ZIP code polygon on a U.S. map triggers a dynamic query that draws purple curved lines from that selected area to nearby ski resorts within a 1,000-unit distance. The example uses CartoDB.js with Leaflet to render the base map and vector layers, while a CartoDB SQL API call executes `ST_MakeLine`, `ST_Segmentize`, and `ST_Transform` to generate geodesic connection paths in GeoJSON format. Interactivity includes cursor changes on feature hover and line removal/replacement on each new click, with styling controlled through CartoCSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Map Connections | CartoDB.js

Clicking a ZIP code on a gray choropleth map of the lower 48 states triggers a purple line to be drawn from that location to each nearby ski area within 1,000 units. The example uses CartoDB.js to render the base layer and SQL queries to compute line geometries via `ST_MakeLine` and `ST_Centroid`. It also employs Leaflet’s `L.Map` for panning and zooming, with `featureClick` and `featureOver` events managing cursor feedback.

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

CartoDB Point Clustering

This example uses CartoDB to render U.S. state polygons with clustered point data. Clicking a state triggers an SQL query that applies ST_Dump and ST_SimplifyPreserveTopology to generate line segments radiating from the state centroid to its boundary points, producing a stylized "POW!" label effect. The visualization combines CartoDB’s tile layer API with custom CartoCSS styling, including pattern fills and text labels, to show how dynamic SQL can reshape geographic features interactively.

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

CartoDB Point Clustering

This example displays a choropleth map of U.S. ZIP code tabulation areas, colored by the ratio of mortgage disclosures to brokers, with polygon opacity scaled by broker count. It uses CartoDB.js with Leaflet to render the map, an SQL query joining broker data to census geographies, and CartoCSS for the graduated color and opacity styling. The map applies an aggregation stack blur filter to smooth the rendered polygons.

Aandrewxhill
73% 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
72% 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
72% 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
72% match