Leaflet.draw Plugin

100%

Leaflet.draw Plugin

✓ Published0🌍 Public

Last edited May 8, 2020

Created on Dec 1, 2013

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.

AI-generated description

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

Similar vizzes

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

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…

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

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

75% match

Loading thumbnail…

Simple Leaflet Map

This example shows a Leaflet map centered on Wellington, New Zealand, with selectable base layers and an overlay of local landmarks. It uses Leaflet’s `L.map`, `L.tileLayer`, and `L.control.layers` to switch between OpenStreetMap and Thunderforest landscape tiles. An `L.LayerGroup` contains four markers with popups and a polyline connecting the points, which can be toggled as an overlay. The code also uses `L.marker` and `L.polyline` to add geographic features to the map.

Dd3noob

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

74% match

Loading thumbnail…

Simple Leaflet Map

A simple Leaflet map shows a draggable, semi-transparent marker with hover text and a popup overlaid on an OpenStreetMap tile layer. The map is centered on Wellington, New Zealand, using the Leaflet `L.map` API, with the marker pinning Te Papa museum. The example demonstrates core Leaflet features including `L.tileLayer` for basemap tiles, `L.marker` with options for dragging, title, and opacity, and `bindPopup` to attach interactive popup content.

Dd3noob

73% match

Loading thumbnail…

Simple Leaflet Map

A simple interactive map of central Wellington, New Zealand, rendered with Leaflet 1.6.0 and OpenStreetMap tiles. The view centers on a set of coordinates, over which a red polyline with custom styling—including weight, opacity, and a dash pattern—is drawn using `L.polyline`. The map supports panning and zooming through Leaflet's built-in interactions.

Dd3noob

73% match