Marker implementation

dist/leaflet.css

@@ -17,6 +17,14 @@
 .leaflet-tile-loaded {
 	visibility: visible;
 	}
+	
+.leaflet-marker-icon, .leaflet-marker-shadow {
+	position: absolute;
+	display: block;
+	}
+.leaflet-clickable {
+	cursor: pointer;
+	}
 
 /* visual appearance */
 

src/layer/Icon.js

@@ -0,0 +1,44 @@
+L.Icon = L.Class.extend({
+	iconUrl: L.ROOT_URL + 'images/marker.png',
+	shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
+	
+	//iconSize: new L.Point(24, 37),
+	//shadowSize: new L.Point(42, 37),
+	
+	iconAnchor: new L.Point(12, 37),
+	
+	initialize: function(iconUrl) {
+		if (iconUrl) {
+			this.iconUrl = iconUrl;
+		}
+	},
+	
+	createIcon: function() {
+		return this._createImg('icon');
+	},
+	
+	createShadow: function() {
+		return this._createImg('shadow');
+	},
+	
+	_createImg: function(name) {
+		var img = document.createElement('img');
+		
+		img.src = this[name + 'Url'];
+		img.className = 'leaflet-marker-' + name;
+		
+		if (this.iconAnchor) {
+			img.style.marginLeft = (-this.iconAnchor.x) + 'px';
+			img.style.marginTop = (-this.iconAnchor.y) + 'px';
+		} else {
+			L.DomEvent.addListener(img, 'load', this._setAnchorToCenter);
+		}
+		
+		return img;
+	},
+	
+	_setAnchorToCenter: function() {
+		this.style.marginLeft = (-this.width/2) + 'px';
+		this.style.marginTop = (-this.height/2) + 'px';
+	}
+});

src/layer/Marker.js

@@ -0,0 +1,65 @@
+L.Marker = L.Class.extend({
+	includes: L.Mixin.Events,
+	
+	options: {
+		icon: new L.Icon(),
+		clickable: true
+	},
+	
+	initialize: function(latlng, options) {
+		this._latlng = latlng;	
+	},
+	
+	onAdd: function(map) {
+		this._map = map;
+		
+		if (!this._icon) {
+			this._icon = this.options.icon.createIcon();
+			map._panes.markerPane.appendChild(this._icon);
+			this._initInteraction();
+		}
+		if (!this._shadow) {
+			this._shadow = this.options.icon.createShadow();
+			map._panes.shadowPane.appendChild(this._shadow);
+		}
+		
+		map.on('viewreset', this._reset, this);
+		this._reset();
+	},
+	
+	onRemove: function(map) {
+		if (this._icon) {
+			map._panes.markerPane.removeChild(this._icon);
+		}
+		if (!this._shadow) {
+			map._panes.shadowPane.removeChild(this._shadow);
+		}
+		map.off('viewreset', this._reset, this);
+	},
+	
+	getLatLng: function() {
+		return this._latlng;
+	},
+	
+	_reset: function() {
+		var pos = this._map.latLngToLayerPoint(this._latlng);
+		
+		L.DomUtil.setPosition(this._icon, pos);
+		L.DomUtil.setPosition(this._shadow, pos);
+		
+		this._icon.style.zIndex = pos.top;
+	},
+	
+	_initInteraction: function() {
+		if (this.options.clickable) {
+			this._icon.className += ' leaflet-clickable';
+			L.DomEvent.addListener(this._icon, 'mousedown', L.DomEvent.stopPropagation);
+			L.DomEvent.addListener(this._icon, 'click', this._onClick, this);
+		}
+	},
+	
+	_onClick: function(e) {
+		this.fire('click');
+		L.DomEvent.stopPropagation(e);
+	}
+});

src/map/Map.js

@@ -249,7 +249,9 @@ L.Map = L.Class.extend({
 		this._panes = {};
 		this._panes.mapPane = this._mapPane = this._createPane('leaflet-map-pane');
 		this._panes.tilePane = this._createPane('leaflet-tile-pane');
+		this._panes.shadowPane = this._createPane('leaflet-shadow-pane');
 		this._panes.overlayPane = this._createPane('leaflet-overlay-pane');
+		this._panes.markerPane = this._createPane('leaflet-marker-pane');
 	},
 	
 	_createPane: function(className) {