Reworked controls to be more flexible (inspired by #480)

CHANGELOG.md

@@ -5,7 +5,15 @@ Leaflet Changelog
 
 ## 0.4 (master)
 
-No changes from 0.3 so far.
+### Improvements
+
+ * Added `setPosition` and `getPosition` to all controls, as well as ability to pass certain position as an option when creating a control.
+ * Replaced ugly control position constants (e.g. L.Control.Position.TOP_LEFT) with light strings ('topleft', 'bottomright', etc.)
+ * Made controls implementation easier (now more magic happens under the hood).
+
+### Bug fixes
+
+ * Fixed a bug where `TileLayer.WMS` wouldn't take `insertAtTheBottom` option into account (by [@bmcbride](https://github.com/bmcbride)). [#478](https://github.com/CloudMade/Leaflet/pull/478)
 
 ## 0.3 (13.02.2012)
 

dist/leaflet-src.js

@@ -6,7 +6,7 @@
 
 (function (root) {
 	root.L = {
-		VERSION: '0.3',
+		VERSION: '0.4',
 
 		ROOT_URL: root.L_ROOT_URL || (function () {
 			var scripts = document.getElementsByTagName('script'),
@@ -1082,7 +1082,7 @@ L.Map = L.Class.extend({
 		return this.panBy(new L.Point(dx, dy, true));
 	},
 
-	addLayer: function (layer, insertAtTheTop) {
+	addLayer: function (layer, insertAtTheBottom) {
 		var id = L.Util.stamp(layer);
 
 		if (this._layers[id]) {
@@ -1108,7 +1108,7 @@ L.Map = L.Class.extend({
 		}
 
 		var onMapLoad = function () {
-			layer.onAdd(this, insertAtTheTop);
+			layer.onAdd(this, insertAtTheBottom);
 			this.fire('layeradd', {layer: layer});
 		};
 
@@ -1396,8 +1396,11 @@ L.Map = L.Class.extend({
 	},
 
 	_initControls: function () {
+		// TODO refactor, this should happen automatically
+
 		if (this.options.zoomControl) {
-			this.addControl(new L.Control.Zoom());
+			this.zoomControl = new L.Control.Zoom();
+			this.addControl(this.zoomControl);
 		}
 		if (this.options.attributionControl) {
 			this.attributionControl = new L.Control.Attribution();
@@ -1457,7 +1460,7 @@ L.Map = L.Class.extend({
 		if (type === 'contextmenu') {
 			L.DomEvent.preventDefault(e);
 		}
-		
+
 		this.fire(type, {
 			latlng: this.mouseEventToLatLng(e),
 			layerPoint: this.mouseEventToLayerPoint(e)
@@ -1957,11 +1960,11 @@ L.TileLayer.WMS = L.TileLayer.extend({
 		L.Util.setOptions(this, options);
 	},
 
-	onAdd: function (map) {
+	onAdd: function (map, insertAtTheBottom) {
 		var projectionKey = (parseFloat(this.wmsParams.version) >= 1.3 ? 'crs' : 'srs');
 		this.wmsParams[projectionKey] = map.options.crs.code;
 
-		L.TileLayer.prototype.onAdd.call(this, map);
+		L.TileLayer.prototype.onAdd.call(this, map, insertAtTheBottom);
 	},
 
 	getTileUrl: function (/*Point*/ tilePoint, /*Number*/ zoom)/*-> String*/ {
@@ -4757,23 +4760,46 @@ L.Handler.MarkerDrag = L.Handler.extend({
 
 
 
-L.Control = {};
+L.Control = L.Class.extend({
+	options: {
+		position: 'topright'
+	},
+
+	initialize: function (options) {
+		L.Util.setOptions(this, options);
+	},
+
+	getPosition: function () {
+		return this.options.position;
+	},
+
+	setPosition: function (position) {
+		this.options.position = position;
+
+		if (this._map) {
+			this._map.removeControl(this);
+			this._map.addControl(this);
+		}
+	}
+});
 
 L.Control.Position = {
-	TOP_LEFT: 'topLeft',
+	TOP_LEFT: 'topleft',
-	TOP_RIGHT: 'topRight',
+	TOP_RIGHT: 'topright',
-	BOTTOM_LEFT: 'bottomLeft',
+	BOTTOM_LEFT: 'bottomleft',
-	BOTTOM_RIGHT: 'bottomRight'
+	BOTTOM_RIGHT: 'bottomright'
 };
 
 
 L.Map.include({
 	addControl: function (control) {
-		control.onAdd(this);
+		var container = control.onAdd(this);
+
+		control._container = container;
+		control._map = this;
 
 		var pos = control.getPosition(),
-			corner = this._controlCorners[pos],
+			corner = this._controlCorners[pos];
-			container = control.getContainer();
 
 		L.DomUtil.addClass(container, 'leaflet-control');
 
@@ -4787,10 +4813,10 @@ L.Map.include({
 
 	removeControl: function (control) {
 		var pos = control.getPosition(),
-			corner = this._controlCorners[pos],
+			corner = this._controlCorners[pos];
-			container = control.getContainer();
 
-		corner.removeChild(container);
+		corner.removeChild(control._container);
+		control._map = null;
 
 		if (control.onRemove) {
 			control.onRemove(this);
@@ -4811,35 +4837,30 @@ L.Map.include({
 			controlContainer.className += ' ' + classPart + 'big-buttons';
 		}
 
-		corners.topLeft = L.DomUtil.create('div', top + ' ' + left, controlContainer);
+		corners.topleft = L.DomUtil.create('div', top + ' ' + left, controlContainer);
-		corners.topRight = L.DomUtil.create('div', top + ' ' + right, controlContainer);
+		corners.topright = L.DomUtil.create('div', top + ' ' + right, controlContainer);
-		corners.bottomLeft = L.DomUtil.create('div', bottom + ' ' + left, controlContainer);
+		corners.bottomleft = L.DomUtil.create('div', bottom + ' ' + left, controlContainer);
-		corners.bottomRight = L.DomUtil.create('div', bottom + ' ' + right, controlContainer);
+		corners.bottomright = L.DomUtil.create('div', bottom + ' ' + right, controlContainer);
 	}
 });
 
 
 
-L.Control.Zoom = L.Class.extend({
+L.Control.Zoom = L.Control.extend({
+	options: {
+		position: 'topleft'
+	},
+
 	onAdd: function (map) {
-		this._map = map;
+		var className = 'leaflet-control-zoom',
-		this._container = L.DomUtil.create('div', 'leaflet-control-zoom');
+			container = L.DomUtil.create('div', className),
+			zoomInButton = this._createButton('Zoom in', className + '-in', map.zoomIn, map),
+			zoomOutButton = this._createButton('Zoom out', className + '-out', map.zoomOut, map);
 
-		this._zoomInButton = this._createButton(
+		container.appendChild(zoomInButton);
-				'Zoom in', 'leaflet-control-zoom-in', this._map.zoomIn, this._map);
+		container.appendChild(zoomOutButton);
-		this._zoomOutButton = this._createButton(
-				'Zoom out', 'leaflet-control-zoom-out', this._map.zoomOut, this._map);
 
-		this._container.appendChild(this._zoomInButton);
+		return container;
-		this._container.appendChild(this._zoomOutButton);
-	},
-
-	getContainer: function () {
-		return this._container;
-	},
-
-	getPosition: function () {
-		return L.Control.Position.TOP_LEFT;
 	},
 
 	_createButton: function (title, className, fn, context) {
@@ -4859,8 +4880,14 @@ L.Control.Zoom = L.Class.extend({
 });
 
 
-L.Control.Attribution = L.Class.extend({
+L.Control.Attribution = L.Control.extend({
-	initialize: function (prefix) {
+	options: {
+		position: 'bottomright'
+	},
+
+	initialize: function (prefix, options) {
+		L.Util.setOptions(this, options);
+
 		this._prefix = prefix || 'Powered by <a href="http://leaflet.cloudmade.com">Leaflet</a>';
 		this._attributions = {};
 	},
@@ -4870,13 +4897,7 @@ L.Control.Attribution = L.Class.extend({
 		L.DomEvent.disableClickPropagation(this._container);
 		this._map = map;
 		this._update();
-	},
 
-	getPosition: function () {
-		return L.Control.Position.BOTTOM_RIGHT;
-	},
-
-	getContainer: function () {
 		return this._container;
 	},
 
@@ -4931,9 +4952,10 @@ L.Control.Attribution = L.Class.extend({
 
 
 
-L.Control.Layers = L.Class.extend({
+L.Control.Layers = L.Control.extend({
 	options: {
-		collapsed: true
+		collapsed: true,
+		position: 'topright'
 	},
 
 	initialize: function (baseLayers, overlays, options) {
@@ -4959,16 +4981,10 @@ L.Control.Layers = L.Class.extend({
 
 		this._initLayout();
 		this._update();
-	},
 
-	getContainer: function () {
 		return this._container;
 	},
 
-	getPosition: function () {
-		return L.Control.Position.TOP_RIGHT;
-	},
-
 	addBaseLayer: function (layer, name) {
 		this._addLayer(layer, name);
 		this._update();

src/Leaflet.js

@@ -1,7 +1,7 @@
 
 (function (root) {
 	root.L = {
-		VERSION: '0.3',
+		VERSION: '0.4',
 
 		ROOT_URL: root.L_ROOT_URL || (function () {
 			var scripts = document.getElementsByTagName('script'),

src/control/Control.Attribution.js

@@ -1,5 +1,11 @@
-L.Control.Attribution = L.Class.extend({
+L.Control.Attribution = L.Control.extend({
-	initialize: function (prefix) {
+	options: {
+		position: 'bottomright'
+	},
+
+	initialize: function (prefix, options) {
+		L.Util.setOptions(this, options);
+
 		this._prefix = prefix || 'Powered by <a href="http://leaflet.cloudmade.com">Leaflet</a>';
 		this._attributions = {};
 	},
@@ -9,13 +15,7 @@ L.Control.Attribution = L.Class.extend({
 		L.DomEvent.disableClickPropagation(this._container);
 		this._map = map;
 		this._update();
-	},
 
-	getPosition: function () {
-		return L.Control.Position.BOTTOM_RIGHT;
-	},
-
-	getContainer: function () {
 		return this._container;
 	},
 

src/control/Control.Layers.js

@@ -1,7 +1,8 @@
 
-L.Control.Layers = L.Class.extend({
+L.Control.Layers = L.Control.extend({
 	options: {
-		collapsed: true
+		collapsed: true,
+		position: 'topright'
 	},
 
 	initialize: function (baseLayers, overlays, options) {
@@ -27,16 +28,10 @@ L.Control.Layers = L.Class.extend({
 
 		this._initLayout();
 		this._update();
-	},
 
-	getContainer: function () {
 		return this._container;
 	},
 
-	getPosition: function () {
-		return L.Control.Position.TOP_RIGHT;
-	},
-
 	addBaseLayer: function (layer, name) {
 		this._addLayer(layer, name);
 		this._update();

src/control/Control.Zoom.js

@@ -1,32 +1,19 @@
 
-L.Control.Zoom = L.Class.extend({
+L.Control.Zoom = L.Control.extend({
-	initialize: function () {
+	options: {
-		this._zoomPosition = L.Control.Position.TOP_LEFT;
+		position: 'topleft'
 	},
 
 	onAdd: function (map) {
-		this._map = map;
+		var className = 'leaflet-control-zoom',
-		this._container = L.DomUtil.create('div', 'leaflet-control-zoom');
+			container = L.DomUtil.create('div', className),
+			zoomInButton = this._createButton('Zoom in', className + '-in', map.zoomIn, map),
+			zoomOutButton = this._createButton('Zoom out', className + '-out', map.zoomOut, map);
 
-		this._zoomInButton = this._createButton(
+		container.appendChild(zoomInButton);
-				'Zoom in', 'leaflet-control-zoom-in', this._map.zoomIn, this._map);
+		container.appendChild(zoomOutButton);
-		this._zoomOutButton = this._createButton(
-				'Zoom out', 'leaflet-control-zoom-out', this._map.zoomOut, this._map);
 
-		this._container.appendChild(this._zoomInButton);
+		return container;
-		this._container.appendChild(this._zoomOutButton);
-	},
-
-	getContainer: function () {
-		return this._container;
-	},
-
-	getPosition: function () {
-		return this._zoomPosition;
-	},
-
-	setPosition: function (position) {
-		this._zoomPosition = position;
 	},
 
 	_createButton: function (title, className, fn, context) {

src/control/Control.js

@@ -1,9 +1,30 @@
 
-L.Control = {};
+L.Control = L.Class.extend({
+	options: {
+		position: 'topright'
+	},
+
+	initialize: function (options) {
+		L.Util.setOptions(this, options);
+	},
+
+	getPosition: function () {
+		return this.options.position;
+	},
+
+	setPosition: function (position) {
+		this.options.position = position;
+
+		if (this._map) {
+			this._map.removeControl(this);
+			this._map.addControl(this);
+		}
+	}
+});
 
 L.Control.Position = {
-	TOP_LEFT: 'topLeft',
+	TOP_LEFT: 'topleft',
-	TOP_RIGHT: 'topRight',
+	TOP_RIGHT: 'topright',
-	BOTTOM_LEFT: 'bottomLeft',
+	BOTTOM_LEFT: 'bottomleft',
-	BOTTOM_RIGHT: 'bottomRight'
+	BOTTOM_RIGHT: 'bottomright'
 };

src/map/Map.js

@@ -176,7 +176,7 @@ L.Map = L.Class.extend({
 		return this.panBy(new L.Point(dx, dy, true));
 	},
 
-	addLayer: function (layer, insertAtTheTop) {
+	addLayer: function (layer, insertAtTheBottom) {
 		var id = L.Util.stamp(layer);
 
 		if (this._layers[id]) {
@@ -202,7 +202,7 @@ L.Map = L.Class.extend({
 		}
 
 		var onMapLoad = function () {
-			layer.onAdd(this, insertAtTheTop);
+			layer.onAdd(this, insertAtTheBottom);
 			this.fire('layeradd', {layer: layer});
 		};
 
@@ -490,8 +490,11 @@ L.Map = L.Class.extend({
 	},
 
 	_initControls: function () {
+		// TODO refactor, this should happen automatically
+
 		if (this.options.zoomControl) {
-			this.addControl(new L.Control.Zoom());
+			this.zoomControl = new L.Control.Zoom();
+			this.addControl(this.zoomControl);
 		}
 		if (this.options.attributionControl) {
 			this.attributionControl = new L.Control.Attribution();
@@ -551,7 +554,7 @@ L.Map = L.Class.extend({
 		if (type === 'contextmenu') {
 			L.DomEvent.preventDefault(e);
 		}
-		
+
 		this.fire(type, {
 			latlng: this.mouseEventToLatLng(e),
 			layerPoint: this.mouseEventToLayerPoint(e)

src/map/ext/Map.Control.js

@@ -1,10 +1,12 @@
 L.Map.include({
 	addControl: function (control) {
-		control.onAdd(this);
+		var container = control.onAdd(this);
+
+		control._container = container;
+		control._map = this;
 
 		var pos = control.getPosition(),
-			corner = this._controlCorners[pos],
+			corner = this._controlCorners[pos];
-			container = control.getContainer();
 
 		L.DomUtil.addClass(container, 'leaflet-control');
 
@@ -18,10 +20,10 @@ L.Map.include({
 
 	removeControl: function (control) {
 		var pos = control.getPosition(),
-			corner = this._controlCorners[pos],
+			corner = this._controlCorners[pos];
-			container = control.getContainer();
 
-		corner.removeChild(container);
+		corner.removeChild(control._container);
+		control._map = null;
 
 		if (control.onRemove) {
 			control.onRemove(this);
@@ -42,9 +44,9 @@ L.Map.include({
 			controlContainer.className += ' ' + classPart + 'big-buttons';
 		}
 
-		corners.topLeft = L.DomUtil.create('div', top + ' ' + left, controlContainer);
+		corners.topleft = L.DomUtil.create('div', top + ' ' + left, controlContainer);
-		corners.topRight = L.DomUtil.create('div', top + ' ' + right, controlContainer);
+		corners.topright = L.DomUtil.create('div', top + ' ' + right, controlContainer);
-		corners.bottomLeft = L.DomUtil.create('div', bottom + ' ' + left, controlContainer);
+		corners.bottomleft = L.DomUtil.create('div', bottom + ' ' + left, controlContainer);
-		corners.bottomRight = L.DomUtil.create('div', bottom + ' ' + right, controlContainer);
+		corners.bottomright = L.DomUtil.create('div', bottom + ' ' + right, controlContainer);
 	}
 });