Skip to main content
100%

Leaflet.draw control for CartoDB

✓ Published0🌍 Public
Aandrewxhill
Last edited Jun 21, 2013
Created on Jun 21, 2013

This example shows a Leaflet map where users can draw, edit, and delete vector shapes, with changes persisted to a CartoDB backend. The code listens for drawing actions and converts edited or newly drawn layers into GeoJSON, sending them via POST requests to CartoDB’s SQL API. It uses the Leaflet.draw plugin and Leaflet’s layer management (e.g., `layers.eachLayer`, `layers.toGeoJSON`) to collect geometries and associated `cartodb_id` values. A custom SQL function (`osm2_upsert_leaflet_data`) handles inserts, updates, and deletions, and the response updates the layer’s ID after insertion.

AI-generated description

Similar vizzes

Loading thumbnail…

Leaflet Draw

This example demonstrates a Leaflet-based web map that lets users create, edit, and delete point markers, with changes persisted to a CARTO points-geometry table. It uses Leaflet.draw for the interactive drawing controls and CARTO’s SQL API to read and write GeoJSON features. The map is initialized with a CARTO basemap, and existing points from a CARTO table are loaded via a `cartodb.SQL` query and added to a `L.FeatureGroup`. A custom `persistOnCartoDB` function handles UPDATE, INSERT, and DELETE actions by constructing parameterized SQL statements, which are executed through a security-definer PostgreSQL function to modify the underlying table. The example demonstrates a full read–edit–write workflow for point data, with hooks for the Leaflet.draw events.

Aandrewbt
88% match
Loading thumbnail…

Leaflet.draw drawing and editing tools

This interactive map uses Leaflet.draw to let users draw polygons over a CartoDB layer of global populated places. The drawing tools are customized to allow only polygon shapes, with intersection checking and area display enabled. After a polygon is drawn, the map queries the CartoDB SQL API to filter the underlying dataset using ST_Intersects and ST_MakePolygon, then applies dynamic CartoCSS styling that colors points based on population thresholds. The example demonstrates combining Leaflet.draw's editing capabilities with CartoDB's SQL and styling APIs for on-the-fly spatial queries and visual updates.

Aandrewxhill
82% match
Loading thumbnail…

Leaflet Draw

This example demonstrates an interactive map interface built with Leaflet and the Leaflet Draw plugin, allowing users to overlay and edit geographic features on top of selectable base layers. It displays OpenStreetMap, CARTO light tiles, and Google satellite imagery, while a feature group holds drawn polygons and polylines. The code loads GeoJSON data from a CARTO SQL API query, populating the map with predefined areas of interest from a dataset about New York. The drawing controls enable polygon creation with intersection restrictions and area measurement, though the event handler for adding newly created layers is commented out.

Aandrewbt
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
79% 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
77% 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
76% 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
75% match
Loading thumbnail…

Gist fc77170db4eeca1daeb7

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.

Aandrewxhill
75% match