Gist fc77170db4eeca1daeb7

100%

Gist fc77170db4eeca1daeb7

✓ Published0🌍 Public

Last edited May 13, 2014

Created on May 13, 2014

This example demonstrates how to initialize a Leaflet map centered at coordinates [0,0] with a zoom level of 2, then add a CartoDB layer to it. The code uses the `L.Map` constructor and `cartodb.createLayer` to load a visualization from a CartoDB visualization JSON URL. Once the layer finishes loading, a callback function is available for further interaction, while an error handler displays an alert if the layer fails to load. The map serves as the base canvas for displaying the CartoDB-provided geographic data.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 734eccf8853aef50f07b

This example shows a Leaflet map centered at the equator with zoom level 2, overlaid with a CartoDB layer. It uses Stamen’s toner tile layer as the base map, then creates a CartoDB layer via `cartodb.createLayer` and adds it to the map. The code includes callbacks for the layer’s `done` and `error` events, though no specific layer styling or data processing is shown.

Aandrewxhill

87% 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

81% match

Loading thumbnail…

Gist 5830532

This example displays a map with a set of geographic features loaded from a CartoDB SQL query, which returns data in GeoJSON format. The visualization uses the Leaflet mapping library to render the map and a `L.geoJson` layer to draw the features. Each feature is processed with an `onEachFeature` callback that assigns a `cartodb_id` property to the corresponding Leaflet layer and adds it to a `drawnItems` layer group, which is then added to the map. The data source is the `leaflet_data` table from the osm2 CartoDB account.

Aandrewxhill

81% 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

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…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill

79% match

Loading thumbnail…

Easy example | CartoDB.js

This example loads a CartoDB-hosted map visualization into a full-screen `<div id="map">` using the CartoDB.js library. It calls `cartodb.createVis` with a specific `viz.json` URL, setting initial center coordinates at latitude 0, longitude 0, zoom level 2, and disabling the time slider. The map renders the visualization’s default layers and styling from the referenced CartoDB account. The page includes the CartoDB CSS and JavaScript files from `libs.cartocdn.com`, and any loading errors are logged to the console.

Aandrewbt

79% match

Loading thumbnail…

Easy example | CartoDB.js

This example uses CartoDB.js to create an interactive map visualization. The map loads a public CartoDB visualization from a hosted viz.json URL and displays it with a base layer and a CartoDB data layer. The code enables layer interaction, allowing feature hover events to log data through `cartodb.log.log`, and then retrieves the native Leaflet map object to set zoom and pan to Buenos Aires. The visualization uses the CartoDB CSS and JavaScript libraries, with a simple full-screen map container.

Aaaizemberg

78% match