initial Layer commit (base class for all layers)

build/deps.js

@@ -17,6 +17,7 @@ var deps = {
 		      'geo/crs/CRS.Simple.js',
 		      'geo/crs/CRS.EPSG3857.js',
 		      'geo/crs/CRS.EPSG4326.js',
+		      'layer/Layer.js',
 		      'map/Map.js'],
 		desc: 'The core of the library, including OOP, events, DOM facilities, basic units, projections (EPSG:3857 and EPSG:4326) and the base Map class.'
 	},

src/layer/FeatureGroup.js

@@ -4,7 +4,6 @@
  */
 
 L.FeatureGroup = L.LayerGroup.extend({
-	includes: L.Mixin.Events,
 
 	statics: {
 		EVENTS: 'click dblclick mouseover mouseout mousemove contextmenu popupopen popupclose'

src/layer/ImageOverlay.js

@@ -2,8 +2,7 @@
  * L.ImageOverlay is used to overlay images over the map (to specific geographical bounds).
  */
 
-L.ImageOverlay = L.Class.extend({
+L.ImageOverlay = L.Layer.extend({
-	includes: L.Mixin.Events,
 
 	options: {
 		opacity: 1
@@ -24,7 +23,7 @@ L.ImageOverlay = L.Class.extend({
 			this._initImage();
 		}
 
-		this._getPane().appendChild(this._image);
+		this.getPane().appendChild(this._image);
 
 		map.on(this._getEvents(), this);
 
@@ -37,11 +36,6 @@ L.ImageOverlay = L.Class.extend({
 		map.off(this._getEvents(), this);
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	setOpacity: function (opacity) {
 		this.options.opacity = opacity;
 		this._updateOpacity();
@@ -51,13 +45,13 @@ L.ImageOverlay = L.Class.extend({
 	// TODO remove bringToFront/bringToBack duplication from TileLayer/Path
 	bringToFront: function () {
 		if (this._image) {
-			this._getPane().appendChild(this._image);
+			this.getPane().appendChild(this._image);
 		}
 		return this;
 	},
 
 	bringToBack: function () {
-		var pane = this._getPane();
+		var pane = this.getPane();
 		if (this._image) {
 			pane.insertBefore(this._image, pane.firstChild);
 		}
@@ -73,10 +67,6 @@ L.ImageOverlay = L.Class.extend({
 		return this.options.attribution;
 	},
 
-	_getPane: function () {
-		return this._map._panes.overlayPane;
-	},
-
 	_getEvents: function () {
 		var events = {viewreset: this._reset};
 

src/layer/Layer.js

@@ -0,0 +1,18 @@
+
+L.Layer = L.Class.extend({
+	includes: L.Mixin.Events,
+
+	options: {
+		pane: 'overlayPane'
+	},
+
+	addTo: function (map) {
+		map.addLayer(this);
+		return this;
+	},
+
+	getPane: function () {
+		// TODO make pane if not present
+		return this._map._panes[this.options.pane];
+	}
+});

src/layer/LayerGroup.js

@@ -3,7 +3,8 @@
  * you can manipulate the group (e.g. add/remove it) as one layer.
  */
 
-L.LayerGroup = L.Class.extend({
+L.LayerGroup = L.Layer.extend({
+
 	initialize: function (layers) {
 		this._layers = {};
 
@@ -76,11 +77,6 @@ L.LayerGroup = L.Class.extend({
 		this._map = null;
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	eachLayer: function (method, context) {
 		for (var i in this._layers) {
 			method.call(context, this._layers[i]);

src/layer/Popup.js

@@ -6,10 +6,11 @@ L.Map.mergeOptions({
 	closePopupOnClick: true
 });
 
-L.Popup = L.Class.extend({
+L.Popup = L.Layer.extend({
-	includes: L.Mixin.Events,
 
 	options: {
+		pane: 'popupPane',
+
 		minWidth: 50,
 		maxWidth: 300,
 		// maxHeight: <Number>,
@@ -46,7 +47,7 @@ L.Popup = L.Class.extend({
 			L.DomUtil.setOpacity(this._container, 0);
 		}
 
-		this._getPane().appendChild(this._container);
+		this.getPane().appendChild(this._container);
 		map.on(this._getEvents(), this);
 
 		this.update();
@@ -63,11 +64,6 @@ L.Popup = L.Class.extend({
 		}
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	openOn: function (map) {
 		map.openPopup(this);
 		return this;
@@ -130,10 +126,6 @@ L.Popup = L.Class.extend({
 		this._adjustPan();
 	},
 
-	_getPane: function () {
-		return this._map._panes.popupPane;
-	},
-
 	_getEvents: function () {
 		var events = {viewreset: this._updatePosition},
 		    options = this.options;

src/layer/marker/Marker.js

@@ -2,9 +2,7 @@
  * L.Marker is used to display clickable/draggable icons on the map.
  */
 
-L.Marker = L.Class.extend({
+L.Marker = L.Layer.extend({
-
-	includes: L.Mixin.Events,
 
 	options: {
 		icon: new L.Icon.Default(),
@@ -40,11 +38,6 @@ L.Marker = L.Class.extend({
 		}
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	onRemove: function (map) {
 		if (this.dragging) {
 			this.dragging.disable();

src/layer/tile/GridLayer.js

@@ -2,11 +2,11 @@
  * L.GridLayer is used as base class for grid-like layers like TileLayer.
  */
 
-L.GridLayer = L.Class.extend({
+L.GridLayer = L.Layer.extend({
-
-	includes: L.Mixin.Events,
 
 	options: {
+		pane: 'tilePane',
+
 		tileSize: 256,
 		opacity: 1,
 
@@ -53,14 +53,9 @@ L.GridLayer = L.Class.extend({
 		this._container = this._map = null;
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	bringToFront: function () {
 		if (this._map) {
-			var pane = this._getPane();
+			var pane = this.getPane();
 			pane.appendChild(this._container);
 			this._setAutoZIndex(pane, Math.max);
 		}
@@ -69,7 +64,7 @@ L.GridLayer = L.Class.extend({
 
 	bringToBack: function () {
 		if (this._map) {
-			var pane = this._getPane();
+			var pane = this.getPane();
 			pane.insertBefore(this._container, pane.firstChild);
 			this._setAutoZIndex(pane, Math.min);
 		}
@@ -108,11 +103,6 @@ L.GridLayer = L.Class.extend({
 		return this;
 	},
 
-	_getPane: function () {
-		// TODO pane in options?
-		return this._map._panes.tilePane;
-	},
-
 	_getEvents: function () {
 		var events = {
 			viewreset: this._reset,
@@ -191,7 +181,7 @@ L.GridLayer = L.Class.extend({
 			this._updateOpacity();
 		}
 
-		this._getPane().appendChild(this._container);
+		this.getPane().appendChild(this._container);
 	},
 
 	_reset: function (e) {

src/layer/vector/Path.js

@@ -2,8 +2,7 @@
  * L.Path is a base class for rendering vector paths on a map. Inherited by Polyline, Circle, etc.
  */
 
-L.Path = L.Class.extend({
+L.Path = L.Layer.extend({
-	includes: [L.Mixin.Events],
 
 	statics: {
 		// how much to extend the clip area around the map view
@@ -64,11 +63,6 @@ L.Path = L.Class.extend({
 		}, this);
 	},
 
-	addTo: function (map) {
-		map.addLayer(this);
-		return this;
-	},
-
 	onRemove: function (map) {
 		L.DomUtil.remove(this._container);