d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    An example of a map presented with leaflet.js and the Leaflet.draw plugin with a a range of options.
forked from d3noob's block: Leaflet.draw plugin v1

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.draw Plugin</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>
    <link
        rel="stylesheet"
        href="leaflet.draw.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            crossorigin=""></script>
    <script
        src="Leaflet.draw.js">
    </script>


    <script>
        var map = L.map('map').setView([-41.2858, 174.78682], 14);
        mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

		var LeafIcon = L.Icon.extend({
			options: {
				shadowUrl:
				    'http://leafletjs.com/docs/images/leaf-shadow.png',
				iconSize:     [38, 95],
				shadowSize:   [50, 64],
				iconAnchor:   [22, 94],
				shadowAnchor: [4, 62],
				popupAnchor:  [-3, -76]
			}
		});

		var greenIcon = new LeafIcon({
			iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
			});

		var drawnItems = new L.FeatureGroup();
		map.addLayer(drawnItems);

		var drawControl = new L.Control.Draw({
			position: 'topright',
			draw: {
				polygon: {
					shapeOptions: {
						color: 'purple'
					},
					allowIntersection: false,
					drawError: {
						color: 'orange',
						timeout: 1000
					},
					showArea: true,
					metric: false,
					repeatMode: true
				},
				polyline: {
					shapeOptions: {
						color: 'red'
					},
				},
				rect: {
					shapeOptions: {
						color: 'green'
					},
				},
				circle: {
					shapeOptions: {
						color: 'steelblue'
					},
				},
				marker: {
					icon: greenIcon
				},
			},
			edit: {
				featureGroup: drawnItems
			}
		});
		map.addControl(drawControl);

		map.on('draw:created', function (e) {
			var type = e.layerType,
				layer = e.layer;

			if (type === 'marker') {
				layer.bindPopup('A popup!');
			}

			drawnItems.addLayer(layer);
		});

    </script>
</body>
</html>

## leaflet.draw.css
/* ================================================================== */
/* 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: 300px 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 a .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ================================================================== */
/* 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;
}

.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
	background-position: -273px -2px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
	background-position: -271px -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;
}

## Leaflet.draw.js
/**
 * Leaflet.draw assumes that you have already included the Leaflet library.
 */
L.drawVersion = '0.4.2';
/**
 * @class L.Draw
 * @aka Draw
 *
 *
 * To add the draw toolbar set the option drawControl: true in the map options.
 *
 * @example
 * ```js
 *      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.
 *
 * ```js
 *      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.Draw = {};

/**
 * @class L.drawLocal
 * @aka L.drawLocal
 *
 * The core toolbar class of the API — it is used to create the toolbar ui
 *
 * @example
 * ```js
 *      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.drawLocal = {
	// format: {
	// 	numeric: {
	// 		delimiters: {
	// 			thousands: ',',
	// 			decimal: '.'
	// 		}
	// 	}
	// },
	draw: {
		toolbar: {
			// #TODO: this should be reorganized where actions are nested in actions
			// ex: actions.undo  or actions.cancel
			actions: {
				title: 'Cancel drawing',
				text: 'Cancel'
			},
			finish: {
				title: 'Finish drawing',
				text: 'Finish'
			},
			undo: {
				title: 'Delete last point drawn',
				text: 'Delete last point'
			},
			buttons: {
				polyline: 'Draw a polyline',
				polygon: 'Draw a polygon',
				rectangle: 'Draw a rectangle',
				circle: 'Draw a circle',
				marker: 'Draw a marker',
				circlemarker: 'Draw a circlemarker'
			}
		},
		handlers: {
			circle: {
				tooltip: {
					start: 'Click and drag to draw circle.'
				},
				radius: 'Radius'
			},
			circlemarker: {
				tooltip: {
					start: 'Click map to place circle marker.'
				}
			},
			marker: {
				tooltip: {
					start: 'Click map to place marker.'
				}
			},
			polygon: {
				tooltip: {
					start: 'Click to start drawing shape.',
					cont: 'Click to continue drawing shape.',
					end: 'Click first point to close this shape.'
				}
			},
			polyline: {
				error: '<strong>Error:</strong> shape edges cannot cross!',
				tooltip: {
					start: 'Click to start drawing line.',
					cont: 'Click to continue drawing line.',
					end: 'Click last point to finish line.'
				}
			},
			rectangle: {
				tooltip: {
					start: 'Click and drag to draw rectangle.'
				}
			},
			simpleshape: {
				tooltip: {
					end: 'Release mouse to finish drawing.'
				}
			}
		}
	},
	edit: {
		toolbar: {
			actions: {
				save: {
					title: 'Save changes',
					text: 'Save'
				},
				cancel: {
					title: 'Cancel editing, discards all changes',
					text: 'Cancel'
				},
				clearAll: {
					title: 'Clear all layers',
					text: 'Clear All'
				}
			},
			buttons: {
				edit: 'Edit layers',
				editDisabled: 'No layers to edit',
				remove: 'Delete layers',
				removeDisabled: 'No layers to delete'
			}
		},
		handlers: {
			edit: {
				tooltip: {
					text: 'Drag handles or markers to edit features.',
					subtext: 'Click cancel to undo changes.'
				}
			},
			remove: {
				tooltip: {
					text: 'Click on a feature to remove.'
				}
			}
		}
	}
};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet.draw Plugin</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
	integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
	crossorigin=""/>
	<link
	rel="stylesheet"
	href="leaflet.draw.css"
	/>
	</head>
	<body>
	<div id="map" style="width: 600px; height: 400px"></div>

	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
	integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
	crossorigin=""></script>
	<script
	src="Leaflet.draw.js">
	</script>



	<script>
	var map = L.map('map').setView([-41.2858, 174.78682], 14);
	mapLink =
	'<a href="http://openstreetmap.org">OpenStreetMap</a>';
	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© ' + mapLink + ' Contributors',
	maxZoom: 18,
	}).addTo(map);

	var LeafIcon = L.Icon.extend({
	options: {
	shadowUrl:
	'http://leafletjs.com/docs/images/leaf-shadow.png',
	iconSize: [38, 95],
	shadowSize: [50, 64],
	iconAnchor: [22, 94],
	shadowAnchor: [4, 62],
	popupAnchor: [-3, -76]
	}
	});

	var greenIcon = new LeafIcon({
	iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
	});

	var drawnItems = new L.FeatureGroup();
	map.addLayer(drawnItems);

	var drawControl = new L.Control.Draw({
	position: 'topright',
	draw: {
	polygon: {
	shapeOptions: {
	color: 'purple'
	},
	allowIntersection: false,
	drawError: {
	color: 'orange',
	timeout: 1000
	},
	showArea: true,
	metric: false,
	repeatMode: true
	},
	polyline: {
	shapeOptions: {
	color: 'red'
	},
	},
	rect: {
	shapeOptions: {
	color: 'green'
	},
	},
	circle: {
	shapeOptions: {
	color: 'steelblue'
	},
	},
	marker: {
	icon: greenIcon
	},
	},
	edit: {
	featureGroup: drawnItems
	}
	});
	map.addControl(drawControl);

	map.on('draw:created', function (e) {
	var type = e.layerType,
	layer = e.layer;

	if (type === 'marker') {
	layer.bindPopup('A popup!');
	}

	drawnItems.addLayer(layer);
	});

	</script>
	</body>
	</html>
	/* ================================================================== */
	/* 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: 300px 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 a .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	}

	/* ================================================================== */
	/* 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;
	}

	.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
	background-position: -273px -2px;
	}

	.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
	background-position: -271px -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;
	}
	/**
	* Leaflet.draw assumes that you have already included the Leaflet library.
	*/
	L.drawVersion = '0.4.2';
	/**
	* @class L.Draw
	* @aka Draw
	*
	*
	* To add the draw toolbar set the option drawControl: true in the map options.
	*
	* @example
	* ```js
	* 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: '© <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.
	*
	* ```js
	* var map = L.map('map').setView([51.505, -0.09], 13);
	*
	* L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	* attribution: '© <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.Draw = {};

	/**
	* @class L.drawLocal
	* @aka L.drawLocal
	*
	* The core toolbar class of the API — it is used to create the toolbar ui
	*
	* @example
	* ```js
	* 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.drawLocal = {
	// format: {
	// numeric: {
	// delimiters: {
	// thousands: ',',
	// decimal: '.'
	// }
	// }
	// },
	draw: {
	toolbar: {
	// #TODO: this should be reorganized where actions are nested in actions
	// ex: actions.undo or actions.cancel
	actions: {
	title: 'Cancel drawing',
	text: 'Cancel'
	},
	finish: {
	title: 'Finish drawing',
	text: 'Finish'
	},
	undo: {
	title: 'Delete last point drawn',
	text: 'Delete last point'
	},
	buttons: {
	polyline: 'Draw a polyline',
	polygon: 'Draw a polygon',
	rectangle: 'Draw a rectangle',
	circle: 'Draw a circle',
	marker: 'Draw a marker',
	circlemarker: 'Draw a circlemarker'
	}
	},
	handlers: {
	circle: {
	tooltip: {
	start: 'Click and drag to draw circle.'
	},
	radius: 'Radius'
	},
	circlemarker: {
	tooltip: {
	start: 'Click map to place circle marker.'
	}
	},
	marker: {
	tooltip: {
	start: 'Click map to place marker.'
	}
	},
	polygon: {
	tooltip: {
	start: 'Click to start drawing shape.',
	cont: 'Click to continue drawing shape.',
	end: 'Click first point to close this shape.'
	}
	},
	polyline: {
	error: '<strong>Error:</strong> shape edges cannot cross!',
	tooltip: {
	start: 'Click to start drawing line.',
	cont: 'Click to continue drawing line.',
	end: 'Click last point to finish line.'
	}
	},
	rectangle: {
	tooltip: {
	start: 'Click and drag to draw rectangle.'
	}
	},
	simpleshape: {
	tooltip: {
	end: 'Release mouse to finish drawing.'
	}
	}
	}
	},
	edit: {
	toolbar: {
	actions: {
	save: {
	title: 'Save changes',
	text: 'Save'
	},
	cancel: {
	title: 'Cancel editing, discards all changes',
	text: 'Cancel'
	},
	clearAll: {
	title: 'Clear all layers',
	text: 'Clear All'
	}
	},
	buttons: {
	edit: 'Edit layers',
	editDisabled: 'No layers to edit',
	remove: 'Delete layers',
	removeDisabled: 'No layers to delete'
	}
	},
	handlers: {
	edit: {
	tooltip: {
	text: 'Drag handles or markers to edit features.',
	subtext: 'Click cancel to undo changes.'
	}
	},
	remove: {
	tooltip: {
	text: 'Click on a feature to remove.'
	}
	}
	}
	}
	};