SVG scaled overlay in Leaflet

more info also here: http://blog.sumbera.com/2015/08/14/svg-fast-scaled-overlay-on-leaflet-1-0/ compare to default SVG circle overlay here:/sumbera/dcfcc3887ff56a9e1928

scaled SVG draw prototype on top of Leaflet 1.0 beta
note it uses L.map patch to get it working right
SVG data are not modified, only scaled and optionaly radius/stroke width etc. can be specified on onScaleChange callback
this approach make it faster for zoom-in/out than default leaflet implementation or default approach that re-calculates point view coordinates with each scal echange
"S" in SVG is for "Scalable" so why not to leverage it
very experimental, this is already 3rd attempt, 1st one was using absolute pixel coordinates, but had problems on IE and FF with large numbera (>1M) in transform
this sample is using 24T real-data sample points, some points are overlapping so they are brighter
best performance in Chrome, FF is much worse and Ie is very bad

compare to Canvas based rendering with same data here:/sumbera/11114288

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>SVG Simple overlay</title>
    
    <link rel="stylesheet" href="https://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.css" />

<script src="https://www.sumbera.com/gist/js/leaflet/svg/scaled/d3-3.5.5.min.js"></script>
    <script src="https://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.js"></script>
    <script src="L.SvgScaleOverlay.js"></script>
    <script src="https://www.sumbera.com/gist/data.js" charset="utf-8"></script>
    <div id="map">
    </div>
    <div id="tooltip" style="width:230px; height:100px;">
     </div>

var circles;

var svgOverlay = L.SvgScaleOverlay();
            var radius = 3;
 
           
            //------------------------------------------------------------
            svgOverlay.onInitData = function () {
                if (!circles) {
                    var g = d3.select(this._g);
                    circles = g.selectAll("circle")
                                    .data(data)
                                    .enter().append('circle');
                    // -- opacity based on grouping optimization in point data
                    circles.style("fill-opacity", 0.8);
                    circles.style("fill", "rgba(255,116,116, 0.5)")

}
                
                
                circles.each(function (d) {
                    var elem = d3.select(this);
                    var point = lmap.project(L.latLng(new L.LatLng(d[0], d[1])))._subtract(lmap.getPixelOrigin());
                    //var point = lmap.latLngToLayerPoint(new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
                    elem.attr('cx', point.x)
                    elem.attr('cy', point.y)
                    elem.attr('r', radius)
                })
            };

svgOverlay.onScaleChange = function (scaleDiff) {
                if (scaleDiff > 0.5) {
                    var newRadius = radius * 1 / scaleDiff;

var currentRadius = d3.select('circle').attr("r");
                    if (currentRadius != newRadius) {
                        d3.selectAll("circle").attr('r', newRadius);
                    }
                }

}

lmap.addLayer(svgOverlay);
            /***********************/

</script>
</body>

</html>

Modified http://www.sumbera.com/gist/js/leaflet/svg/scaled/d3-3.5.5.min.js to a secure url

Modified http://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.js to a secure url

Modified http://www.sumbera.com/gist/data.js to a secure url

https://www.sumbera.com/gist/js/leaflet/svg/scaled/d3-3.5.5.min.js

https://www.sumbera.com/gist/js/leaflet/svg/scaled/leaflet.js

https://www.sumbera.com/gist/data.js