From 7732f885ed8941f404b4f454f08ad54adf386873 Mon Sep 17 00:00:00 2001 From: Jon West Date: Tue, 29 Nov 2016 18:08:43 -0600 Subject: [PATCH] Creating 0.4.4 build --- bower.json | 2 +- dist/leaflet.draw-src.css | 306 ----- dist/leaflet.draw.css | 9 - docs/leaflet-draw-0.4.4.html | 2268 +++++++++++++++++++++++++++++++++ docs/leaflet-draw-latest.html | 37 +- package.json | 2 +- 6 files changed, 2290 insertions(+), 334 deletions(-) delete mode 100644 dist/leaflet.draw-src.css delete mode 100644 dist/leaflet.draw.css create mode 100644 docs/leaflet-draw-0.4.4.html diff --git a/bower.json b/bower.json index 2cc79aa6c..b5167e4d8 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "leaflet-draw", "description": "Vector drawing plugin for Leaflet", - "version": "0.4.3", + "version": "0.4.4", "main": [ "dist/leaflet.draw-src.js", "dist/leaflet.draw.css", diff --git a/dist/leaflet.draw-src.css b/dist/leaflet.draw-src.css deleted file mode 100644 index aeb69133b..000000000 --- a/dist/leaflet.draw-src.css +++ /dev/null @@ -1,306 +0,0 @@ -/* ================================================================== */ -/* Toolbars -/* ================================================================== */ - -.leaflet-draw-section { - position: relative; -} - -.leaflet-draw-toolbar { - margin-top: 12px; -} - -.leaflet-draw-toolbar-top { - margin-top: 0; -} - -.leaflet-draw-toolbar-notop a:first-child { - border-top-right-radius: 0; -} - -.leaflet-draw-toolbar-nobottom a:last-child { - border-bottom-right-radius: 0; -} - -.leaflet-draw-toolbar a { - background-image: url('images/spritesheet.png'); - background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg'); - background-repeat: no-repeat; - background-size: 270px 30px; - background-clip: padding-box; -} - -.leaflet-retina .leaflet-draw-toolbar a { - background-image: url('images/spritesheet-2x.png'); - background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg'); -} - -.leaflet-draw a { - display: block; - text-align: center; - text-decoration: none; -} - -/* ================================================================== */ -/* Toolbar actions menu -/* ================================================================== */ - -.leaflet-draw-actions { - display: none; - list-style: none; - margin: 0; - padding: 0; - position: absolute; - left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */ - top: 0; - white-space: nowrap; -} - -.leaflet-touch .leaflet-draw-actions { - left: 32px; -} - -.leaflet-right .leaflet-draw-actions { - right: 26px; - left: auto; -} - -.leaflet-touch .leaflet-right .leaflet-draw-actions { - right: 32px; - left: auto; -} - -.leaflet-draw-actions li { - display: inline-block; -} - -.leaflet-draw-actions li:first-child a { - border-left: none; -} - -.leaflet-draw-actions li:last-child a { - -webkit-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} - -.leaflet-right .leaflet-draw-actions li:last-child a { - -webkit-border-radius: 0; - border-radius: 0; -} - -.leaflet-right .leaflet-draw-actions li:first-child a { - -webkit-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} - -.leaflet-draw-actions a { - background-color: #919187; - border-left: 1px solid #AAA; - color: #FFF; - font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif; - line-height: 28px; - text-decoration: none; - padding-left: 10px; - padding-right: 10px; - height: 28px; -} - -.leaflet-touch .leaflet-draw-actions a { - font-size: 12px; - line-height: 30px; - height: 30px; -} - -.leaflet-draw-actions-bottom { - margin-top: 0; -} - -.leaflet-draw-actions-top { - margin-top: 1px; -} - -.leaflet-draw-actions-top a, -.leaflet-draw-actions-bottom a { - height: 27px; - line-height: 27px; -} - -.leaflet-draw-actions a:hover { - background-color: #A0A098; -} - -.leaflet-draw-actions-top.leaflet-draw-actions-bottom a { - height: 26px; - line-height: 26px; -} - -/* ================================================================== */ -/* Draw toolbar -/* ================================================================== */ - -.leaflet-draw-toolbar .leaflet-draw-draw-polyline { - background-position: -2px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline { - background-position: 0 -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-draw-polygon { - background-position: -31px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon { - background-position: -29px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-draw-rectangle { - background-position: -62px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle { - background-position: -60px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-draw-circle { - background-position: -92px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle { - background-position: -90px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-draw-marker { - background-position: -122px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker { - background-position: -120px -1px; -} - -/* ================================================================== */ -/* Edit toolbar -/* ================================================================== */ - -.leaflet-draw-toolbar .leaflet-draw-edit-edit { - background-position: -152px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit { - background-position: -150px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-edit-remove { - background-position: -182px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove { - background-position: -180px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { - background-position: -212px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { - background-position: -210px -1px; -} - -.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { - background-position: -242px -2px; -} - -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { - background-position: -240px -2px; -} - -/* ================================================================== */ -/* Drawing styles -/* ================================================================== */ - -.leaflet-mouse-marker { - background-color: #fff; - cursor: crosshair; -} - -.leaflet-draw-tooltip { - background: rgb(54, 54, 54); - background: rgba(0, 0, 0, 0.5); - border: 1px solid transparent; - -webkit-border-radius: 4px; - border-radius: 4px; - color: #fff; - font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; - margin-left: 20px; - margin-top: -21px; - padding: 4px 8px; - position: absolute; - visibility: hidden; - white-space: nowrap; - z-index: 6; -} - -.leaflet-draw-tooltip:before { - border-right: 6px solid black; - border-right-color: rgba(0, 0, 0, 0.5); - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - content: ""; - position: absolute; - top: 7px; - left: -7px; -} - -.leaflet-error-draw-tooltip { - background-color: #F2DEDE; - border: 1px solid #E6B6BD; - color: #B94A48; -} - -.leaflet-error-draw-tooltip:before { - border-right-color: #E6B6BD; -} - -.leaflet-draw-tooltip-single { - margin-top: -12px -} - -.leaflet-draw-tooltip-subtext { - color: #f8d5e4; -} - -.leaflet-draw-guide-dash { - font-size: 1%; - opacity: 0.6; - position: absolute; - width: 5px; - height: 5px; -} - -/* ================================================================== */ -/* Edit styles -/* ================================================================== */ - -.leaflet-edit-marker-selected { - background-color: rgba(254, 87, 161, 0.1); - border: 4px dashed rgba(254, 87, 161, 0.6); - -webkit-border-radius: 4px; - border-radius: 4px; - box-sizing: content-box; -} - -.leaflet-edit-move { - cursor: move; -} - -.leaflet-edit-resize { - cursor: pointer; -} - -/* ================================================================== */ -/* Old IE styles -/* ================================================================== */ - -.leaflet-oldie .leaflet-draw-toolbar { - border: 1px solid #999; -} \ No newline at end of file diff --git a/dist/leaflet.draw.css b/dist/leaflet.draw.css deleted file mode 100644 index d4729db04..000000000 --- a/dist/leaflet.draw.css +++ /dev/null @@ -1,9 +0,0 @@ -.leaflet-draw-section{position:relative}.leaflet-draw-toolbar{margin-top:12px}.leaflet-draw-toolbar-top{margin-top:0}.leaflet-draw-toolbar-notop a:first-child{border-top-right-radius:0}.leaflet-draw-toolbar-nobottom a:last-child{border-bottom-right-radius:0}.leaflet-draw-toolbar a{background-image:url('images/spritesheet.png');background-image:linear-gradient(transparent,transparent),url('images/spritesheet.svg');background-repeat:no-repeat;background-size:270px 30px;background-clip:padding-box}.leaflet-retina .leaflet-draw-toolbar a{background-image:url('images/spritesheet-2x.png');background-image:linear-gradient(transparent,transparent),url('images/spritesheet.svg')} -.leaflet-draw a{display:block;text-align:center;text-decoration:none}.leaflet-draw-actions{display:none;list-style:none;margin:0;padding:0;position:absolute;left:26px;top:0;white-space:nowrap}.leaflet-touch .leaflet-draw-actions{left:32px}.leaflet-right .leaflet-draw-actions{right:26px;left:auto}.leaflet-touch .leaflet-right .leaflet-draw-actions{right:32px;left:auto}.leaflet-draw-actions li{display:inline-block}.leaflet-draw-actions li:first-child a{border-left:0}.leaflet-draw-actions li:last-child a{-webkit-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0} -.leaflet-right .leaflet-draw-actions li:last-child a{-webkit-border-radius:0;border-radius:0}.leaflet-right .leaflet-draw-actions li:first-child a{-webkit-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.leaflet-draw-actions a{background-color:#919187;border-left:1px solid #AAA;color:#FFF;font:11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;line-height:28px;text-decoration:none;padding-left:10px;padding-right:10px;height:28px}.leaflet-touch .leaflet-draw-actions a{font-size:12px;line-height:30px;height:30px} -.leaflet-draw-actions-bottom{margin-top:0}.leaflet-draw-actions-top{margin-top:1px}.leaflet-draw-actions-top a,.leaflet-draw-actions-bottom a{height:27px;line-height:27px}.leaflet-draw-actions a:hover{background-color:#a0a098}.leaflet-draw-actions-top.leaflet-draw-actions-bottom a{height:26px;line-height:26px}.leaflet-draw-toolbar .leaflet-draw-draw-polyline{background-position:-2px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline{background-position:0 -1px}.leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-31px -2px} -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-position:-29px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-62px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle{background-position:-60px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-92px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle{background-position:-90px -1px}.leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-122px -2px} -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker{background-position:-120px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-152px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit{background-position:-150px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-182px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove{background-position:-180px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled{background-position:-212px -2px} -.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled{background-position:-210px -1px}.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled{background-position:-242px -2px}.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled{background-position:-240px -2px}.leaflet-mouse-marker{background-color:#fff;cursor:crosshair}.leaflet-draw-tooltip{background:#363636;background:rgba(0,0,0,0.5);border:1px solid transparent;-webkit-border-radius:4px;border-radius:4px;color:#fff;font:12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif;margin-left:20px;margin-top:-21px;padding:4px 8px;position:absolute;visibility:hidden;white-space:nowrap;z-index:6} -.leaflet-draw-tooltip:before{border-right:6px solid black;border-right-color:rgba(0,0,0,0.5);border-top:6px solid transparent;border-bottom:6px solid transparent;content:"";position:absolute;top:7px;left:-7px}.leaflet-error-draw-tooltip{background-color:#f2dede;border:1px solid #e6b6bd;color:#b94a48}.leaflet-error-draw-tooltip:before{border-right-color:#e6b6bd}.leaflet-draw-tooltip-single{margin-top:-12px}.leaflet-draw-tooltip-subtext{color:#f8d5e4}.leaflet-draw-guide-dash{font-size:1%;opacity:.6;position:absolute;width:5px;height:5px} -.leaflet-edit-marker-selected{background-color:rgba(254,87,161,0.1);border:4px dashed rgba(254,87,161,0.6);-webkit-border-radius:4px;border-radius:4px;box-sizing:content-box}.leaflet-edit-move{cursor:move}.leaflet-edit-resize{cursor:pointer}.leaflet-oldie .leaflet-draw-toolbar{border:1px solid #999} \ No newline at end of file diff --git a/docs/leaflet-draw-0.4.4.html b/docs/leaflet-draw-0.4.4.html new file mode 100644 index 000000000..4d3eef3f0 --- /dev/null +++ b/docs/leaflet-draw-0.4.4.html @@ -0,0 +1,2268 @@ + + + + Leaflet Draw Documentation + + + + + + + + + + + + + + +
+ +

Leaflet Draw API reference

+ +
+

This documentation is has been transcribed from the original README.MD to jsdoc's or natural docs style for + use with Leafdoc. If you identify a typo or have a + suggestion for this documentation, please feel free toedit the js comment blocks in the src directory, + build with 'jake docs' and submit a pull request.

+ + +

Leaflet 1.0+ Examples

+ + +

Leaflet 0.7+ Examples

+ +
+ +

L.Draw

To add the draw toolbar set the option drawControl: true in the map options.

+ +
+

Usage example

+ +
+ + + + + +
     var map = L.map('map', {drawControl: true}).setView([51.505, -0.09], 13);
+     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+     }).addTo(map);
+
+

Adding the edit toolbar

+

To use the edit toolbar you must initialise the Leaflet.draw control and manually add it to the map.

+
     var map = L.map('map').setView([51.505, -0.09], 13);
+     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+     }).addTo(map);
+     // FeatureGroup is to store editable layers
+     var drawnItems = new L.FeatureGroup();
+     map.addLayer(drawnItems);
+     var drawControl = new L.Control.Draw({
+         edit: {
+             featureGroup: drawnItems
+         }
+     });
+     map.addControl(drawControl);
+
+

The key here is the featureGroup option. This tells the plugin which FeatureGroup contains the layers that +should be editable. The featureGroup can contain 0 or more features with geometry types Point, LineString, and Polygon. +Leaflet.draw does not work with multigeometry features such as MultiPoint, MultiLineString, MultiPolygon, +or GeometryCollection. If you need to add multigeometry features to the draw plugin, convert them to a +FeatureCollection of non-multigeometries (Points, LineStrings, or Polygons).

+ + + +
+ + +

L.drawLocal

The core toolbar class of the API — it is used to create the toolbar ui

+ +
+

Usage example

+ +
+ + + + + +
     var modifiedDraw = L.drawLocal.extend({
+         draw: {
+             toolbar: {
+                 buttons: {
+                     polygon: 'Draw an awesome polygon'
+                 }
+             }
+         }
+     });
+
+

The default state for the control is the draw toolbar just below the zoom control. + This will allow map users to draw vectors and markers. + Please note the edit toolbar is not enabled by default.

+ + + +
+ + +

L.Draw.Toolbar

The toolbar class of the API — it is used to create the ui +This will be depreciated

+ +
+

Usage example

+ +
+ + + + + +
   var toolbar = L.Toolbar();
+   toolbar.addToolbar(map);
+
+

Disabling a toolbar

+

If you do not want a particular toolbar in your app you can turn it off by setting the toolbar to false.

+
     var drawControl = new L.Control.Draw({
+         draw: false,
+         edit: {
+             featureGroup: editableLayers
+         }
+     });
+
+

Disabling a toolbar item

+

If you want to turn off a particular toolbar item, set it to false. The following disables drawing polygons and +markers. It also turns off the ability to edit layers.

+
     var drawControl = new L.Control.Draw({
+         draw: {
+             polygon: false,
+             marker: false
+         },
+         edit: {
+             featureGroup: editableLayers,
+             edit: false
+         }
+     });
+
+ + + +
+ + +
+

Methods

+ +
+ +

Methods for modifying the toolbar

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize(options)void

Toolbar constructor

+
enabled()boolean

Gets a true/false of whether the toolbar is enabled

+
disable()void

Disables the toolbar

+
addToolbar(map)L.DomUtil

Adds the toolbar to the map and returns the toolbar dom element

+
removeToolbar()void

Removes the toolbar and drops the handler event listeners

+
+ +
+ + +

L.Draw.Event

Use L.Draw.Event.EVENTNAME constants to ensure events are correct.

+ +
+

Usage example

+ +
+ + + + + +
map.on(L.Draw.Event.CREATED; function (e) {
+   var type = e.layerType;
+       layer = e.layer;
+   if (type === 'marker') {
+       // Do marker specific actions
+   }
+   // Do whatever else you need to. (save to db; add to map etc)
+   map.addLayer(layer);
+});
+
+
     map.on('draw:edited'; function (e) {
+         var layers = e.layers;
+         layers.eachLayer(function (layer) {
+             //do whatever you want; most likely save back to db
+         });
+     });
+
+ + + +
+ + +
+

Events

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDataDescription
draw:created + PolyLinePolygon; Rectangle; Circle; Marker | String +Layer that was just created. +The type of layer this is. One of: polyline; polygon; rectangle; circle; marker +Triggered when a new vector or marker has been created.
draw:edited + LayerGroupList of all layers just edited on the map. +Triggered when layers in the FeatureGroup; initialised with the plugin; have been edited and saved.
draw:deleted + LayerGroupList of all layers just removed from the map. +Triggered when layers have been removed (and saved) from the FeatureGroup.
draw:drawstart + StringThe type of layer this is. One of:polyline; polygon; rectangle; circle; marker +Triggered when the user has chosen to draw a particular vector or marker.
draw:drawstop + StringThe type of layer this is. One of: polyline; polygon; rectangle; circle; marker +Triggered when the user has finished a particular vector or marker.
draw:drawvertex + LayerGroupList of all layers just being added from the map. +Triggered when a vertex is created on a polyline or polygon.
draw:editstart + StringThe type of edit this is. One of: edit +Triggered when the user starts edit mode by clicking the edit tool button.
draw:editmove + ILayerLayer that was just moved. +Triggered as the user moves a rectangle; circle or marker.
draw:editresize + ILayerLayer that was just moved. +Triggered as the user resizes a rectangle or circle.
draw:editvertex + LayerGroupList of all layers just being edited from the map. +Triggered when a vertex is edited on a polyline or polygon.
draw:editstop + StringThe type of edit this is. One of: edit +Triggered when the user has finshed editing (edit mode) and saves edits.
draw:deletestart + StringThe type of edit this is. One of: remove +Triggered when the user starts remove mode by clicking the remove tool button.
draw:deletestop + StringThe type of edit this is. One of: remove +Triggered when the user has finished removing shapes (remove mode) and saves.
+ +
+ + +

L.Draw.Feature

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
enable()void

Enables this handler

+
addHooks()void

Add's event listeners to this handler

+
removeHooks()void

Removes event listeners from this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+ + +

L.Draw.SimpleShape

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
addHooks()void
removeHooks()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Draw.Marker

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
addHooks()void
removeHooks()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Draw.Circle

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
addHooks()void
removeHooks()void
+ +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Draw.Polyline

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
addHooks()void
removeHooks()void
deleteLastVertex()void
addVertex()void
completeShape()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Draw.Rectangle

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
addHooks()void
removeHooks()void
+ +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Draw.Polygon

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
addHooks()void
removeHooks()void
deleteLastVertex()void
addVertex()void
completeShape()void
+ +
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
enable()void

Enables this handler

+
setOptions(object)void

Sets new options to this handler

+
+ +
+
+
+ +

L.Edit.SimpleShape

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
addHooks()void
removeHooks()void
updateMarkers()void
+ +
+ + +

L.Edit.Marker

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
addHooks()void
removeHooks()void
+ +
+ + +

L.Edit.Circle

+
+

Methods

+ + + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
addHooks()void
removeHooks()void
updateMarkers()void
+ +
+
+
+ +

L.Edit.Polyline

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
addHooks()void
removeHooks()void
updateMarkers()void
+ +
+ + +

L.Edit.Rectangle

+
+

Methods

+ + + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
addHooks()void
removeHooks()void
updateMarkers()void
+ +
+
+
+ +

L.EditToolbar.Edit

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
enable()void
disable()void
addHooks()void
removeHooks()void
revertLayers()void
save()void
+ +
+ + +

L.EditToolbar.Delete

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
enable()void
disable()void
addHooks()void
removeHooks()void
revertLayers()void
save()void
+ +
+ + +

L.GeometryUtil

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
geodesicArea()number
readableArea()string
readableDistance(distance, isMetric, useFeet, isNauticalMile)string

Converts metric distance to distance string.

+
+ +
+ + +

L.LatLngUtil

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
cloneLatLngs()L.LatLngs[]

Clone the latLng point or points or nested points and return an array with those points

+
cloneLatLng(LatLng)L.LatLng

Clone the latLng and return a new LatLng object.

+
+ +
+ + +

L.LineUtil

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + +
MethodReturnsDescription
segmentsIntersect()boolean

Checks to see if two line segments intersect. Does not handle degenerate cases. +http://compgeom.cs.uiuc.edu/~jeffe/teaching/373/notes/x06-sweepline.pdf

+
+ +
+ + +

L.Polygon

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + +
MethodReturnsDescription
intersects()boolean

Checks a polygon for any intersecting line segments. Ignores holes.

+
+ +
+ + +

L.Polyline

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intersects()boolean

Check to see if this polyline has any linesegments that intersect. +NOTE: does not support detecting intersection for degenerate cases.

+
newLatLngIntersects()boolean

Check for intersection if new latlng was added to this polyline. +NOTE: does not support detecting intersection for degenerate cases.

+
newPointIntersects()boolean

Check for intersection if new point was added to this polyline. +newPoint must be a layer point. +NOTE: does not support detecting intersection for degenerate cases.

+
+ +
+ + +

L.Map.TouchExtend

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void

Sets TouchExtend private accessor variables

+
addHooks()void

Adds dom listener events to the map container

+
removeHooks()void

Removes dom listener events from the map container

+
+ +
+ + +

L.Control.Draw

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void

Initializes draw control, toolbars from the options

+
onAdd()container

Adds the toolbar container to the map

+
onRemove()void

Removes the toolbars from the map toolbar container

+
setDrawingOptions(options)void

Sets options to all toolbar instances

+
+ +
+ + +

L.Draw.Tooltip

The tooltip class — it is used to display the tooltip while drawing +This will be depreciated

+ +
+

Usage example

+ +
+ + + + + +
    var tooltip = L.Draw.Tooltip();
+
+ + + +
+ + +
+

Methods

+ +
+ +

Methods for modifying draw state

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize(map)void

Tooltip constructor

+
dispose()void

Remove Tooltip DOM and unbind events

+
updateContent(labelText)this

Changes the tooltip text to string in function call

+
updatePosition(latlng)this

Changes the location of the tooltip

+
showAsError()this

Applies error class to tooltip

+
removeError()this

Removes the error class from the tooltip

+
+ +
+ + +

L.DrawToolbar

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
initialize()void
getModeHandlers()void
getActions()void
setOptions()void
+ +
+ + +

L.EditToolbar

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
getModeHandlers()void
getActions()void
addToolbar()void
removeToolbar()void
disable()void
+ +
+ + +

L.Edit.PolyVerticesEdit

+
+

Methods

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturnsDescription
intialize()void
addHooks()void
removeHooks()void
updateMarkers()void
+ +
+ + +

L.Marker.Touch

This isn't full Touch support. This is just to get markers to also support dom touch events after creation

+

#TODO: find a better way of getting markers to support touch.

+ +

Install

You have four methods of installing Leaflet.Draw, copy the leaflet.draw.js, css, and images from dist and embed directly +into your application.

+

npm

+

To install the plugin run npm install leaflet-draw via command line in your project. +You must also require this in your project like so: var leafletDraw = require('leaflet-draw');

+

bower

+

To install the plugin run bower install leaflet-draw.

+

Builder

+

There is a custom builder at ../build/build.html to help make a custom package of Leaflet.Draw +with the command line.

+ +

CDN's

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
+
+ +

Options

You can configure the plugin by using the different options listed here. If you identify a typo or have a suggestion +for this section of the documentation, please edit docs-misc.leafdoc in the build directory.

+ +

Control.Draw

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
positionString'topleft'The initial position of the control (one of the map corners). See control positions.
drawDrawOptions{}The options used to configure the draw toolbar.
editEditPolyOptionsfalseThe options used to configure the edit toolbar.
+ +

DrawOptions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
polylinePolylineOptions{ }Polyline draw handler options. Set to false to disable handler.
polygonPolygonOptions{ }Polygon draw handler options. Set to false to disable handler.
rectangleRectangleOptions{ }Rectangle draw handler options. Set to false to disable handler.
circleCircleOptions{ }Circle draw handler options. Set to false to disable handler.
markerMarkerOptions{ }Marker draw handler options. Set to false to disable handler.
+ +

PolylineOptions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
allowIntersectionBooltrueDetermines if line segments can cross.
drawErrorObjectSee codeConfiguration options for the error that displays if an intersection is detected.
guidelineDistanceNumber20Distance in pixels between each guide dash.
shapeOptionsLeaflet Polyline optionsSee codeThe options used when drawing the polyline/polygon on the map.
metricBooltrueDetermines which measurement system (metric or imperial) is used.
zIndexOffsetNumber2000This should be a high number to ensure that you can draw over all other layers on the map.
repeatModeBoolfalseDetermines if the draw tool remains enabled after drawing a shape.
+ +

PolygonOptions

+ + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
showAreaBoolfalseShow the area of the drawn polygon in m², ha or km². The area is only approximate and become less accurate the larger the polygon is.
+ +

RectangleOptions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
shapeOptionsLeaflet Path optionsSee codeThe options used when drawing the rectangle on the map.
repeatModeBoolfalseDetermines if the draw tool remains enabled after drawing a shape.
showRadiusBooltrueShow the area of the drawn circle in m², ha or km². The area is only approximate and become less accurate the larger the circle is.
+ +

CircleOptions

+ + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
shapeOptionsLeaflet Path optionsSee codeThe options used when drawing the circle on the map.
repeatModeBoolfalseDetermines if the draw tool remains enabled after drawing a shape.
+ +

MarkerOptions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
iconLeaflet IconL.Icon.Default()The icon displayed when drawing a marker.
zIndexOffsetNumber2000This should be a high number to ensure that you can draw over all other layers on the map.
repeatModeBoolfalseDetermines if the draw tool remains enabled after drawing a shape.
+ +

EditPolyOptions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
featureGroupLeaflet FeatureGroupnullThis is the FeatureGroup that stores all editable shapes. THIS IS REQUIRED FOR THE EDIT TOOLBAR TO WORK
editEditHandlerOptions{ }Edit handler options. Set to false to disable handler.
removeDeleteHandlerOptions{ }Delete handler options. Set to false to disable handler.
polyEditPolyOptions{ }Set polygon editing options
allowIntersectionBooltrueDetermines if line segments can cross.
+ +

EditHandlerOptions

+ + + + + + + + + + + + + + + + +
OptionTypeDefaultDescription
selectedPathOptionsLeaflet Path optionsSee codeThe path options for how the layers will look while in edit mode. If this is set to null the editable path options will not be set.
+

Note: To maintain the original layer color of the layer use maintainColor: true within selectedPathOptions. +E.g. The edit options below will maintain the layer color and set the edit opacity to 0.3.

+
{
+    selectedPathOptions: {
+        maintainColor: true,
+        opacity: 0.3
+    }
+}
+
+ +

version

A constant that represents the Leaflet.Draw version in use.

+
    L.drawVersion; // contains "0.4.2" (or whatever version is currently in use)
+
+ + + +
+

© 2012 - 2017 Leaflet and Leaflet + Organization
+ Thanks to all our Contributors
+ Documentation generated with Leafdoc

+
+ +
+ + + + + + diff --git a/docs/leaflet-draw-latest.html b/docs/leaflet-draw-latest.html index b50adf741..4d3eef3f0 100644 --- a/docs/leaflet-draw-latest.html +++ b/docs/leaflet-draw-latest.html @@ -12,8 +12,8 @@ - - + +
@@ -1303,18 +1303,19 @@

Methods

geodesicArea() - void + number readableArea() - void + string - readableDistance() - void - + readableDistance(distance, isMetric, useFeet, isNauticalMile) + string +

Converts metric distance to distance string.

+ @@ -1339,13 +1340,15 @@

Methods

cloneLatLngs() - void - + L.LatLngs[] +

Clone the latLng point or points or nested points and return an array with those points

+ - cloneLatLng() - void - + cloneLatLng(LatLng) + L.LatLng +

Clone the latLng and return a new LatLng object.

+ @@ -1370,7 +1373,7 @@

Methods

segmentsIntersect() - void + boolean

Checks to see if two line segments intersect. Does not handle degenerate cases. http://compgeom.cs.uiuc.edu/~jeffe/teaching/373/notes/x06-sweepline.pdf

@@ -1425,21 +1428,21 @@

Methods

intersects() - void + boolean

Check to see if this polyline has any linesegments that intersect. NOTE: does not support detecting intersection for degenerate cases.

newLatLngIntersects() - void + boolean

Check for intersection if new latlng was added to this polyline. NOTE: does not support detecting intersection for degenerate cases.

newPointIntersects() - void + boolean

Check for intersection if new point was added to this polyline. newPoint must be a layer point. NOTE: does not support detecting intersection for degenerate cases.

@@ -1743,7 +1746,7 @@

Methods

-

L.Marker.Touch

This isn't full Touch support. This is just to get makers to also support dom touch events after creation

+

L.Marker.Touch

This isn't full Touch support. This is just to get markers to also support dom touch events after creation

#TODO: find a better way of getting markers to support touch.

Install

You have four methods of installing Leaflet.Draw, copy the leaflet.draw.js, css, and images from dist and embed directly diff --git a/package.json b/package.json index f99a42924..6e1730e1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet-draw", - "version": "0.4.3", + "version": "0.4.4", "description": "Vector drawing plugin for Leaflet", "devDependencies": { "eslint": "^3.5.0 <3.6.0",