Leaflet Canvas drawing

by aidankirrane

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="map"></div>

CSS

#map { height: 300px;margin:15px; }

JavaScript

// BEGIN MASK
L.TileLayer.spheres = L.TileLayer.Canvas.extend({
    
    options: {
        radius: 13000, // in meters
        opacity: 1
    },
    
	initialize: function (options, data) {
        L.Util.setOptions(this, options);
        this.drawTile = function (canvas, tilePoint, zoom) {
            this.ctx = canvas.getContext('2d');
            var bounds = this._getBounds(tilePoint);
            this._getPoints(bounds, tilePoint);
        };
    },
    
    addData: function (dataset) {
        this.data = dataset;
    },
    
    _plot: function (point, size, tilePoint) {
        var s = tilePoint.multiplyBy(this.options.tileSize);
        var p = this._map.project(new L.LatLng(point[0], point[1]));
        var x = Math.round(p.x - s.x);
        var y = Math.round(p.y - s.y);
        var point =  [x, y];
        var ctx = this.ctx;
        var grd = ctx.createRadialGradient(point[0], point[1], size/100, point[0], point[1], size);
        grd.addColorStop(0, 'rgba(255,0,0,.6)');
        grd.addColorStop(1, 'rgba(0,100,0,.1)');
        ctx.beginPath();
        ctx.arc(point[0], point[1], size, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fillStyle = grd;
        ctx.fill();
    },
    
    _scale: function (lat, lng) {
        var lngRadius = (this.options.radius / 40075017) * 360 / Math.cos(L.LatLng.DEG_TO_RAD * lat),
            latlng2 = new L.LatLng(lat, lng - lngRadius),
            point2 = this._map.latLngToLayerPoint(latlng2),
            point = this._map.latLngToLayerPoint([lat, lng]);
		return Math.max(Math.round(point.x - point2.x), 1);
    },
    
    _getBounds: function(tilePoint) {
        var size = this.options.tileSize,
            radius = this.options.radius;
        var nwPoint = tilePoint.multiplyBy(size);
        var sePoint = nwPoint.add(new L.Point(size, size));
        var pad = new L.Point(radius, radius);
        nwPoint = nwPoint.subtract(pad);
        sePoint = sePoint.add(pad);
        var bounds = new...