Make new HeatCanvas leaflet layer that uses all data for rendering, n…

…ot just the current bounds.

src/shareabouts_client/static/js/Leaflet.ImageOverlay.HeatCanvas.js

@@ -0,0 +1,58 @@
+/*
+ * L.ImageOverlay.Canvas is used to overlay HTML5 canvases over the map (to specific geographical bounds).
+ */
+
+L.ImageOverlay.HeatCanvas = L.ImageOverlay.Canvas.extend({
+  options: {
+    step: 1,
+    degree: HeatCanvas.LINEAR,
+    opacity: 0.6,
+    colorscheme: null
+  },
+
+  initialize: function (data, options) { // ([[latLng, value], ...], Object)
+    var i, len;
+
+    this._bounds = L.latLngBounds([data[0][0], data[0][0]]);
+
+    for (i=1, len=data.length; i<len; i++) {
+      this._bounds.extend(data[i][0]);
+    }
+
+    this.data = data;
+    L.setOptions(this, options);
+  },
+
+  _initImage: function () {
+    L.ImageOverlay.Canvas.prototype._initImage.call(this);
+
+    //this.canvas is a thing
+    this.heatCanvas = new HeatCanvas(this.canvas);
+    this.heatCanvas.bgcolor = this.options.bgcolor;
+  },
+
+  _reset: function () {
+    var canvas   = this.canvas,
+        topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
+        size = this._map.latLngToLayerPoint(this._bounds.getSouthEast())._subtract(topLeft),
+        i, len, pixel;
+
+    L.DomUtil.setPosition(canvas, topLeft);
+
+    this.heatCanvas.resize(size.x, size.y);
+
+    this.heatCanvas.clear();
+    for (i=0, len=this.data.length; i<len; i++) {
+      pixel = this._map.latLngToLayerPoint(this.data[i][0]);
+      this.heatCanvas.push(
+              Math.floor(pixel.x - topLeft.x),
+              Math.floor(pixel.y - topLeft.y),
+              this.data[i][1]);
+    }
+    this.heatCanvas.render(this.options.step, this.options.degree, this.options.colorscheme);
+  }
+});
+
+L.imageOverlay.heatCanvas = function (data, options) {
+  return new L.ImageOverlay.HeatCanvas(data, options);
+};

src/shareabouts_client/static/js/admin.js

@@ -22,19 +22,18 @@ var StompingGround = StompingGround || {};
 
   function initMap(data) {
     var map = L.map('heatmap', SG.Config.map),
-        layer = L.tileLayer(SG.Config.layer.url, SG.Config.layer).addTo(map);
-        heatmapLayer = new L.TileLayer.HeatCanvas({},{
-          'step':0.5,
-          'degree':HeatCanvas.LINEAR,
-          'opacity':0.7}
-        ),
+        layer = L.tileLayer(SG.Config.layer.url, SG.Config.layer).addTo(map),
+        heatmapLayer,
         heatmapData = [];
 
     _.each(data, function(obj, i) {
-      heatmapData[i] = {lat: obj.location.lat, lon: obj.location.lng, v: 20};
+      heatmapData[i] = [[obj.location.lat, obj.location.lng], 20];
+    });
+
+    heatmapLayer = new L.ImageOverlay.HeatCanvas(heatmapData,{
+      bgcolor: [0, 0, 0, 0]
     });
 
-    heatmapLayer.data = heatmapData;
     map.addLayer(heatmapLayer);
   }
 

src/shareabouts_client/static/lib/Leaflet.ImageOverlay.Canvas.js

@@ -0,0 +1,54 @@
+/*
+ * L.ImageOverlay.Canvas is used to overlay HTML5 canvases over the map (to specific geographical bounds).
+ */
+
+L.ImageOverlay.Canvas = L.ImageOverlay.extend({
+  initialize: function (bounds, options) { // (LatLngBounds, Object)
+    this._bounds = L.latLngBounds(bounds);
+
+    L.setOptions(this, options);
+  },
+
+  _initImage: function () {
+    var topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
+        size = this._map.latLngToLayerPoint(this._bounds.getSouthEast())._subtract(topLeft);
+
+    this._image = this.canvas = L.DomUtil.create('canvas', 'leaflet-image-layer');
+    this._image.width  = size.x;
+    this._image.height = size.y;
+
+    if (this._map.options.zoomAnimation && L.Browser.any3d) {
+      L.DomUtil.addClass(this._image, 'leaflet-zoom-animated');
+    } else {
+      L.DomUtil.addClass(this._image, 'leaflet-zoom-hide');
+    }
+
+    this._updateOpacity();
+
+    L.extend(this._image, {
+      galleryimg: 'no',
+      onselectstart: L.Util.falseFn,
+      onmousemove: L.Util.falseFn,
+      onload: L.bind(this._onImageLoad, this)
+    });
+  },
+
+  _reset: function () {
+    var image   = this._image,
+        topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
+        size = this._map.latLngToLayerPoint(this._bounds.getSouthEast())._subtract(topLeft);
+
+    L.DomUtil.setPosition(image, topLeft);
+
+    image.style.width  = size.x + 'px';
+    image.style.height = size.y + 'px';
+  },
+
+  _onImageLoad: function () {
+    this.fire('load');
+  }
+});
+
+L.imageOverlay.canvas = function (bounds, options) {
+  return new L.ImageOverlay.Canvas(bounds, options);
+};

src/shareabouts_client/templates/admin.html

@@ -34,9 +34,9 @@
   <link href="{{ STATIC_URL }}css/main.css" rel="stylesheet" media="screen">
   <link href="{{ STATIC_URL }}css/admin.css" rel="stylesheet" media="screen">
 
-  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
   <!--[if lte IE 8]>
-    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
   <![endif]-->
 
   <!-- Google Webfonts -->
@@ -79,10 +79,11 @@ <h1>Heat Map</h1>
   <script src="{{ STATIC_URL }}lib/bootstrap/js/bootstrap.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
   <script src="{{ STATIC_URL }}lib/datatables/datatables-bootstrap.js"></script>
-  <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
+  <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
+  <script src="{{ STATIC_URL }}lib/Leaflet.ImageOverlay.Canvas.js"></script>
   <script src="{{ STATIC_URL }}lib/heatcanvas.js"></script>
   <script src="{{ STATIC_URL }}lib/heatcanvas-worker.js"></script>
-  <script src="{{ STATIC_URL }}lib/heatcanvas-leaflet.js"></script>
+  <script src="{{ STATIC_URL }}js/Leaflet.ImageOverlay.HeatCanvas.js"></script>
   <script src="{{ STATIC_URL }}js/utils.js"></script>
   <script src="{{ STATIC_URL }}js/config.js"></script>
   <script src="{{ STATIC_URL }}js/models.js"></script>