L.circleMarker created Markers behave oddly when RaphaelLayer Features are used

[eisensheng]

Markers created with circleMarker behave oddly before and after RaphaelLayer Features are used.

It can be reproduced inside the demo by placing this little script into the index.js file:

(function() {
    var map = new L.Map('map');
    var tiles = new L.TileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    });

    L.circleMarker([-34.810835031000003, 138.516159968000011],
                   {radius: 10,
                    color: '#0f0',
                    opacity: 1,
                    weight: 2,
                    fillColor: '#0f0',
                    fillOpacity: 0.5}).addTo(map);

    var adelaide = new L.LatLng(-34.93027490891421, 138.603875041008);
    map.setView(adelaide, 10).addLayer(tiles);

    // comment this out and the circleMarker will be visible again
    var m = new R.Marker(adelaide);
    map.addLayer(m);
})();

[eskimomatt]

I ended up having to use a raphael object to make a circle marker and extend it to produce the latlng callback needed - i used an edited version of the 'pulse' object:

R.Pulse = R.Layer.extend({
	initialize: function(latlng, radius, attr, pulseAttr, options) {
		R.Layer.prototype.initialize.call(this, options);

		this._latlng = latlng;
		this._radius = (typeof radius == 'number' ? radius : 6);
		this._attr = (typeof radius == 'object' ? radius : (typeof attr == 'object' ? attr : {'fill': '#30a3ec', 'stroke': '#30a3ec'}));
		this._pulseAttr = (typeof radius == 'object' ? attr : typeof pulseAttr == 'object' ? pulseAttr : {
			'stroke-width': 3,
			'stroke': this._attr.stroke
		});
		this._repeat = 3;
	},
	getLatLng: function(){
		return this._latlng;
	},
	onRemove: function (map) {
		R.Layer.prototype.onRemove.call(this, map);

		if(this._marker) this._marker.remove();		
		if(this._pulse) this._pulse.remove();
	},

	projectLatLngs: function() {
		if(this._marker) this._marker.remove();
		if(this._pulse) this._pulse.remove();

		var p = this._map.latLngToLayerPoint(this._latlng);

		this._marker = this._paper.circle(p.x, p.y, this._radius).attr(this._attr);

		var anim = Raphael.animation({
						'0%': {transform: 's0.3', opacity: 0},
						'100%': {transform: 's1.0', opacity: 1}
					}, 200);

		this._marker.animate(anim);
	}
});

and then i could use it pretty much the same as the circle marker, even with tooltips:

var marker = new R.Pulse({lat:item.latitude,lng:item.longitude}, 
				4,
				{'stroke': activeRed, 'fill': activeRed}, 
				{'stroke': activeRed, 'stroke-width': 1});
			locs.addLayer(marker);


		    marker.bindTooltip(item.placeName,{
                permanent: true,
                direction: item.labelPosition,
                className: 'toolTip '+item.placeName,
                offset: [item.labelOffset[0],item.labelOffset[1]]
	        }).openTooltip();