Skip to main content
100%

Leaflet.draw drawing and editing tools

✓ Published0🌍 Public
Aandrewxhill
Last edited Jun 24, 2014
Created on Jun 24, 2014

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.

AI-generated description

Similar vizzes

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
86% match
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
84% match
Loading thumbnail…

Leaflet.draw control for CartoDB

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.

Aandrewxhill
82% match
Loading thumbnail…

Draw on Map

This interactive map allows users to draw and edit shapes directly on a geographic canvas, using the Leaflet mapping library and its Leaflet.draw plugin. The example demonstrates how to set up a drawing control with polygon draw enabled and a feature group for managing created shapes. A Mapbox tile layer provides the base map, and the map listens for the `draw:created` event to add newly drawn polygons to the feature group. The visualization also includes sample data files with city names and coordinates, though the current map focuses on the drawing functionality.

SSriyaI
79% 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…

Leaflet.draw Plugin

This example shows an interactive map with the Leaflet.draw plugin, demonstrating drawing and editing tools for polylines, polygons, rectangles, circles, and markers. The map renders OpenStreetMap tiles, with drawn shapes styled in distinct colors and a custom green icon for markers. The code uses Leaflet’s `L.Control.Draw` with options like intersection prevention and area display, and stores created layers in a `L.FeatureGroup` for editing and removal. A custom `L.Icon` class defines the marker appearance, while the `draw:created` event adds new geometries to the group.

Dd3noob
79% match
Loading thumbnail…

Leaflet.draw Plugin

This example shows an interactive map of a New Zealand location using OpenStreetMap tiles, rendered with Leaflet.js and the Leaflet.draw plugin. Users can draw polygon, polyline, rectangle, circle, and marker shapes on the map, each with custom colors and style options. The drawn items are collected in a Leaflet FeatureGroup, and the code configures features like intersection detection for polygons, area display, and repeat drawing mode. A custom green leaf icon is created via `L.Icon.extend` with a shadow URL, and popup bindings are added to drawn markers.

Dd3noob
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