Skip to main content
100%

Leaflet Draw

✓ Published0🌍 Public
Aandrewbt
Last edited Jan 12, 2017
Created on Jan 12, 2017

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.

AI-generated description

CARTO + Leaflet.draw

A more complete, working version of this blog post for creating, editing, and deleting points from or to a CARTO points-geometry table. Some modifications would be needed on the front-end side to have this work for a polygons or lines table. CARTO has a limitation of only one type of geometry per table, so you would either want to limit users to Leaflet.draw'ing one geometry type, or otherwise creating new/separate functions and loading from separate tables for different types.

Built with blockbuilder.org

mit Licensed

Similar vizzes