add support for a snapPoint callback function to leaflet.draw, and use to snap points to portals

also enable repeat mode for marker placement

external/leaflet.draw.js

@@ -334,6 +334,8 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		var latlng = e.target.getLatLng(),
 			markerCount = this._markers.length;
 
+                if (this.options.snapPoint) latlng = this.options.snapPoint(latlng);
+
 		if (markerCount > 0 && !this.options.allowIntersection && this._poly.newLatLngIntersects(latlng)) {
 			this._showErrorTooltip();
 			return;
@@ -411,6 +413,8 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 	},
 
 	_drawGuide: function (pointA, pointB) {
+//TODO: rewrite this to use a regular leaflet line with a dashpattern!
+
 		var length = Math.floor(Math.sqrt(Math.pow((pointB.x - pointA.x), 2) + Math.pow((pointB.y - pointA.y), 2))),
 			i,
 			fraction,
@@ -716,6 +720,8 @@ L.Draw.SimpleShape = L.Draw.Feature.extend({
 		this._isDrawing = true;
 		this._startLatLng = e.latlng;
 
+                if (this.options.snapPoint) this._startLatLng = this.options.snapPoint(this._startLatLng);
+
 		L.DomEvent
 			.on(document, 'mouseup', this._onMouseUp, this)
 			.preventDefault(e.originalEvent);
@@ -936,6 +942,8 @@ L.Draw.Marker = L.Draw.Feature.extend({
 	},
 
 	_onClick: function () {
+                if (this.options.snapPoint) this._marker.setLatLng(this.options.snapPoint(this._marker.getLatLng()));
+
 		this._fireCreatedEvent();
 
 		this.disable();

plugins/draw-tools.user.js

@@ -74,6 +74,7 @@ window.plugin.drawTools.addDrawControl = function() {
           + 'point of the line (a small white rectangle) to\n'
           + 'finish. Double clicking also works.',
         shapeOptions: window.plugin.drawTools.polygonOptions,
+        snapPoint: window.plugin.drawTools.getSnapLatLng,
       },
 
       polyline: {
@@ -84,6 +85,7 @@ window.plugin.drawTools.addDrawControl = function() {
           + 'point of the line (a small white rectangle) to\n'
           + 'finish. Double clicking also works.',
         shapeOptions: window.plugin.drawTools.lineOptions,
+        snapPoint: window.plugin.drawTools.getSnapLatLng,
       },
 
       circle: {
@@ -93,6 +95,7 @@ window.plugin.drawTools.addDrawControl = function() {
           + 'the mouse to control the radius. Release the mouse\n'
           + 'to finish.',
         shapeOptions: window.plugin.drawTools.polygonOptions,
+        snapPoint: window.plugin.drawTools.getSnapLatLng,
       },
 
       marker: {
@@ -100,6 +103,8 @@ window.plugin.drawTools.addDrawControl = function() {
           + 'Click on the button, then click on the map where\n'
           + 'you want the marker to appear.',
         shapeOptions: window.plugin.drawTools.markerOptions,
+        snapPoint: window.plugin.drawTools.getSnapLatLng,
+        repeatMode: true,
       },
 
     },
@@ -124,11 +129,11 @@ window.plugin.drawTools.addDrawControl = function() {
 }
 
 
-// given a container point it tries to find the most suitable portal to
+// given a point it tries to find the most suitable portal to
 // snap to. It takes the CircleMarker’s radius and weight into account.
 // Will return null if nothing to snap to or a LatLng instance.
-window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
-// TODO: use this function again, if possible
+window.plugin.drawTools.getSnapLatLng = function(unsnappedLatLng) {
+  var containerPoint = map.latLngToContainerPoint(unsnappedLatLng);
   var candidates = [];
   $.each(window.portals, function(guid, portal) {
     var ll = portal.getLatLng();
@@ -139,7 +144,7 @@ window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
     candidates.push([dist, ll]);
   });
 
-  if(candidates.length === 0) return;
+  if(candidates.length === 0) return unsnappedLatLng;
   candidates = candidates.sort(function(a, b) { return a[0]-b[0]; });
   return candidates[0][1];
 }