Skip to content
An extension to Leaflet.draw to allow editing large polylines one chunk at the time
JavaScript
Branch: master
Clone or download
Latest commit 5d424d1 Nov 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Updating the docs Nov 8, 2019
test First commit - working version Nov 5, 2019
.eslintrc.js First commit - working version Nov 5, 2019
.gitignore
LICENSE First commit - working version Nov 5, 2019
README.md Update README.md Nov 6, 2019
TODO First commit - working version Nov 5, 2019
index.js Fixing a bug when the first or last vertex was deleted Nov 8, 2019
package-lock.json
package.json 1.0.0 Nov 8, 2019
rollup.config.js

README.md

Leaflet polyline segment edit

An extension to Leaflet.draw to allow editing large polylines one chunk at the time.

Browsers usually can't handle editing large polylines with Leaflet.Draw. Each vertex creates new elements that must be managed and added the DOM: that leads the browser to freeze with too many points. This extension splits the polyline being edited in many segments that can be edited independently.

Important: this is not a standalone plugin, it requires Leaflet.draw to work.

The plugins works with both L.Polygons (multi or simple, with or without holes) and L.Polylines.

Tested on Leaflet 1.0.0+ branch.

Inspired by https://github.com/openplacedatabase/gmaps-large-polygons.

Demos

Editing a GeoJSON with +35k coordinates

Installing

You can use npm

$ npm install leaflet-polyline-segment-edit

or use unpkg (you might need to change the version)

<script src="https://unpkg.com/leaflet-polyline-segment-edit@0.1.1/leaflet.segmentedit.min.js"></script>

Usage

Add Leaflet, Leaflet.Draw and this plugin to your page.

Create and instance of new L.Edit.PolySegmentEditing(map, geometry, options) and enable it to start editing the geometry.

You can change the segment size and style via options.

var poly = L.polygon(...);

var options = {
    segmentSize: 250,
    style: {
        default: {
            weight: 3,
            color: 'tomato'
        },
        hover: {
            weight: 6,
            color: 'orange'
        },
        editing: {
            weight: 2,
            color: 'gray'
        }
    }
};

var editor = new L.Edit.PolySegmentEditing(map, poly, options);

// The segments won't show until the handler is enabled
editor.enable();

// After all the work is done
editor.disable();

Options

segmentSize [integer] - The size of each segment. Defaults to 100.

style.default [object] - The default style for the line segments.

style.hover [object] - Style to display when hovered. Useful for showing which part of the geometry is going to be edited.

style.editing [object] - The style of the segment while being edited.

All the styles default to Leaflet.Draw's default style. Check Leaflet's API for examples.

Events

The event L.Draw.Event.LINESEGMENTEDIT is fired after a vertex is edited.

You can also listen to L.Draw.Event.EDITVERTEX.

Caveats

This plugin allows polygons with holes to be edited. However, it doesn't enforce the geometry integrity (overlapping holes, holes outside the shell, crossing segments, etc.).

Thanks

A big thank you to Leaflet and Leaflet.draw for being so cool and useful.

Thanks to gmaps-large-polygons for the inspiration.

You can’t perform that action at this time.