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
compare to Canvas based rendering with same data here:/sumbera/11114288
xxxxxxxxxx
<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" />
<style>
body {
margin: 0px;
}
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: #333;
}
</style>
</head>
<body>
<!-- Base libraries-->
<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>
<script>
var lmap = new L.map('map').setView([50.00, 14.44], 9)
.addLayer(L.tileLayer("https://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"));
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