Added DivIcon for lightweight div-based markers, and editable poly example

CHANGELOG.md

@@ -7,24 +7,29 @@ Leaflet Changelog
 
 ### Improvements
 
+#### Breaking API changes
+
+ * Converted `Icon` properties (like `iconUrl`) to options, changed constructor signature to `Icon(options)`.
+ * Improved `TileLayer` constructor to interpolate URL template values from options (removed third `urlParams` argument).
+ * Replaced ugly control position constants (e.g. L.Control.Position.TOP_LEFT) with light strings ('topleft', 'bottomright', etc.)
+ * Removed `Map` `locateAndSetView` method (use `locate` with `setView: true` option)
+
 #### API Improvements
 
+ * Added `DivIcon` class that easily allows you to create lightweight div-based markers.
+ * Added `Icon` `className` option to assign a custom class to an icon.
  * Added `Circle` `getBounds` method. [#440](https://github.com/CloudMade/Leaflet/issues/440)
+ * Added public `redraw` method to vector layers (useful if you manipulate their `LatLng` points directly).
  * Added `setPosition` and `getPosition` to all controls, as well as ability to pass certain position as an option when creating a control.
  * Made controls implementation easier (now more magic happens under the hood).
  * Added `Map` `containerPointToLatLng` and `latLngToContainerPoint` methods. [#474](https://github.com/CloudMade/Leaflet/issues/474)
  * Added `containerPoint` property to `MouseEvent`.
  * Added chaining to `DomEvent` methods.
- * Fixed a bug where popup size was calculated incorrectly in IE.
-
-#### Breaking API changes
-
- * Improved `TileLayer` constructor to interpolate URL template values from options (removed third `urlParams` argument).
- * Replaced ugly control position constants (e.g. L.Control.Position.TOP_LEFT) with light strings ('topleft', 'bottomright', etc.)
- * Removed `Map` `locateAndSetView` method (use `locate` with `setView: true` option)
 
 ### Bug fixes
 
+ * Fixed a bug where popup size was calculated incorrectly in IE.
+ * Fixed a bug where cursor would flicker when dragging a marker.
  * 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)
  * Fixed a bug where marker click event would stop working if you dragged it and then disabled dragging. [#434](https://github.com/CloudMade/Leaflet/issues/434)
 

build/deps.js

@@ -57,6 +57,12 @@ var deps = {
 		desc: 'Markers to put on the map.'
 	},
 
+	DivIcon: {
+		src: ['layer/marker/DivIcon.js'],
+		deps: ['Marker'],
+		desc: 'Lightweight div-based icon for markers.'
+	},
+
 	Popup: {
 		src: ['layer/Popup.js', 'layer/marker/Marker.Popup.js', 'map/ext/Map.Popup.js'],
 		deps: ['Marker'],

debug/leaflet-include.js

@@ -62,6 +62,7 @@
 		'layer/Popup.js',
 
 		'layer/marker/Icon.js',
+		'layer/marker/DivIcon.js',
 		'layer/marker/Marker.js',
 		'layer/marker/Marker.Popup.js',
 		'layer/marker/Marker.Drag.js',

debug/vector/editable.html

@@ -20,22 +20,32 @@
 			map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(50.5, 30.5), zoom: 15});
 
 
-		var latlngs = [];
+		var icon = new L.DivIcon({
-		latlngs.push(getRandomLatLng(map));
+			iconSize: new L.Point(8, 8),
-		latlngs.push(getRandomLatLng(map));
+			className: 'leaflet-div-icon leaflet-editing-icon'
+		});
+
+		var latlngs = [],
+			path;
+
+		for (var i = 0; i < 5; i++) {
 			latlngs.push(getRandomLatLng(map));
 
-		var path = new L.Polygon(latlngs);
+			(function (i) {
-
+				var marker = new L.Marker(latlngs[i], {
-		console.log(latlngs);
+					draggable: true,
-		
+					icon: icon
-		var marker = new L.Marker(latlngs[0], {draggable: true});
+				});
 				map.addLayer(marker);
 
 				marker.on('drag', function() {
-			latlngs[0] = marker.getLatLng();
+					latlngs[i] = marker.getLatLng();
-			path.setLatLngs(latlngs);
+					path.redraw();
 				});
+			}(i));
+		}
+
+		path = new L.Polygon(latlngs, {clickable: false});
 
 		map.addLayer(path);
 	</script>

dist/leaflet-src.js

@@ -2167,19 +2167,21 @@ L.ImageOverlay = L.Class.extend({
 
 
 L.Icon = L.Class.extend({
+	options: {
 		iconUrl: L.ROOT_URL + 'images/marker.png',
-	shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
-
 		iconSize: new L.Point(25, 41),
-	shadowSize: new L.Point(41, 41),
-
 		iconAnchor: new L.Point(13, 41),
 		popupAnchor: new L.Point(0, -33),
 
-	initialize: function (iconUrl) {
+		shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',
-		if (iconUrl) {
+		shadowSize: new L.Point(41, 41),
-			this.iconUrl = iconUrl;
+		shadowOffset: new L.Point(0, 0),
-		}
+
+		className: ''
+	},
+
+	initialize: function (options) {
+		L.Util.setOptions(this, options);
 	},
 
 	createIcon: function () {
@@ -2191,28 +2193,29 @@ L.Icon = L.Class.extend({
 	},
 
 	_createIcon: function (name) {
-		var size = this[name + 'Size'],
+		var img = this._createImg(this.options[name + 'Url']);
-			src  = this[name + 'Url'],
+		this._setIconStyles(img, name);
-			img;
+		return img;
+	},
 
-		if (!src && (name === 'shadow')) {
+	_setIconStyles: function (img, name) {
-			return null;
+		var options = this.options,
+			size = options[name + 'Size'],
+			anchor = options.iconAnchor || size.divideBy(2, true);
+
+		if (name === 'shadow') {
+			anchor._add(options.shadowOffset);
 		}
 
-		img = src ? this._createImg(src)
+		img.className = 'leaflet-marker-' + name + ' ' + options.className;
-		          : document.createElement('div');
 
-		img.className = 'leaflet-marker-' + name;
+		img.style.marginLeft = (-anchor.x) + 'px';
+		img.style.marginTop  = (-anchor.y) + 'px';
 
-		img.style.marginLeft = (-this.iconAnchor.x) + 'px';
+		if (options.iconSize) {
-		img.style.marginTop  = (-this.iconAnchor.y) + 'px';
-
-		if (size) {
 			img.style.width  = size.x + 'px';
 			img.style.height = size.y + 'px';
 		}
-
-		return img;
 	},
 
 	_createImg: function (src) {
@@ -2398,6 +2401,26 @@ L.Marker = L.Class.extend({
 });
 
 
+L.DivIcon = L.Icon.extend({
+	options: {
+		iconSize: new L.Point(12, 12),
+		iconAnchor: null,
+		popupAnchor: new L.Point(0, -8),
+		className: 'leaflet-div-icon'
+	},
+
+	createIcon: function () {
+		var div = document.createElement('div');
+		this._setIconStyles(div, 'icon');
+		return div;
+	},
+
+	createShadow: function () {
+		return null;
+	}
+});
+
+
 
 L.Popup = L.Class.extend({
 	includes: L.Mixin.Events,
@@ -2608,7 +2631,7 @@ L.Marker.include({
 
 	bindPopup: function (content, options) {
 		options = L.Util.extend({
-			offset: this.options.icon.popupAnchor
+			offset: this.options.icon.options.popupAnchor
 		}, options);
 
 		if (!this._popup) {
@@ -2850,11 +2873,12 @@ L.Path = L.Class.extend({
 		return this;
 	},
 
-	_redraw: function () {
+	redraw: function () {
 		if (this._map) {
 			this.projectLatlngs();
 			this._updatePath();
 		}
+		return this;
 	}
 });
 
@@ -3537,19 +3561,17 @@ L.Polyline = L.Path.extend({
 
 	setLatLngs: function (latlngs) {
 		this._latlngs = latlngs;
-		this._redraw();
+		return this.redraw();
-		return this;
 	},
 
 	addLatLng: function (latlng) {
 		this._latlngs.push(latlng);
-		this._redraw();
+		return this.redraw();
-		return this;
 	},
 
 	spliceLatLngs: function (index, howMany) {
 		var removed = [].splice.apply(this._latlngs, arguments);
-		this._redraw();
+		this.redraw();
 		return removed;
 	},
 
@@ -3831,14 +3853,12 @@ L.Circle = L.Path.extend({
 
 	setLatLng: function (latlng) {
 		this._latlng = latlng;
-		this._redraw();
+		return this.redraw();
-		return this;
 	},
 
 	setRadius: function (radius) {
 		this._mRadius = radius;
-		this._redraw();
+		return this.redraw();
-		return this;
 	},
 
 	projectLatlngs: function () {
@@ -3921,8 +3941,7 @@ L.CircleMarker = L.Circle.extend({
 
 	setRadius: function (radius) {
 		this._radius = radius;
-		this._redraw();
+		return this.redraw();
-		return this;
 	}
 });
 
@@ -4322,6 +4341,7 @@ L.Draggable = L.Class.extend({
 		}
 		L.DomEvent.removeListener(this._dragStartTarget, L.Draggable.START, this._onDown);
 		this._enabled = false;
+		this._moved = false;
 	},
 
 	_onDown: function (e) {
@@ -4417,11 +4437,12 @@ L.Draggable = L.Class.extend({
 
 	_setMovingCursor: function () {
 		this._bodyCursor = document.body.style.cursor;
-		document.body.style.cursor = 'move';
+		this._dragStartTarget.style.cursor = document.body.style.cursor = 'move';
 	},
 
 	_restoreCursor: function () {
 		document.body.style.cursor = this._bodyCursor;
+		this._dragStartTarget.style.cursor = '';
 	},
 
 	_simulateEvent: function (type, e) {

dist/leaflet.css

@@ -37,6 +37,13 @@
 .leaflet-container img {
 	max-width: none !important;
 	}
+.leaflet-div-icon {
+	background: #fff;
+	box-shadow: 0 0 6px #000;
+}
+.leaflet-editing-icon {
+	border-radius: 2px;
+}
 
 .leaflet-tile-pane { z-index: 2; }
 

src/layer/marker/DivIcon.js

@@ -0,0 +1,18 @@
+L.DivIcon = L.Icon.extend({
+	options: {
+		iconSize: new L.Point(12, 12),
+		iconAnchor: null,
+		popupAnchor: new L.Point(0, -8),
+		className: 'leaflet-div-icon'
+	},
+
+	createIcon: function () {
+		var div = document.createElement('div');
+		this._setIconStyles(div, 'icon');
+		return div;
+	},
+
+	createShadow: function () {
+		return null;
+	}
+});