Leaflet.draw Plugin

100%

Leaflet.draw Plugin

✓ Published0🌍 Public

Last edited Dec 7, 2019

Created on Dec 7, 2019

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.

AI-generated description

An example of a map presented with leaflet.js and the Leaflet.draw plugin with a a range of options.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/7730264'>Leaflet.draw plugin v1</a>

mit Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Simple Leaflet Map

A simple interactive map displays a geographic area centered on a set of coordinates, with a single red polyline overlaid on base tiles from OpenStreetMap. The map is created with Leaflet, using its `L.map` and `tileLayer` APIs to render the tile background. The polyline, defined as an array of latitude and longitude pairs, is added with the `L.polyline` API and styled with options for color, weight, opacity, dash pattern, and line join. The example demonstrates basic Leaflet map creation and vector overlay customization.

Dd3noob

75% match

Loading thumbnail…

Dynamic pattern animation

This example demonstrates interactive map-based drawing with dynamically animated SVG patterns. Users draw polygons or rectangles on a Leaflet map, selecting between none, diagonalHatch, or diagonalHash pattern fills via a dropdown control. The D3.js library animates the selected patterns—diagonalHatch drops and diagonalHash spins—while a separate toggle applies a blur filter to reveal hardware acceleration differences across browsers. Rendering uses Leaflet’s SVG overlay pane, with controls built through Leaflet’s L.Control extension API.

KKoGor

71% match

Loading thumbnail…

Leaflet.FileLayer Plugin

This example shows an interactive map centered on Wellington, New Zealand, with a Leaflet.js tile layer from OpenStreetMap. The Leaflet.FileLayer plugin adds a folder-open control button, enabling users to load local GPS trace files in GPX, KML, or GeoJSON formats. The map renders loaded point data as red circle markers, with lines and polygons styled in red using the plugin’s `layerOptions` and `pointToLayer` callbacks. It also calls `fitBounds` to automatically zoom to the loaded data’s extent. The code uses Leaflet’s `L.map`, `L.tileLayer`, and the `L.Control.fileLayerLoad` API from the plugin.

Dd3noob

70% match

Loading thumbnail…

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Dd3noob

70% match

Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

HHirosaji

69% match

Loading thumbnail…

Dynamic tile clipping and more

This example demonstrates interactive map manipulation on a Leaflet map centered on Moscow. Users can draw polygons to dynamically clip OpenStreetMap tiles layered over a Stamen toner base map. The code uses D3.js to project drawn GeoJSON geometries via `d3.geo.path` and `d3.geo.transform`, applying the resulting path as an SVG `clipPath` to reveal the OSM overlay only within the drawn shapes. Additional SVG filters and patterns allow real-time effects like grayscale, hue rotation, and hatching on the map layers.

KKoGor

69% match