Merge branch 'master' of https://github.com/florianf/Leaflet into path-canvas

debug/leaflet-include.js

@@ -51,11 +51,13 @@
 		
 		'layer/vector/Path.js',
 		'layer/vector/Path.VML.js',
+		'layer/vector/Path.Canvas.js',
 		'layer/vector/Path.Popup.js',
 		'layer/vector/Polyline.js',
 		'layer/vector/Polygon.js',
 		'layer/vector/MultiPoly.js',
 		'layer/vector/Circle.js',
+		'layer/vector/Circle.Canvas.js',
 		'layer/vector/CircleMarker.js',
 		
 		'layer/GeoJSON.js',
@@ -97,4 +99,4 @@
 	for (var i = 0; i < scripts.length; i++) {
 		document.writeln("<script type='text/javascript' src='" + path + "../src/" + scripts[i] + "'></script>");
 	}
-})();
+})();

debug/vector/vector.html

@@ -30,9 +30,51 @@
 		map.addLayer(new L.Marker(latlngs[0]));
 		map.addLayer(new L.Marker(latlngs[len - 1]));
 		
+		var circleLocation = new L.LatLng(51.508, -0.11),
+		circleOptions = {
+		    color: 'red', 
+		    fillColor: 'blue', 
+		    fillOpacity: 0.7
+		};
+		
+		var circle = new L.Circle(circleLocation, 500000, circleOptions);
+		map.addLayer(circle);
+		
 		map.addLayer(path);
 		
+		var p1 = latlngs[0],
+			p2 = latlngs[parseInt(len/4)],
+			p3 = latlngs[parseInt(len/3)],
+			p4 = latlngs[parseInt(len/2)],
+			p5 = latlngs[len - 1],
+			polygonPoints = [p1, p2, p3, p4, p5];
+
+		var h1 = new L.LatLng(p1.lat, p1.lng),
+			h2 = new L.LatLng(p2.lat, p2.lng),
+			h3 = new L.LatLng(p3.lat, p3.lng),
+			h4 = new L.LatLng(p4.lat, p4.lng),
+			h5 = new L.LatLng(p5.lat, p5.lng);
+		
+		h1.lng += 20;
+		h2.lat -= 5;
+		h3.lat -= 5;
+		h4.lng -= 10;
+		h5.lng -= 8;
+		h5.lat += 10;
+		
+		var holePoints = [h5, h4, h3, h2, h1];
+
+		var polygon = new L.Polygon([polygonPoints, holePoints], {
+			fillColor: "#333"
+		});
+		map.addLayer(polygon);
+		
+		/*var hole = new L.Polygon([h1,h2,h3,h4,h5], {
+			fillColor: "green"
+		});
+		map.addLayer(hole);
+		*/
 		path.bindPopup("Hello world");
 	</script>
 </body>
-</html>
+</html>

src/layer/vector/Circle.Canvas.js

@@ -0,0 +1,12 @@
+/*
+ * Circle canvas specific drawing parts.
+ */
+
+L.Circle = L.Path.SVG || !L.Path.Canvas ? L.Circle : L.Circle.extend({
+	_drawPath : function() {
+		this._updateStyle();
+		var p = this._point,
+		r = this._radius;
+		this._ctx.arc(p.x,p.y,r, 0,Math.PI*2);
+	}
+});

src/layer/vector/Circle.js

@@ -48,4 +48,4 @@ L.Circle = L.Path.extend({
 			return "AL " + p.x + "," + p.y + " " + r + "," + r + " 0," + (65535 * 360);
 		}
 	}
-});
+});

src/layer/vector/Path.Canvas.js

@@ -0,0 +1,119 @@
+/*
+ * Vector rendering for all browsers that support canvas.
+ */
+
+L.Path.Canvas = (function() {
+	return !!document.createElement('canvas').getContext;
+})();
+
+L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({
+	initialize: function(options) {
+		L.Util.setOptions(this, options);
+	},
+	
+	statics: {
+		CLIP_PADDING: 0.02
+	},
+	
+	options :  {
+		updateOnMoveEnd: true
+	},
+		
+	_initRoot: function() {
+		if (!this._map._pathRoot) {
+			this._map._pathRoot = document.createElement("canvas");
+			this._ctx = this._map._pathRoot.getContext('2d');
+			
+			this._map._panes.overlayPane.appendChild(this._map._pathRoot);
+
+			this._map.on('moveend', this._updateCanvasViewport, this);
+			this._updateCanvasViewport();
+		}
+		else {
+			this._ctx = this._map._pathRoot.getContext('2d');
+		}
+	},
+		
+	_initStyle: function() {
+		//NOOP.
+	},
+		
+	_updateStyle: function() {
+		if (this.options.stroke) {
+			this._ctx.lineWidth = this.options.weight;
+			this._ctx.strokeStyle = this.options.color;
+		}
+		if (this.options.fill) {
+			this._ctx.fillStyle = this.options.fillColor || this.options.color;
+		}
+	},
+	
+	_drawPath : function() {	
+		this._updateStyle();				
+		this._ctx.beginPath();
+						
+		for (var i = 0, len = this._parts.length; i < len; i++) {
+			for (var j=0;j<this._parts[i].length;j++) {
+				var point = this._parts[i][j];
+				
+				if (j === 0) {
+					if (i > 0) {
+						this._ctx.closePath();
+					}
+					this._ctx.moveTo(point.x, point.y);
+				}
+				else {
+					this._ctx.lineTo(point.x,point.y);
+				}
+			}
+		}
+		
+		
+	},
+	
+	_updatePath: function() {
+		this._drawPath();
+		
+		if (this.options.fill) {
+			this._ctx.globalAlpha = this.options.fillOpacity;
+			this._ctx.closePath();
+			this._ctx.fill();	
+		}
+		
+		if (this.options.stroke) {
+			this._ctx.globalAlpha = this.options.opacity;
+			this._ctx.stroke();
+		}
+		
+	},
+
+	_updateCanvasViewport: function() {
+		this._updateViewport();
+		
+		var vp = this._map._pathViewport,
+			min = vp.min,
+			max = vp.max,
+			width = max.x - min.x,
+			height = max.y - min.y,
+			root = this._map._pathRoot,
+			pane = this._map._panes.overlayPane;
+	
+		// Hack to make flicker on drag end on mobile webkit less irritating
+		// Unfortunately I haven't found a good workaround for this yet
+		if (L.Browser.mobileWebkit) { pane.removeChild(root); }
+				
+		L.DomUtil.setPosition(root, min);
+		root.setAttribute('width', width);		//Attention resets canvas, but not on mobile webkit!
+		root.setAttribute('height', height);
+		
+		var vp = this._map._pathViewport;
+		this._ctx.translate(-vp.min.x, -vp.min.y);
+
+		
+		if (L.Browser.mobileWebkit) { pane.appendChild(root); }
+	},
+		
+	_initEvents :function() {
+		//doesn't work currently.
+	}
+});