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();