Port to Leaflet

vendor/assets/leaflet/leaflet.css

@@ -0,0 +1,378 @@
+/* required styles */
+
+.leaflet-map-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-pane,
+.leaflet-overlay-pane,
+.leaflet-shadow-pane,
+.leaflet-marker-pane,
+.leaflet-popup-pane,
+.leaflet-overlay-pane svg,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer { /* TODO optimize classes */
+	position: absolute;
+	}
+.leaflet-container {
+	overflow: hidden;
+	outline: 0;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+.leaflet-clickable {
+	cursor: pointer;
+	}
+.leaflet-dragging, .leaflet-dragging .leaflet-clickable {
+	cursor: move;
+	}
+.leaflet-container img {
+    /* map is broken in FF if you have max-width: 100% on tiles */
+	max-width: none !important;
+	}
+.leaflet-container img.leaflet-image-layer {
+    /* stupid Android 2 doesn't understand "max-width: none" properly */
+    max-width: 15000px !important;
+    }
+
+.leaflet-tile-pane { z-index: 2; }
+.leaflet-objects-pane { z-index: 3; }
+.leaflet-overlay-pane { z-index: 4; }
+.leaflet-shadow-pane { z-index: 5; }
+.leaflet-marker-pane { z-index: 6; }
+.leaflet-popup-pane { z-index: 7; }
+
+.leaflet-tile {
+    filter: inherit;
+    visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+
+.leaflet-zoom-box {
+    width: 0;
+    height: 0;
+    }
+
+/* Leaflet controls */
+
+.leaflet-control {
+	position: relative;
+	z-index: 7;
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+.leaflet-control-zoom {
+	-moz-border-radius: 7px;
+	-webkit-border-radius: 7px;
+	border-radius: 7px;
+	}
+.leaflet-control-zoom {
+	padding: 5px;
+	background: rgba(0, 0, 0, 0.25);
+	}
+.leaflet-control-zoom a {
+	background-color: rgba(255, 255, 255, 0.75);
+	}
+.leaflet-control-zoom a, .leaflet-control-layers a {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-control-zoom a {
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	width: 19px;
+	height: 19px;
+	}
+.leaflet-control-zoom a:hover {
+	background-color: #fff;
+	}
+.leaflet-touch .leaflet-control-zoom a {
+	width: 27px;
+	height: 27px;
+	}
+.leaflet-control-zoom-in {
+	background-image: url(images/zoom-in.png);
+	margin-bottom: 5px;
+	}
+.leaflet-control-zoom-out {
+	background-image: url(images/zoom-out.png);
+	}
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 7px #999;
+	background: #f8f8f9;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+	}
+.leaflet-control-layers a {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-touch .leaflet-control-layers a {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers input {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+.leaflet-container .leaflet-control-attribution {
+	background-color: rgba(255, 255, 255, 0.7);
+	box-shadow: 0 0 5px #bbb;
+	margin: 0;
+    }
+
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	color: black;
+	line-height: 1;
+	font-size: 10px;
+	padding-bottom: 2px;
+	text-shadow: 1px 1px 1px #fff;
+	background-color: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	padding-top: 1px;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers {
+	border: 5px solid #bbb;
+	}
+
+
+/* Zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+
+	-webkit-transition: opacity 0.2s linear;
+	-moz-transition: opacity 0.2s linear;
+	-o-transition: opacity 0.2s linear;
+	transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	-moz-transition: -moz-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	-o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	}
+
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile,
+.leaflet-touching .leaflet-zoom-animated {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+    }
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* Popup layout */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	}
+.leaflet-popup-content {
+	margin: 14px 20px;
+	}
+.leaflet-popup-tip-container {
+	margin: 0 auto;
+	width: 40px;
+	height: 20px;
+	position: relative;
+	overflow: hidden;
+	}
+.leaflet-popup-tip {
+	width: 15px;
+	height: 15px;
+	padding: 1px;
+
+	margin: -8px auto 0;
+
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 5px 0 0;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+
+/* Visual appearance */
+
+.leaflet-container {
+	background: #ddd;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+    outline: 2px solid orange;
+    }
+.leaflet-zoom-box {
+	border: 2px dotted #05f;
+	background: white;
+	opacity: 0.5;
+	}
+.leaflet-div-icon {
+    background: #fff;
+    border: 1px solid #666;
+    }
+.leaflet-editing-icon {
+    border-radius: 2px;
+    }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+	background: white;
+
+	box-shadow: 0 3px 14px rgba(0,0,0,0.35);
+	-webkit-box-shadow: 0 3px 18px rgba(0,0,0,0.33);
+	}
+.leaflet-popup-content-wrapper {
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	}
+.leaflet-popup-content {
+	font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}

vendor/assets/leaflet/leaflet.draw.css

@@ -0,0 +1,130 @@
+/* Leaflet controls */
+
+.leaflet-control-draw {
+	background-color: rgba(0, 0, 0, 0.25);
+	-webkit-border-radius: 7px;
+	   -moz-border-radius: 7px;
+	        border-radius: 7px;
+	padding: 5px;
+}
+
+.leaflet-control-draw a {
+	background-color: rgba(255, 255, 255, 0.75);
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	-webkit-border-radius: 4px;
+	   -moz-border-radius: 4px;
+	        border-radius: 4px;
+	display: block;
+	margin-top: 5px;
+	width: 19px;
+	height: 19px;
+}
+
+.leaflet-control-draw a:first-child{
+	margin-top: 0;
+} 	
+
+.leaflet-control-draw a:hover {
+	background-color: #fff;
+}
+
+.leaflet-touch .leaflet-control-draw a {
+	width: 27px;
+	height: 27px;
+}	
+
+.leaflet-control-draw-polyline {
+	background-image: url(images/draw-polyline.png);
+}
+
+.leaflet-control-draw-polygon {
+	background-image: url(images/draw-polygon.png);
+}
+
+.leaflet-control-draw-rectangle {
+	background-image: url(images/draw-rectangle.png);
+}
+
+.leaflet-control-draw-circle {
+	background-image: url(images/draw-circle.png);
+}
+
+.leaflet-control-draw-marker {
+	background-image: url(images/draw-marker-icon.png);
+}
+
+.leaflet-mouse-marker {
+	background-color: #fff;
+	cursor: crosshair;
+}
+
+.leaflet-draw-label {
+	background-color: #fff;
+	border: 1px solid #ccc;
+	color: #222;
+	font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	margin-left: 20px;
+	margin-top: -21px;
+	padding: 2px 4px;
+	position: absolute;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-error-draw-label {
+	background-color: #F2DEDE;
+	border-color: #E6B6BD;
+	color: #B94A48;
+}
+
+.leaflet-draw-label-single {
+	margin-top: -12px
+}
+
+.leaflet-draw-label-subtext {
+	color: #999;
+}
+
+.leaflet-draw-guide-dash {
+	font-size: 1%;
+	opacity: 0.6;
+	position: absolute;
+	width: 5px;
+	height: 5px;
+}
+
+.leaflet-flash-anim {
+	-webkit-animation-duration: 0.66s;
+	   -moz-animation-duration: 0.66s;
+	     -o-animation-duration: 0.66s;
+	        animation-duration: 0.66s;
+	-webkit-animation-fill-mode: both;
+	   -moz-animation-fill-mode: both;
+	     -o-animation-fill-mode: both;
+	        animation-fill-mode: both;
+	-webkit-animation-name: leaflet-flash;
+	   -moz-animation-name: leaflet-flash;
+	     -o-animation-name: leaflet-flash;
+	        animation-name: leaflet-flash;
+}
+
+@-webkit-keyframes leaflet-flash {
+	0%, 50%, 100% { opacity: 1; }	
+	25%, 75% { opacity: 0.3; }
+}
+
+@-moz-keyframes leaflet-flash {
+	0%, 50%, 100% { opacity: 1; }	
+	25%, 75% { opacity: 0.3; }
+}
+
+@-o-keyframes leaflet-flash {
+	0%, 50%, 100% { opacity: 1; }	
+	25%, 75% { opacity: 0.3; }
+}
+
+@keyframes leaflet-flash {
+	0%, 50%, 100% { opacity: 1; }	
+	25%, 75% { opacity: 0; }
+}

vendor/assets/leaflet/leaflet.draw.ie.css

@@ -0,0 +1,10 @@
+/* Conditional stylesheet for IE. */
+
+.leaflet-control-draw {
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000', EndColorStr='#3F000000');
+}
+
+.leaflet-control-draw a {
+	background-color: #eee;
+	filter: alpha(opacity=90);
+}

vendor/assets/leaflet/leaflet.draw.js

@@ -0,0 +1,931 @@
+/*
+ Copyright (c) 2012, Smartrak, Jacob Toye
+ Leaflet.draw is an open-source JavaScript library for drawing shapes/markers on leaflet powered maps.
+ https://github.com/jacobtoye/Leaflet.draw
+*/
+(function (window, undefined) {
+
+L.drawVersion = '0.1.4';
+
+L.Util.extend(L.LineUtil, {
+	// 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
+	segmentsIntersect: function (/*Point*/ p, /*Point*/ p1, /*Point*/ p2, /*Point*/ p3) {
+		return	this._checkCounterclockwise(p, p2, p3) !==
+				this._checkCounterclockwise(p1, p2, p3) &&
+				this._checkCounterclockwise(p, p1, p2) !==
+				this._checkCounterclockwise(p, p1, p3);
+	},
+
+	// check to see if points are in counterclockwise order
+	_checkCounterclockwise: function (/*Point*/ p, /*Point*/ p1, /*Point*/ p2) {
+		return (p2.y - p.y) * (p1.x - p.x) > (p1.y - p.y) * (p2.x - p.x);
+	}
+});
+
+L.Polyline.include({
+	// Check to see if this polyline has any linesegments that intersect.
+	// NOTE: does not support detecting intersection for degenerate cases.
+	intersects: function () {
+		var points = this._originalPoints,
+			len = points ? points.length : 0,
+			i, j, p, p1, p2, p3;
+
+		if (this._tooFewPointsForIntersection()) {
+			return false;
+		}
+
+		for (i = len - 1; i >= 3; i--) {
+			p = points[i - 1];
+			p1 = points[i];
+
+			
+			if (this._lineSegmentsIntersectsRange(p, p1, i - 2)) {
+				return true;
+			}
+		}
+
+		return false;
+	},
+
+	// Check for intersection if new latlng was added to this polyline.
+	// NOTE: does not support detecting intersection for degenerate cases.
+	newLatLngIntersects: function (latlng, skipFirst) {
+		// Cannot check a polyline for intersecting lats/lngs when not added to the map
+		if (!this._map) {
+			return false;
+		}
+
+		return this.newPointIntersects(this._map.latLngToLayerPoint(latlng), skipFirst);
+	},
+
+	// 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.
+	newPointIntersects: function (newPoint, skipFirst) {
+		var points = this._originalPoints,
+			len = points ? points.length : 0,
+			lastPoint = points ? points[len - 1] : null,
+			// The previous previous line segment. Previous line segement doesn't need testing.
+			maxIndex = len - 2;
+
+		if (this._tooFewPointsForIntersection(1)) {
+			return false;
+		}
+
+		return this._lineSegmentsIntersectsRange(lastPoint, newPoint, maxIndex, skipFirst ? 1 : 0);
+	},
+
+	// Polylines with 2 sides can only intersect in cases where points are collinear (we don't support detecting these).
+	// Cannot have intersection when < 3 line segments (< 4 points)
+	_tooFewPointsForIntersection: function (extraPoints) {
+		var points = this._originalPoints,
+			len = points ? points.length : 0;
+		// Increment length by extraPoints if present
+		len += extraPoints || 0;
+
+		return !this._originalPoints || len <= 3;
+	},
+
+	// Checks a line segment intersections with any line segements before its predecessor.
+	// Don't need to check the predecessor as will never intersect.
+	_lineSegmentsIntersectsRange: function (p, p1, maxIndex, minIndex) {
+		var points = this._originalPoints,
+			p2, p3;
+
+		minIndex = minIndex || 0;
+
+		// Check all previous line segments (beside the immediately previous) for intersections
+		for (var j = maxIndex; j > minIndex; j--) {
+			p2 = points[j - 1];
+			p3 = points[j];
+
+			if (L.LineUtil.segmentsIntersect(p, p1, p2, p3)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+});
+
+L.Polygon.include({
+	// Checks a polygon for any intersecting line segments. Ignores holes.
+	intersects: function () {
+		var polylineIntersects,
+			points = this._originalPoints,
+			len, firstPoint, lastPoint, maxIndex;
+
+		if (this._tooFewPointsForIntersection()) {
+			return false;
+		}
+
+		polylineIntersects = L.Polyline.prototype.intersects.call(this);
+
+		// If already found an intersection don't need to check for any more.
+		if (polylineIntersects) {
+			return true;
+		}
+
+		len = points.length;
+		firstPoint = points[0];
+		lastPoint = points[len - 1];
+		maxIndex = len - 2;
+
+		// Check the line segment between last and first point. Don't need to check the first line segment (minIndex = 1)
+		return this._lineSegmentsIntersectsRange(lastPoint, firstPoint, maxIndex, 1);
+	}
+});
+
+L.Handler.Draw = L.Handler.extend({
+	includes: L.Mixin.Events,
+
+	initialize: function (map, options) {
+		this._map = map;
+		this._container = map._container;
+		this._overlayPane = map._panes.overlayPane;
+		this._popupPane = map._panes.popupPane;
+
+		// Merge default shapeOptions options with custom shapeOptions
+		if (options && options.shapeOptions) {
+			options.shapeOptions = L.Util.extend({}, this.options.shapeOptions, options.shapeOptions);
+		}
+		L.Util.extend(this.options, options);
+	},
+
+	enable: function () {
+		this.fire('activated');
+		L.Handler.prototype.enable.call(this);
+	},
+	
+	addHooks: function () {
+		if (this._map) {
+			L.DomUtil.disableTextSelection();
+
+			this._label = L.DomUtil.create('div', 'leaflet-draw-label', this._popupPane);
+			this._singleLineLabel = false;
+
+			L.DomEvent.addListener(this._container, 'keyup', this._cancelDrawing, this);
+		}
+	},
+
+	removeHooks: function () {
+		if (this._map) {
+			L.DomUtil.enableTextSelection();
+
+			this._popupPane.removeChild(this._label);
+			delete this._label;
+
+			L.DomEvent.removeListener(this._container, 'keyup', this._cancelDrawing);
+		}
+	},
+
+	_updateLabelText: function (labelText) {
+		labelText.subtext = labelText.subtext || '';
+
+		// update the vertical position (only if changed)
+		if (labelText.subtext.length === 0 && !this._singleLineLabel) {
+			L.DomUtil.addClass(this._label, 'leaflet-draw-label-single');
+			this._singleLineLabel = true;
+		}
+		else if (labelText.subtext.length > 0 && this._singleLineLabel) {
+			L.DomUtil.removeClass(this._label, 'leaflet-draw-label-single');
+			this._singleLineLabel = false;
+		}
+
+		this._label.innerHTML =
+			(labelText.subtext.length > 0 ? '<span class="leaflet-draw-label-subtext">' + labelText.subtext + '</span>' + '<br />' : '') +
+			'<span>' + labelText.text + '</span>';
+	},
+
+	_updateLabelPosition: function (pos) {
+		L.DomUtil.setPosition(this._label, pos);
+	},
+
+	// Cancel drawing when the escape key is pressed
+	_cancelDrawing: function (e) {
+		if (e.keyCode === 27) {
+			this.disable();
+		}
+	}
+});
+
+L.Polyline.Draw = L.Handler.Draw.extend({
+	Poly: L.Polyline,
+
+	options: {
+		allowIntersection: true,
+		drawError: {
+			color: '#b00b00',
+			message: '<strong>Error:</strong> shape edges cannot cross!',
+			timeout: 2500
+		},
+		icon: new L.DivIcon({
+			iconSize: new L.Point(8, 8),
+			className: 'leaflet-div-icon leaflet-editing-icon'
+		}),
+		guidelineDistance: 20,
+		shapeOptions: {
+			stroke: true,
+			color: '#f06eaa',
+			weight: 4,
+			opacity: 0.5,
+			fill: false,
+			clickable: true
+		},
+		zIndexOffset: 2000 // This should be > than the highest z-index any map layers
+	},
+
+	initialize: function (map, options) {
+		// Merge default drawError options with custom options
+		if (options && options.drawError) {
+			options.drawError = L.Util.extend({}, this.options.drawError, options.drawError);
+		}
+		L.Handler.Draw.prototype.initialize.call(this, map, options);
+	},
+	
+	addHooks: function () {
+		L.Handler.Draw.prototype.addHooks.call(this);
+		if (this._map) {
+			this._markers = [];
+
+			this._markerGroup = new L.LayerGroup();
+			this._map.addLayer(this._markerGroup);
+
+			this._poly = new L.Polyline([], this.options.shapeOptions);
+
+			this._updateLabelText(this._getLabelText());
+
+			// Make a transparent marker that will used to catch click events. These click
+			// events will create the vertices. We need to do this so we can ensure that
+			// we can create vertices over other map layers (markers, vector layers). We
+			// also do not want to trigger any click handlers of objects we are clicking on
+			// while drawing.
+			if (!this._mouseMarker) {
+				this._mouseMarker = L.marker(this._map.getCenter(), {
+					icon: L.divIcon({
+						className: 'leaflet-mouse-marker',
+						iconAnchor: [20, 20],
+						iconSize: [40, 40]
+					}),
+					opacity: 0,
+					zIndexOffset: this.options.zIndexOffset
+				});
+			}
+
+			this._mouseMarker
+				.on('click', this._onClick, this)
+				.addTo(this._map);
+
+			this._map.on('mousemove', this._onMouseMove, this);
+		}
+	},
+
+	removeHooks: function () {
+		L.Handler.Draw.prototype.removeHooks.call(this);
+
+		this._clearHideErrorTimeout();
+
+		this._cleanUpShape();
+		
+		// remove markers from map
+		this._map.removeLayer(this._markerGroup);
+		delete this._markerGroup;
+		delete this._markers;
+
+		this._map.removeLayer(this._poly);
+		delete this._poly;
+
+		this._mouseMarker.off('click', this._onClick);
+		this._map.removeLayer(this._mouseMarker);
+		delete this._mouseMarker;
+
+		// clean up DOM
+		this._clearGuides();
+
+		this._map.off('mousemove', this._onMouseMove);
+	},
+
+	_finishShape: function () {
+		if (!this.options.allowIntersection && this._poly.newLatLngIntersects(this._poly.getLatLngs()[0], true)) {
+			this._showErrorLabel();
+			return;
+		}
+		if (!this._shapeIsValid()) {
+			this._showErrorLabel();
+			return;
+		}
+
+		this._map.fire(
+			'draw:poly-created',
+			{ poly: new this.Poly(this._poly.getLatLngs(), this.options.shapeOptions) }
+		);
+		this.disable();
+	},
+
+	//Called to verify the shape is valid when the user tries to finish it
+	//Return false if the shape is not valid
+	_shapeIsValid: function () {
+		return true;
+	},
+
+	_onMouseMove: function (e) {
+		var newPos = e.layerPoint,
+			latlng = e.latlng,
+			markerCount = this._markers.length;
+
+		// Save latlng
+		this._currentLatLng = latlng;
+
+		// update the label
+		this._updateLabelPosition(newPos);
+
+		if (markerCount > 0) {
+			this._updateLabelText(this._getLabelText());
+			// draw the guide line
+			this._clearGuides();
+			this._drawGuide(
+				this._map.latLngToLayerPoint(this._markers[markerCount - 1].getLatLng()),
+				newPos
+			);
+		}
+
+		// Update the mouse marker position
+		this._mouseMarker.setLatLng(latlng);
+
+		L.DomEvent.preventDefault(e.originalEvent);
+	},
+
+	_onClick: function (e) {
+		var latlng = e.target.getLatLng(),
+			markerCount = this._markers.length;
+
+		if (markerCount > 0 && !this.options.allowIntersection && this._poly.newLatLngIntersects(latlng)) {
+			this._showErrorLabel();
+			return;
+		}
+		else if (this._errorShown) {
+			this._hideErrorLabel();
+		}
+
+		this._markers.push(this._createMarker(latlng));
+
+		this._poly.addLatLng(latlng);
+
+		if (this._poly.getLatLngs().length === 2) {
+			this._map.addLayer(this._poly);
+		}
+
+		this._updateMarkerHandler();
+
+		this._vertexAdded(latlng);
+	},
+
+	_updateMarkerHandler: function () {
+		// The last marker shold have a click handler to close the polyline
+		if (this._markers.length > 1) {
+			this._markers[this._markers.length - 1].on('click', this._finishShape, this);
+		}
+		
+		// Remove the old marker click handler (as only the last point should close the polyline)
+		if (this._markers.length > 2) {
+			this._markers[this._markers.length - 2].off('click', this._finishShape);
+		}
+	},
+	
+	_createMarker: function (latlng) {
+		var marker = new L.Marker(latlng, {
+			icon: this.options.icon,
+			zIndexOffset: this.options.zIndexOffset * 2
+		});
+		
+		this._markerGroup.addLayer(marker);
+
+		return marker;
+	},
+
+	_drawGuide: function (pointA, pointB) {
+		var length = Math.floor(Math.sqrt(Math.pow((pointB.x - pointA.x), 2) + Math.pow((pointB.y - pointA.y), 2))),
+			i,
+			fraction,
+			dashPoint,
+			dash;
+
+		//create the guides container if we haven't yet (TODO: probaly shouldn't do this every time the user starts to draw?)
+		if (!this._guidesContainer) {
+			this._guidesContainer = L.DomUtil.create('div', 'leaflet-draw-guides', this._overlayPane);
+		}
+	
+		//draw a dash every GuildeLineDistance
+		for (i = this.options.guidelineDistance; i < length; i += this.options.guidelineDistance) {
+			//work out fraction along line we are
+			fraction = i / length;
+
+			//calculate new x,y point
+			dashPoint = {
+				x: Math.floor((pointA.x * (1 - fraction)) + (fraction * pointB.x)),
+				y: Math.floor((pointA.y * (1 - fraction)) + (fraction * pointB.y))
+			};
+
+			//add guide dash to guide container
+			dash = L.DomUtil.create('div', 'leaflet-draw-guide-dash', this._guidesContainer);
+			dash.style.backgroundColor =
+				!this._errorShown ? this.options.shapeOptions.color : this.options.drawError.color;
+
+			L.DomUtil.setPosition(dash, dashPoint);
+		}
+	},
+
+	_updateGuideColor: function (color) {
+		if (this._guidesContainer) {
+			for (var i = 0, l = this._guidesContainer.childNodes.length; i < l; i++) {
+				this._guidesContainer.childNodes[i].style.backgroundColor = color;
+			}
+		}
+	},
+
+	// removes all child elements (guide dashes) from the guides container
+	_clearGuides: function () {
+		if (this._guidesContainer) {
+			while (this._guidesContainer.firstChild) {
+				this._guidesContainer.removeChild(this._guidesContainer.firstChild);
+			}
+		}
+	},
+
+	_updateLabelText: function (labelText) {
+		if (!this._errorShown) {
+			L.Handler.Draw.prototype._updateLabelText.call(this, labelText);
+		}
+	},
+
+	_getLabelText: function () {
+		var labelText,
+			distance,
+			distanceStr;
+
+		if (this._markers.length === 0) {
+			labelText = {
+				text: 'Click to start drawing line.'
+			};
+		} else {
+			// calculate the distance from the last fixed point to the mouse position
+			distance = this._measurementRunningTotal + this._currentLatLng.distanceTo(this._markers[this._markers.length - 1].getLatLng());
+			// show metres when distance is < 1km, then show km
+			distanceStr = distance  > 1000 ? (distance  / 1000).toFixed(2) + ' km' : Math.ceil(distance) + ' m';
+			
+			if (this._markers.length === 1) {
+				labelText = {
+					text: 'Click to continue drawing line.',
+					subtext: distanceStr
+				};
+			} else {
+				labelText = {
+					text: 'Click last point to finish line.',
+					subtext: distanceStr
+				};
+			}
+		}
+		return labelText;
+	},
+
+	_showErrorLabel: function () {
+		this._errorShown = true;
+
+		// Update label
+		L.DomUtil.addClass(this._label, 'leaflet-error-draw-label');
+		L.DomUtil.addClass(this._label, 'leaflet-flash-anim');
+		L.Handler.Draw.prototype._updateLabelText.call(this, { text: this.options.drawError.message });
+
+		// Update shape
+		this._updateGuideColor(this.options.drawError.color);
+		this._poly.setStyle({ color: this.options.drawError.color });
+
+		// Hide the error after 2 seconds
+		this._clearHideErrorTimeout();
+		this._hideErrorTimeout = setTimeout(L.Util.bind(this._hideErrorLabel, this), this.options.drawError.timeout);
+	},
+
+	_hideErrorLabel: function () {
+		this._errorShown = false;
+
+		this._clearHideErrorTimeout();
+		
+		// Revert label
+		L.DomUtil.removeClass(this._label, 'leaflet-error-draw-label');
+		L.DomUtil.removeClass(this._label, 'leaflet-flash-anim');
+		this._updateLabelText(this._getLabelText());
+
+		// Revert shape
+		this._updateGuideColor(this.options.shapeOptions.color);
+		this._poly.setStyle({ color: this.options.shapeOptions.color });
+	},
+
+	_clearHideErrorTimeout: function () {
+		if (this._hideErrorTimeout) {
+			clearTimeout(this._hideErrorTimeout);
+			this._hideErrorTimeout = null;
+		}
+	},
+
+	_vertexAdded: function (latlng) {
+		if (this._markers.length === 1) {
+			this._measurementRunningTotal = 0;
+		}
+		else {
+			this._measurementRunningTotal +=
+				latlng.distanceTo(this._markers[this._markers.length - 2].getLatLng());
+		}
+	},
+
+	_cleanUpShape: function () {
+		if (this._markers.length > 0) {
+			this._markers[this._markers.length - 1].off('click', this._finishShape);
+		}
+	}
+});
+
+L.Polygon.Draw = L.Polyline.Draw.extend({
+	Poly: L.Polygon,
+
+	options: {
+		shapeOptions: {
+			stroke: true,
+			color: '#f06eaa',
+			weight: 4,
+			opacity: 0.5,
+			fill: true,
+			fillColor: null, //same as color by default
+			fillOpacity: 0.2,
+			clickable: false
+		}
+	},
+
+	_updateMarkerHandler: function () {
+		// The first marker shold have a click handler to close the polygon
+		if (this._markers.length === 1) {
+			this._markers[0].on('click', this._finishShape, this);
+		}
+	},
+
+	_getLabelText: function () {
+		var text;
+		if (this._markers.length === 0) {
+			text = 'Click to start drawing shape.';
+		} else if (this._markers.length < 3) {
+			text = 'Click to continue drawing shape.';
+		} else {
+			text = 'Click first point to close this shape.';
+		}
+		return {
+			text: text
+		};
+	},
+
+	_shapeIsValid: function () {
+		return this._markers.length >= 3;
+	},
+
+	_vertexAdded: function (latlng) {
+		//calc area here
+	},
+
+	_cleanUpShape: function () {
+		if (this._markers.length > 0) {
+			this._markers[0].off('click', this._finishShape);
+		}
+	}
+});
+
+L.SimpleShape = {};
+
+L.SimpleShape.Draw = L.Handler.Draw.extend({
+	addHooks: function () {
+		L.Handler.Draw.prototype.addHooks.call(this);
+		if (this._map) {
+			this._map.dragging.disable();
+			//TODO refactor: move cursor to styles
+			this._container.style.cursor = 'crosshair';
+
+			this._updateLabelText({ text: this._initialLabelText });
+
+			this._map
+				.on('mousedown', this._onMouseDown, this)
+				.on('mousemove', this._onMouseMove, this);
+
+		}
+	},
+
+	removeHooks: function () {
+		L.Handler.Draw.prototype.removeHooks.call(this);
+		if (this._map) {
+			this._map.dragging.enable();
+			//TODO refactor: move cursor to styles
+			this._container.style.cursor = '';
+
+			this._map
+				.off('mousedown', this._onMouseDown, this)
+				.off('mousemove', this._onMouseMove, this);
+
+			L.DomEvent.off(document, 'mouseup', this._onMouseUp);
+
+			// If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
+			if (this._shape) {
+				this._map.removeLayer(this._shape);
+				delete this._shape;
+			}
+		}
+		this._isDrawing = false;
+	},
+
+	_onMouseDown: function (e) {
+		this._isDrawing = true;
+		this._startLatLng = e.latlng;
+
+		L.DomEvent
+			.on(document, 'mouseup', this._onMouseUp, this)
+			.preventDefault(e.originalEvent);
+	},
+
+	_onMouseMove: function (e) {
+		var layerPoint = e.layerPoint,
+				latlng = e.latlng;
+
+		this._updateLabelPosition(layerPoint);
+		if (this._isDrawing) {
+			this._updateLabelText({ text: 'Release mouse to finish drawing.' });
+			this._drawShape(latlng);
+		}
+	},
+
+	_onMouseUp: function (e) {
+		if (this._shape) {
+			this._fireCreatedEvent();
+		}
+		
+		this.disable();
+	}
+});
+
+L.Circle.Draw = L.SimpleShape.Draw.extend({
+	options: {
+		shapeOptions: {
+			stroke: true,
+			color: '#f06eaa',
+			weight: 4,
+			opacity: 0.5,
+			fill: true,
+			fillColor: null, //same as color by default
+			fillOpacity: 0.2,
+			clickable: true
+		}
+	},
+
+	_initialLabelText: 'Click and drag to draw circle.',
+
+	_drawShape: function (latlng) {
+		if (!this._shape) {
+			this._shape = new L.Circle(this._startLatLng, this._startLatLng.distanceTo(latlng), this.options.shapeOptions);
+			this._map.addLayer(this._shape);
+		} else {
+			this._shape.setRadius(this._startLatLng.distanceTo(latlng));
+		}
+	},
+
+	_fireCreatedEvent: function () {
+		this._map.fire(
+			'draw:circle-created',
+			{ circ: new L.Circle(this._startLatLng, this._shape.getRadius(), this.options.shapeOptions) }
+		);
+	}
+});
+
+L.Rectangle.Draw = L.SimpleShape.Draw.extend({
+	options: {
+		shapeOptions: {
+			stroke: true,
+			color: '#f06eaa',
+			weight: 4,
+			opacity: 0.5,
+			fill: true,
+			fillColor: null, //same as color by default
+			fillOpacity: 0.2,
+			clickable: true
+		}
+	},
+	
+	_initialLabelText: 'Click and drag to draw rectangle.',
+
+	_drawShape: function (latlng) {
+		if (!this._shape) {
+			this._shape = new L.Rectangle(new L.LatLngBounds(this._startLatLng, latlng), this.options.shapeOptions);
+			this._map.addLayer(this._shape);
+		} else {
+			this._shape.setBounds(new L.LatLngBounds(this._startLatLng, latlng));
+		}
+	},
+
+	_fireCreatedEvent: function () {
+		this._map.fire(
+			'draw:rectangle-created',
+			{ rect: new L.Rectangle(this._shape.getBounds(), this.options.shapeOptions) }
+		);
+	}
+});
+
+L.Marker.Draw = L.Handler.Draw.extend({
+	options: {
+		icon: new L.Icon.Default(),
+		zIndexOffset: 2000 // This should be > than the highest z-index any markers
+	},
+	
+	addHooks: function () {
+		L.Handler.Draw.prototype.addHooks.call(this);
+		
+		if (this._map) {
+			this._updateLabelText({ text: 'Click map to place marker.' });
+			this._map.on('mousemove', this._onMouseMove, this);
+		}
+	},
+
+	removeHooks: function () {
+		L.Handler.Draw.prototype.removeHooks.call(this);
+		
+		if (this._map) {
+			if (this._marker) {
+				this._marker.off('click', this._onClick);
+				this._map
+					.off('click', this._onClick)
+					.removeLayer(this._marker);
+				delete this._marker;
+			}
+
+			this._map.off('mousemove', this._onMouseMove);
+		}
+	},
+
+	_onMouseMove: function (e) {
+		var newPos = e.layerPoint,
+			latlng = e.latlng;
+
+		this._updateLabelPosition(newPos);
+
+		if (!this._marker) {
+			this._marker = new L.Marker(latlng, {
+				icon: this.options.icon,
+				zIndexOffset: this.options.zIndexOffset
+			});
+			// Bind to both marker and map to make sure we get the click event.
+			this._marker.on('click', this._onClick, this);
+			this._map
+				.on('click', this._onClick, this)
+				.addLayer(this._marker);
+		}
+		else {
+			this._marker.setLatLng(latlng);
+		}
+	},
+
+	_onClick: function (e) {
+		this._map.fire(
+			'draw:marker-created',
+			{ marker: new L.Marker(this._marker.getLatLng(), { icon: this.options.icon }) }
+		);
+		this.disable();
+	}
+});
+
+L.Map.mergeOptions({
+	drawControl: false
+});
+
+L.Control.Draw = L.Control.extend({
+
+	options: {
+		position: 'topleft',
+		polyline: {
+			title: 'Draw a polyline'
+		},
+		polygon: {
+			title: 'Draw a polygon'
+		},
+		rectangle: {
+			title: 'Draw a rectangle'
+		},
+		circle: {
+			title: 'Draw a circle'
+		},
+		marker: {
+			title: 'Add a marker'
+		}
+	},
+
+	handlers: {},
+	
+	initialize: function (options) {
+		L.Util.extend(this.options, options);
+	},
+	
+	onAdd: function (map) {
+		var className = 'leaflet-control-draw',
+			container = L.DomUtil.create('div', className);
+
+		if (this.options.polyline) {
+			this.handlers.polyline = new L.Polyline.Draw(map, this.options.polyline);
+			this._createButton(
+				this.options.polyline.title,
+				className + '-polyline',
+				container,
+				this.handlers.polyline.enable,
+				this.handlers.polyline
+			);
+			this.handlers.polyline.on('activated', this._disableInactiveModes, this);
+		}
+
+		if (this.options.polygon) {
+			this.handlers.polygon = new L.Polygon.Draw(map, this.options.polygon);
+			this._createButton(
+				this.options.polygon.title,
+				className + '-polygon',
+				container,
+				this.handlers.polygon.enable,
+				this.handlers.polygon
+			);
+			this.handlers.polygon.on('activated', this._disableInactiveModes, this);
+		}
+
+		if (this.options.rectangle) {
+			this.handlers.rectangle = new L.Rectangle.Draw(map, this.options.rectangle);
+			this._createButton(
+				this.options.rectangle.title,
+				className + '-rectangle',
+				container,
+				this.handlers.rectangle.enable,
+				this.handlers.rectangle
+			);
+			this.handlers.rectangle.on('activated', this._disableInactiveModes, this);
+		}
+
+		if (this.options.circle) {
+			this.handlers.circle = new L.Circle.Draw(map, this.options.circle);
+			this._createButton(
+				this.options.circle.title,
+				className + '-circle',
+				container,
+				this.handlers.circle.enable,
+				this.handlers.circle
+			);
+			this.handlers.circle.on('activated', this._disableInactiveModes, this);
+		}
+
+		if (this.options.marker) {
+			this.handlers.marker = new L.Marker.Draw(map, this.options.marker);
+			this._createButton(
+				this.options.marker.title,
+				className + '-marker',
+				container,
+				this.handlers.marker.enable,
+				this.handlers.marker
+			);
+			this.handlers.marker.on('activated', this._disableInactiveModes, this);
+		}
+		
+		return container;
+	},
+
+	_createButton: function (title, className, container, fn, context) {
+		var link = L.DomUtil.create('a', className, container);
+		link.href = '#';
+		link.title = title;
+
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'mousedown', L.DomEvent.stopPropagation)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', fn, context);
+
+		return link;
+	},
+
+	// Need to disable the drawing modes if user clicks on another without disabling the current mode
+	_disableInactiveModes: function () {
+		for (var i in this.handlers) {
+			// Check if is a property of this object and is enabled
+			if (this.handlers.hasOwnProperty(i) && this.handlers[i].enabled()) {
+				this.handlers[i].disable();
+			}
+		}
+	}
+});
+
+L.Map.addInitHook(function () {
+	if (this.options.drawControl) {
+		this.drawControl = new L.Control.Draw();
+		this.addControl(this.drawControl);
+	}
+});
+
+
+
+}(this));

vendor/assets/leaflet/leaflet.ie.css

@@ -0,0 +1,44 @@
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML); 
+	display: inline-block; 
+	position: absolute;
+	}
+	
+.leaflet-control {
+	display: inline;
+	}
+
+.leaflet-popup-tip {
+	width: 21px;
+	_width: 27px;
+	margin: 0 auto;
+	_margin-top: -3px;
+	
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	}
+.leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+	border: 1px solid #bbb;
+	}
+
+.leaflet-control-zoom {
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
+	}
+.leaflet-control-zoom a {
+	background-color: #eee;
+	}
+.leaflet-control-zoom a:hover {
+	background-color: #fff;
+	}
+.leaflet-control-layers-toggle {
+	}
+.leaflet-control-attribution, .leaflet-control-layers {
+	background: white;
+	}

vendor/assets/leaflet/leaflet.osm.js

@@ -0,0 +1,133 @@
+L.OSM = L.FeatureGroup.extend({
+  options: {
+    areaTags: ['area', 'building', 'leisure', 'tourism', 'ruins', 'historic', 'landuse', 'military', 'natural', 'sport'],
+    uninterestingTags: ['source', 'source_ref', 'source:ref', 'history', 'attribution', 'created_by', 'tiger:county', 'tiger:tlid', 'tiger:upload_uuid'],
+    styles: {}
+  },
+
+  initialize: function (xml, options) {
+    L.Util.setOptions(this, options);
+
+    L.FeatureGroup.prototype.initialize.call(this);
+
+    if (xml) {
+      this.addData(xml);
+    }
+  },
+
+  addData: function (xml) {
+    var nodes = L.OSM.getNodes(xml),
+         ways = L.OSM.getWays(xml);
+
+    for (var i = 0; i < ways.length; i++) {
+      var way = ways[i],
+        latLngs = new Array(way.nodes.length);
+
+      for (var j = 0; j < way.nodes.length; j++) {
+        latLngs[j] = nodes[way.nodes[j]].latLng;
+      }
+
+      var layer;
+
+      if (this.isWayArea(way)) {
+        latLngs.pop(); // Remove last == first.
+        layer = L.polygon(latLngs, this.options.styles.area);
+      } else {
+        layer = L.polyline(latLngs, this.options.styles.way);
+      }
+
+      layer.addTo(this);
+      layer.feature = way;
+    }
+
+    for (var node_id in nodes) {
+      var node = nodes[node_id];
+      if (this.interestingNode(node)) {
+        var layer = L.circleMarker(node.latLng, this.options.styles.node);
+
+        layer.addTo(this);
+        layer.feature = node;
+      }
+    }
+  },
+
+  isWayArea: function (way) {
+    if (way.nodes[0] != way.nodes[way.nodes.length - 1]) {
+      return false;
+    }
+
+    for (var key in way.tags) {
+      if (~this.options.areaTags.indexOf(key)) {
+        return true;
+      }
+    }
+
+    return false;
+  },
+
+  interestingNode: function (node) {
+    for (var key in node.tags) {
+      if (!~this.options.uninterestingTags.indexOf(key)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+});
+
+L.Util.extend(L.OSM, {
+  getNodes: function (xml) {
+    var result = {};
+
+    var nodes = xml.getElementsByTagName("node");
+    for (var i = 0; i < nodes.length; i++) {
+      var node = nodes[i], id = node.getAttribute("id");
+      result[id] = {
+        id: id,
+        type: "node",
+        latLng: L.latLng(node.getAttribute("lat"),
+                         node.getAttribute("lon"),
+                         true),
+        tags: this.getTags(node)
+      };
+    }
+
+    return result;
+  },
+
+  getWays: function (xml) {
+    var result = [];
+
+    var ways = xml.getElementsByTagName("way");
+    for (var i = 0; i < ways.length; i++) {
+      var way = ways[i], nds = way.getElementsByTagName("nd");
+
+      var way_object = {
+        id: way.getAttribute("id"),
+        type: "way",
+        nodes: new Array(nds.length),
+        tags: this.getTags(way)
+      };
+
+      for (var j = 0; j < nds.length; j++) {
+        way_object.nodes[j] = nds[j].getAttribute("ref");
+      }
+
+      result.push(way_object);
+    }
+
+    return result;
+  },
+
+  getTags: function (xml) {
+    var result = {};
+
+    var tags = xml.getElementsByTagName("tag");
+    for (var j = 0; j < tags.length; j++) {
+      result[tags[j].getAttribute("k")] = tags[j].getAttribute("v");
+    }
+
+    return result;
+  }
+});