Add anchor option to L.Toolbar.Popup (modifies the way that the popup…

… toolbar is positioned w/ negative margins in L.Toolbar.Popup#_setStyles. Fixes #18.
Leaflet · Feb 8, 2015 · 85c6f62 · 85c6f62
1 parent fd62be4
commit 85c6f62
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 41 deletions.
diff --git a/dist/leaflet.toolbar-src.js b/dist/leaflet.toolbar-src.js
@@ -237,17 +237,23 @@ L.Toolbar.Popup = L.Toolbar.extend({
 		baseClass: 'leaflet-popup-toolbar ' + L.Toolbar.baseClass
 	},
 
+	options: {
+		anchor: [0, 0]
+	},
+
 	initialize: function(latlng, options) {
 		L.Toolbar.prototype.initialize.call(this, options);
 
-		var	toolbarOptions = L.extend(this.options, {
-				icon: new L.DivIcon({
-					html: '',
-					className: this.options.className
-				})
-			});
-
-		this._marker = new L.Marker(latlng, toolbarOptions);
+		/* 
+		 * Developers can't pass a DivIcon in the options for L.Toolbar.Popup
+		 * (the use of DivIcons is an implementation detail which may change).
+		 */
+		this._marker = new L.Marker(latlng, {
+			icon : new L.DivIcon({
+				className: this.options.className,
+				iconAnchor: [0, 0]
+			})
+		});
 	},
 
 	onAdd: function(map) {
@@ -274,12 +280,13 @@ L.Toolbar.Popup = L.Toolbar.extend({
 	_setStyles: function() {
 		var container = this._container,
 			toolbar = this._ul,
+			anchor = L.point(this.options.anchor),
 			icons = toolbar.querySelectorAll('.leaflet-toolbar-icon'),
 			buttonHeights = [],
 			toolbarWidth = 0,
 			toolbarHeight,
 			tipSize,
-			anchor;
+			tipAnchor;
 
 		/* Calculate the dimensions of the toolbar. */
 		for (var i = 0, l = icons.length; i < l; i++) {
@@ -296,14 +303,14 @@ L.Toolbar.Popup = L.Toolbar.extend({
 
 		this._tip = L.DomUtil.create('div', 'leaflet-toolbar-tip', this._tipContainer);
 
-		/* Set the anchor point. */
+		/* Set the tipAnchor point. */
 		toolbarHeight = Math.max.apply(undefined, buttonHeights);
 		tipSize = parseInt(L.DomUtil.getStyle(this._tip, 'width'), 10);
+		tipAnchor = new L.Point(toolbarWidth/2, toolbarHeight + 0.7071*tipSize);
 
-		anchor = new L.Point(toolbarWidth/2, toolbarHeight + 0.7071*tipSize);
-
-		container.style.marginLeft = (-anchor.x) + 'px';
-		container.style.marginTop = (-anchor.y) + 'px';
+		/* The anchor option allows app developers to adjust the toolbar's position. */
+		container.style.marginLeft = (anchor.x - tipAnchor.x) + 'px';
+		container.style.marginTop = (anchor.y - tipAnchor.y) + 'px';
 	}
 });
 

diff --git a/dist/leaflet.toolbar.js b/dist/leaflet.toolbar.js
diff --git a/examples/popup.html b/examples/popup.html
@@ -59,18 +59,7 @@
 			drawnItems.addLayer(layer);
 
 			layer.on('click', function(event) {
-				var latlng = event.latlng;
-
-				/* Override event.latlng to open the popup just above markers. */
-				if (layer instanceof L.Marker) {
-					height = parseFloat(L.DomUtil.getStyle(layer._icon, 'height'));
-					latlng = map.layerPointToLatLng(map
-						.latLngToLayerPoint(latlng)
-						.add(L.point(0, -height))
-					);
-				}
-
-				new L.EditToolbar.Popup(latlng, {
+				new L.EditToolbar.Popup(event.latlng, {
 					className: 'leaflet-draw-toolbar',
 					actions: editActions
 				}).addTo(map, layer);

diff --git a/src/Toolbar.Popup.js b/src/Toolbar.Popup.js
@@ -5,17 +5,23 @@ L.Toolbar.Popup = L.Toolbar.extend({
 		baseClass: 'leaflet-popup-toolbar ' + L.Toolbar.baseClass
 	},
 
+	options: {
+		anchor: [0, 0]
+	},
+
 	initialize: function(latlng, options) {
 		L.Toolbar.prototype.initialize.call(this, options);
 
-		var	toolbarOptions = L.extend(this.options, {
-				icon: new L.DivIcon({
-					html: '',
-					className: this.options.className
-				})
-			});
-
-		this._marker = new L.Marker(latlng, toolbarOptions);
+		/* 
+		 * Developers can't pass a DivIcon in the options for L.Toolbar.Popup
+		 * (the use of DivIcons is an implementation detail which may change).
+		 */
+		this._marker = new L.Marker(latlng, {
+			icon : new L.DivIcon({
+				className: this.options.className,
+				iconAnchor: [0, 0]
+			})
+		});
 	},
 
 	onAdd: function(map) {
@@ -42,12 +48,13 @@ L.Toolbar.Popup = L.Toolbar.extend({
 	_setStyles: function() {
 		var container = this._container,
 			toolbar = this._ul,
+			anchor = L.point(this.options.anchor),
 			icons = toolbar.querySelectorAll('.leaflet-toolbar-icon'),
 			buttonHeights = [],
 			toolbarWidth = 0,
 			toolbarHeight,
 			tipSize,
-			anchor;
+			tipAnchor;
 
 		/* Calculate the dimensions of the toolbar. */
 		for (var i = 0, l = icons.length; i < l; i++) {
@@ -64,14 +71,14 @@ L.Toolbar.Popup = L.Toolbar.extend({
 
 		this._tip = L.DomUtil.create('div', 'leaflet-toolbar-tip', this._tipContainer);
 
-		/* Set the anchor point. */
+		/* Set the tipAnchor point. */
 		toolbarHeight = Math.max.apply(undefined, buttonHeights);
 		tipSize = parseInt(L.DomUtil.getStyle(this._tip, 'width'), 10);
+		tipAnchor = new L.Point(toolbarWidth/2, toolbarHeight + 0.7071*tipSize);
 
-		anchor = new L.Point(toolbarWidth/2, toolbarHeight + 0.7071*tipSize);
-
-		container.style.marginLeft = (-anchor.x) + 'px';
-		container.style.marginTop = (-anchor.y) + 'px';
+		/* The anchor option allows app developers to adjust the toolbar's position. */
+		container.style.marginLeft = (anchor.x - tipAnchor.x) + 'px';
+		container.style.marginTop = (anchor.y - tipAnchor.y) + 'px';
 	}
 });