zoom-dependent Circle; fixed one is now called CircleMarker, fixes #44

CHANGELOG.md

@@ -4,11 +4,12 @@ Leaflet Changelog
 ## 0.2 (master)
 
  * Added **WMS support** (L.TileLayer.WMS), currently EPSG:3857 only. [#50](https://github.com/CloudMade/Leaflet/issues/50)
- * Added `maxZoom` argument to `map.locateAndSetView` method.
+ * `L.Circle` is now zoom-dependent (with radius in meters); circle of a permanent size is now called `L.CircleMarker`. [#44](https://github.com/CloudMade/Leaflet/issues/44)
  * Disabled zoom animation on Android by default because it's buggy on some devices (will be enabled back when it's stable enough). [#32](https://github.com/CloudMade/Leaflet/issues/32)
+ * Added `maxZoom` argument to `map.locateAndSetView` method.
+ * Improved geolocation error handling, explicit timeout. [#61](https://github.com/CloudMade/Leaflet/issues/61)
  * Fixed a bug where zooming is broken if the map contains a polygon and you zoom to an area where it's not visible. [#47](https://github.com/CloudMade/Leaflet/issues/47)
  * Fixed a bug where closed polylines would not appear on the map.
- * Improved geolocation error handling, explicit timeout. [#61](https://github.com/CloudMade/Leaflet/issues/61)
  * Fixed a bug where map isn't displayed in Firefox when there's an `img { max-width: 100% }` rule.
 
 ## 0.1 (2011-05-13)

build/build.bat

@@ -33,6 +33,7 @@ java -jar ../lib/closure-compiler/compiler.jar ^
 --js ../src/layer/vector/Polyline.js ^
 --js ../src/layer/vector/Polygon.js ^
 --js ../src/layer/vector/Circle.js ^
+--js ../src/layer/vector/CircleMarker.js ^
 --js ../src/handler/Handler.js ^
 --js ../src/handler/MapDrag.js ^
 --js ../src/handler/TouchZoom.js ^

build/deps.js

@@ -72,7 +72,13 @@ var deps = {
 	Circle: {
 		src: ['layer/vector/Circle.js'],
 		deps: ['Path'],
-		desc: 'Circle overlays.'
+		desc: 'Circle overlays (with radius in meters).'
+	},
+	
+	CircleMarker: {
+		src: ['layer/vector/CircleMarker.js'],
+		deps: ['Circle'],
+		desc: 'Circle overlays with a constant pixel radius.'
 	},
 
 	

debug/include.js

@@ -42,6 +42,7 @@
 		'layer/vector/Polyline.js',
 		'layer/vector/Polygon.js',
 		'layer/vector/Circle.js',
+		'layer/vector/CircleMarker.js',
 		
 		'handler/Handler.js',
 		'handler/MapDrag.js',

dist/leaflet.js

@@ -60,7 +60,8 @@ document.createElement("div"),this._map._pathRoot.className="leaflet-vml-contain
 this.options.fillColor||this.options.color,this._fill.opacity=this.options.fillOpacity},_updatePath:function(){this._container.style.display="none";this._path.v=this.getPathString()+" ";this._container.style.display=""}});L.Path.include({bindPopup:function(a,b){this._popup=new L.Popup(b);this._popup.setContent(a);this.on("click",this._openPopup,this);return this},_openPopup:function(a){this._popup.setLatLng(a.latlng);this._map.openPopup(this._popup)}});L.Polyline=L.Path.extend({initialize:function(a,b){L.Path.prototype.initialize.call(this,b);this._latlngs=a},options:{smoothFactor:1,noClip:!1,updateOnMoveEnd:!0},projectLatlngs:function(){this._originalPoints=[];for(var a=0,b=this._latlngs.length;a<b;a++)this._originalPoints[a]=this._map.latLngToLayerPoint(this._latlngs[a])},getPathString:function(){for(var a=0,b=this._parts.length,c="";a<b;a++)c+=this._getPathPartStr(this._parts[a]);return c},_getPathPartStr:function(a){for(var b=L.Path.VML,c=0,
 d=a.length,e="",f;c<d;c++)f=a[c],b&&f._round(),e+=(c?"L":"M")+f.x+" "+f.y;return e},_clipPoints:function(){var a=this._originalPoints,b=a.length,c,d,e;if(this.options.noClip)this._parts=[a];else{var f=this._parts=[],g=this._map._pathViewport,h=L.LineUtil;for(d=c=0;c<b-1;c++)if(e=h.clipSegment(a[c],a[c+1],g,c))if(f[d]=f[d]||[],f[d].push(e[0]),e[1]!=a[c+1]||c==b-2)f[d].push(e[1]),d++}},_simplifyPoints:function(){for(var a=this._parts,b=L.LineUtil,c=0,d=a.length;c<d;c++)a[c]=b.simplify(a[c],this.options.smoothFactor)},
 _updatePath:function(){this._clipPoints();this._simplifyPoints();L.Path.prototype._updatePath.call(this)}});L.Polygon=L.Polyline.extend({options:{fill:!0},initialize:function(a,b){L.Polyline.prototype.initialize.call(this,a,b);if(a[0]instanceof Array)this._latlngs=a[0],this._holes=a.slice(1)},projectLatlngs:function(){L.Polyline.prototype.projectLatlngs.call(this);this._holePoints=[];if(this._holes)for(var a=0,b=this._holes.length;a<b;a++){this._holePoints[a]=[];for(var c=0,d=this._holes[a].length;c<d;c++)this._holePoints[a][c]=this._map.latLngToLayerPoint(this._holes[a][c])}},_clipPoints:function(){var a=
-[];this._parts=[this._originalPoints].concat(this._holePoints);if(!this.options.noClip){for(var b=0,c=this._parts.length;b<c;b++){var d=L.PolyUtil.clipPolygon(this._parts[b],this._map._pathViewport);d.length&&a.push(d)}this._parts=a}},_getPathPartStr:function(a){return L.Polyline.prototype._getPathPartStr.call(this,a)+(L.Path.SVG?"z":"x")}});L.Circle=L.Path.extend({initialize:function(a,b,c){L.Path.prototype.initialize.call(this,c);this._latlng=a;this._radius=b},options:{fill:!0},projectLatlngs:function(){this._point=this._map.latLngToLayerPoint(this._latlng)},getPathString:function(){var a=this._point,b=this._radius;return L.Path.SVG?"M"+a.x+","+(a.y-b)+"A"+b+","+b+",0,1,1,"+(a.x-0.1)+","+(a.y-b)+" z":(a._round(),b=Math.round(b),"AL "+a.x+","+a.y+" "+b+","+b+" 0,23592600")}});L.Handler=L.Class.extend({initialize:function(a){this._map=a},enabled:function(){return!!this._enabled}});L.Handler.MapDrag=L.Handler.extend({enable:function(){if(!this._enabled){if(!this._draggable)this._draggable=new L.Draggable(this._map._mapPane,this._map._container),this._draggable.on("dragstart",this._onDragStart,this),this._draggable.on("drag",this._onDrag,this),this._draggable.on("dragend",this._onDragEnd,this);this._draggable.enable();this._enabled=!0}},disable:function(){if(this._enabled)this._draggable.disable(),this._enabled=!1},moved:function(){return this._draggable._moved},_onDragStart:function(){this._map.fire("movestart");
+[];this._parts=[this._originalPoints].concat(this._holePoints);if(!this.options.noClip){for(var b=0,c=this._parts.length;b<c;b++){var d=L.PolyUtil.clipPolygon(this._parts[b],this._map._pathViewport);d.length&&a.push(d)}this._parts=a}},_getPathPartStr:function(a){return L.Polyline.prototype._getPathPartStr.call(this,a)+(L.Path.SVG?"z":"x")}});L.Circle=L.Path.extend({initialize:function(a,b,c){L.Path.prototype.initialize.call(this,c);this._latlng=a;this._mRadius=b},options:{fill:!0},projectLatlngs:function(){var a=this._map.options.scaling(this._map._zoom);this._point=this._map.latLngToLayerPoint(this._latlng);this._radius=this._mRadius/40075017*a},getPathString:function(){var a=this._point,b=this._radius;return L.Path.SVG?"M"+a.x+","+(a.y-b)+"A"+b+","+b+",0,1,1,"+(a.x-0.1)+","+(a.y-b)+" z":(a._round(),b=Math.round(b),"AL "+a.x+","+a.y+
+" "+b+","+b+" 0,23592600")}});L.CircleMarker=L.Circle.extend({initialize:function(a,b){L.Circle.prototype.initialize.apply(this,arguments);this._radius=b},projectLatlngs:function(){this._point=this._map.latLngToLayerPoint(this._latlng)}});L.Handler=L.Class.extend({initialize:function(a){this._map=a},enabled:function(){return!!this._enabled}});L.Handler.MapDrag=L.Handler.extend({enable:function(){if(!this._enabled){if(!this._draggable)this._draggable=new L.Draggable(this._map._mapPane,this._map._container),this._draggable.on("dragstart",this._onDragStart,this),this._draggable.on("drag",this._onDrag,this),this._draggable.on("dragend",this._onDragEnd,this);this._draggable.enable();this._enabled=!0}},disable:function(){if(this._enabled)this._draggable.disable(),this._enabled=!1},moved:function(){return this._draggable._moved},_onDragStart:function(){this._map.fire("movestart");
 this._map.fire("dragstart")},_onDrag:function(){this._map.fire("move");this._map.fire("drag")},_onDragEnd:function(){this._map.fire("moveend");this._map.fire("dragend")}});L.Handler.TouchZoom=L.Handler.extend({enable:function(){if(L.Browser.mobileWebkit&&!this._enabled)L.DomEvent.addListener(this._map._container,"touchstart",this._onTouchStart,this),this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._map._container,"touchstart",this._onTouchStart,this),this._enabled=!1},_onTouchStart:function(a){if(a.touches&&!(a.touches.length!=2||this._map._animatingZoom)){var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]),
 d=this._map.containerPointToLayerPoint(this._map.getSize().divideBy(2));this._startCenter=b.add(c).divideBy(2,!0);this._startDist=b.distanceTo(c);this._moved=!1;this._zooming=!0;this._centerOffset=d.subtract(this._startCenter);L.DomEvent.addListener(document,"touchmove",this._onTouchMove,this);L.DomEvent.addListener(document,"touchend",this._onTouchEnd,this);L.DomEvent.preventDefault(a)}},_onTouchMove:function(a){if(a.touches&&a.touches.length==2){if(!this._moved)this._map._mapPane.className+=" leaflet-zoom-anim",
 this._map._prepareTileBg(),this._moved=!0;var b=this._map.mouseEventToLayerPoint(a.touches[0]),c=this._map.mouseEventToLayerPoint(a.touches[1]);this._scale=b.distanceTo(c)/this._startDist;this._delta=b.add(c).divideBy(2,!0).subtract(this._startCenter);this._map._tileBg.style.webkitTransform=[L.DomUtil.getTranslateString(this._delta),L.DomUtil.getScaleString(this._scale,this._startCenter)].join(" ");L.DomEvent.preventDefault(a)}},_onTouchEnd:function(){if(this._moved&&this._zooming){this._zooming=

src/layer/vector/Circle.js

@@ -1,10 +1,13 @@
+/*
+ * L.Circle is a circle overlay (with a certain radius in meters). 
+ */
 
 L.Circle = L.Path.extend({
 	initialize: function(latlng, radius, options) {
 		L.Path.prototype.initialize.call(this, options);
 		
 		this._latlng = latlng;
-		this._radius = radius;
+		this._mRadius = radius;
 	},
 	
 	options: {
@@ -12,7 +15,11 @@ L.Circle = L.Path.extend({
 	},
 	
 	projectLatlngs: function() {
+		var equatorLength = 40075017,
+			scale = this._map.options.scaling(this._map._zoom);
+		
 		this._point = this._map.latLngToLayerPoint(this._latlng);
+		this._radius = (this._mRadius / equatorLength) * scale; 
 	},
 	
 	getPathString: function() {

src/layer/vector/CircleMarker.js

@@ -0,0 +1,14 @@
+/*
+ * L.CircleMarker is a circle overlay with a permanent pixel radius. 
+ */
+
+L.CircleMarker = L.Circle.extend({
+	initialize: function(latlng, radius, options) {
+		L.Circle.prototype.initialize.apply(this, arguments);
+		this._radius = radius;
+	},
+	
+	projectLatlngs: function() {
+		this._point = this._map.latLngToLayerPoint(this._latlng);
+	}
+});