Class Extension WebGL Leaflet
HTML
<script src="https://raw.github.com/pyalot/webgl-heatmap/master/webgl-heatmap.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<p>Extend Leaflet to add WebGL Layer:</p>
<div id="map"></div>
CSS
#map { height: 380px; }
JavaScript
var map = L.map('map').setView([51.0682, -105.075], 5);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/bozdoz.map-z05i4vdt/{z}/{x}/{y}.png').addTo(map);
/* Extend Leaflet to add WebGL layer to map */
L.TileLayer.WebGLHeatMap = L.Class.extend({
options: {
size: 15000,
opacity: 1,
},
initialize: function(options){
this.data = [];
L.Util.setOptions(this, options);
},
onAdd: function() {
this.map = map;
this.options.tileSize = this.options.tileSize || this.map._layers[15].options.tileSize;
var container = document.getElementsByClassName('leaflet-overlay-pane')[0];
var canv = this._canvas = document.createElement("canvas");
canv.width = this.map.getSize().x;
canv.height = this.map.getSize().y;
canv.style.opacity = this.options.opacity;
container.appendChild(canv);
this.WebGLHeatMap = createWebGLHeatmap({canvas: canv});
map.on("moveend", this._redraw, this);
this._redraw();
},
onRemove: function() {
map.getPanes().overlayPane.removeChild(this._canvas);
map.off("moveend", this._redraw, this);
},
addData: function(lat, lon, value) {
this.data.push({"lat":lat, "lon":lon, "v":value/1000});
return this;
},
_scale: function (point) {
var nwPoint = point.multiplyBy(this.options.tileSize);
var centerPoint = nwPoint.add(new L.Point(this.options.tileSize/2, this.options.tileSize/2));
this._latlng = this.map.unproject(centerPoint);
var lngRadius = ((this.options.size / 40075017) * 360) / Math.cos(L.LatLng.DEG_TO_RAD * this._latlng.lat),
latlng2 = new L.LatLng(this._latlng.lat, this._latlng.lng - lngRadius, true),
point2 = this.map.latLngToLayerPoint(latlng2),
point = this.map.latLngToLayerPoint(this._latlng);
this._radius = Math.max(Math.round(point.x - point2.x), 12);
},
...