• Stars
    star
    107
  • Rank 323,587 (Top 7 %)
  • Language
    CSS
  • Created almost 10 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Drag functionality for Leaflet vector layers

L.Path.Drag

npm version

Drag handler for Leaflet vector features. It adds dragging API and events of L.Marker to L.Polygon and L.Polyline.

If you are looking for this functionality combined with Leaflet.draw, take a look at Leaflet.draw.drag and Leaflet.Editable.Drag.

Demo

Usage

<script src="path/to/leaflet/"></script>
<script src="path/to/L.Path.Drag.js"></script>
...
var polygon = new L.Polygon([...], { draggable: true }).addTo(map);
// you can use the drag events just like with markers
polygon
    .on('dragstart', onDragStart)
    .on('drag',      onDrag)
    .on('dragend',   onDragEnd);

with browserify

npm install leaflet-path-drag
...

require('leaflet');
var handler = require('leaflet-path-drag');

Requires [email protected]

For [email protected] support use code from leaflet-0.7 branch

Enable/disable dragging

var polygon = new L.Polygon([...], { draggable: true }).addTo(map);
polygon.dragging.enable();
polygon.dragging.disable();

Info

It uses matrix transforms on SVG/VML paths, so part of it(src/L.Path.Transform) could be used for different transformations - skew/scale/etc - but you have to provide coordinates projection and handling yourself.

VML matrix transform tested in IE8, it has rendering glitches, but what can you expect.

License

The MIT License (MIT)

Copyright (c) 2015 Alexander Milevski

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

martinez

Martinez-Rueda polygon clipping algorithm, does boolean operation on polygons (multipolygons, polygons with holes etc): intersection, union, difference, xor
JavaScript
682
star
2

polygon-offset

Small lib for polygon offsetting(margin/padding)
JavaScript
245
star
3

GreinerHormann

Greiner-Hormann polygon clipping algorithm. Does AND, OR, XOR. Plays nicely with Leaflet. Handles non-convex polygons and multiple clipping areas. ~3kb footprint, no dependencies
JavaScript
233
star
4

Leaflet.Path.Transform

Drag/rotate/resize handler for leaflet vector features.
CSS
168
star
5

splay-tree

Fast splay-tree data structure
TypeScript
114
star
6

avl

👓 Fast AVL tree for Node and browser
JavaScript
110
star
7

Leaflet.draw.drag

Drag feature functionality for Leaflet.draw
JavaScript
66
star
8

geojson2svg

Render geojson into SVG using inline or external stylesheet
JavaScript
65
star
9

Leaflet.Bookmarks

Leaflet plugin for user-generated bookmarks
JavaScript
60
star
10

wms-capabilities

WMS GetCapabilities to JSON
CSS
53
star
11

L.Control.LineStringSelect

Polyline selection control for Leaflet
JavaScript
47
star
12

leaflet-labeled-circle

Special type of SVG marker with a label inside and draggable around the anchor point
JavaScript
42
star
13

Leaflet.Modal

Modal windows and dialog inside your map
JavaScript
41
star
14

bezier-intersect

Set of functions to find intersections between lines and rectangles and Bezier curves of order 2 and 3
JavaScript
41
star
15

leaflet-area-select

Control to just select an area and provide bbox for it
JavaScript
34
star
16

liang-barsky

Liang-Barsky line-clipping algorithm
TypeScript
33
star
17

svg-arc-corners

SVG arc with rounded corners path generator
JavaScript
32
star
18

orourke-compc

Code from O'Rourke book "Computational Geometry algorithms in C" 1997
C
29
star
19

bresenham-zingl

Set of efficient Bresenham rasterisers ported from Alois Zingl' code
JavaScript
27
star
20

esri-leaflet-legend

Esri leaflet plugin for retrieving map service legends.
JavaScript
23
star
21

Leaflet.Tooltip

Movable tooltips for leaflet 1.0.0
CSS
18
star
22

leaflet-schematic

This is a set of tools to display and work with non-cartographic large high-detailed SVG schematics or blueprints
JavaScript
17
star
23

wasm-n-body

WebAssembly N-body simulation benchmark
HTML
16
star
24

k-d-tree

K-d tree to use with map visualizations
JavaScript
13
star
25

openshift-geoserver

Script to install geoserver on Red Hat Cloud (Openshift)
Shell
12
star
26

rollup-buble-mocha-boilerplate

Library boilerplate with rollup + buble + mocha
JavaScript
11
star
27

L.Circle.toPolygon

Method for interpolating L.Circle into a set of points, for example for use in GeoJSON
JavaScript
10
star
28

inline-functions

This library allows you to inline functions in your JS/TS code. This is useful for performance reasons, as it allows you to avoid function calls and instead inline the function body directly.
TypeScript
10
star
29

Leaflet.Editable.Drag

Dragging functionality for Leaflet.Editable
JavaScript
9
star
30

hilbert

2D Hilbert curve coordinate encoder/decoder
JavaScript
9
star
31

point-in-ellipse

Determine if a point is inside of an ellipse
JavaScript
8
star
32

gulp-nuget-pack

Gulp task for creating nuget packages without using nuget.exe.
JavaScript
7
star
33

nominatim-geocode

Wrapper for Nominatim geocoding service
JavaScript
6
star
34

geojson-project

Utils for processing geojson coordinates, in most cases to project them
JavaScript
6
star
35

moscow-rings

Visualization of distances to the main Moscow's transport rings.
CSS
6
star
36

isom-layout

Self-Organizing maps layout
JavaScript
5
star
37

polygon-centroid

polygon centroid algorithm
JavaScript
5
star
38

solve

Solve app
TypeScript
4
star
39

leaflet-note

Leaflet notes plugin
JavaScript
3
star
40

rb-tree

Red-Black tree (WIP)
TypeScript
3
star
41

fast-kd-tree

Fast static Hilbert kd-tree experiment
JavaScript
3
star
42

rollup-ts-glsl

Boilerplate for Rollup + TS + GLSL
TypeScript
3
star
43

b-tree

Generic B-Tree
TypeScript
2
star
44

ts-lib-monorepo-template

Template for monorepository setup with `TS`, `jest`, `lerna`, `eslint`, `@mapbox/typehead`
JavaScript
2
star
45

nned

Neural network edge detector approach
C++
1
star
46

get-css-selector

Converts classnames to css selectors
JavaScript
1
star
47

w8r.github.io

Personal website
JavaScript
1
star
48

ts-esm-jest-typehead-template

Template repo for Typescript + ESM module dependency + Typehead + Jest
TypeScript
1
star
49

link-cut-tree

Link/cut tree data-structure
JavaScript
1
star
50

ooni-widget

TypeScript
1
star
51

sdf-text-glyph-by-glyph

Webgl text using SDF, letter by letter
JavaScript
1
star
52

esri-leaflet-dynamic-tilelayer

Tiled dynamic layer plugin for esri-leaflet
JavaScript
1
star
53

balanced-geocoding

Balanced geocoding app, for personal use. Takes data from .csv files and geocodes it through Google and Yandex Maps APIs
JavaScript
1
star
54

wittgenstein

Reading tractatus logico-philosophicus
HTML
1
star
55

segment-intersection

Simple two segment intersection
TypeScript
1
star
56

paris-metro-graph

Script to build a graph for paris metro
JavaScript
1
star
57

Leaflet.Control.Overview

Overview map control for Leaflet
JavaScript
1
star
58

expo-regl-experiment

React Native + expo + Regl
JavaScript
1
star
59

velo-leboncoin

Script to help me looking for my stolen bike on leboncoin.fr
HTML
1
star
60

expo-skia-graph

TypeScript
1
star
61

ogc-leaflet

Set of tools for working with OGC services with Leaflet, inspired by esri-leaflet
JavaScript
1
star
62

expo-react-three-fiber

TypeScript
1
star
63

warper

Warp raster files
JavaScript
1
star
64

binary-trees

Binary trees: Simple Binary, AVL, Red-Black
JavaScript
1
star