Improve gmaps integration by supporting dragging, panning, and resize.

martindale · Oct 15, 2011 · a29e6c5 · a29e6c5
1 parent ce25b08
commit a29e6c5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/heatmap.js b/heatmap.js
@@ -186,6 +186,16 @@
                 me.set("height", config.height || 0);
                 me.set("debug", config.debug);
         },
+        resize: function () {
+                var element = this.get("element"),
+                    canvas = this.get("canvas"),
+                    acanvas = this.get("acanvas");
+                canvas.width = acanvas.width = element.style.width.replace(/px/, "") || this.getWidth(element);
+                this.set("width", canvas.width);
+                canvas.height = acanvas.height = element.style.height.replace(/px/, "") || this.getHeight(element);
+                this.set("height", canvas.height);
+        },
+
         init: function(){
                 var me = this,
                     canvas = document.createElement("canvas"),
@@ -196,10 +206,7 @@
 
                 me.set("canvas", canvas);
                 me.set("acanvas", acanvas);
-                canvas.width = acanvas.width = element.style.width.replace(/px/,"") || me.getWidth(element);
-                me.set("width", canvas.width);
-                canvas.height = acanvas.height = element.style.height.replace(/px/,"") || me.getHeight(element);
-                me.set("height", canvas.height);
+                me.resize();
                 canvas.style.position = acanvas.style.position = "absolute";
                 canvas.style.top = acanvas.style.top = "0";
                 canvas.style.left = acanvas.style.left = "0";

diff --git a/src/heatmap-gmaps.js b/src/heatmap-gmaps.js
@@ -11,7 +11,10 @@ function HeatmapOverlay(map, cfg){
 	this.heatmap = null;
 	this.conf = cfg;
 	this.latlngs = [];
-	this.setMap(map);	
+  this.bounds = null;
+	this.setMap(map);
+  var me = this;
+  google.maps.event.addListener(map, 'idle', function() { me.draw() });
 }
 
 HeatmapOverlay.prototype = new google.maps.OverlayView();
@@ -44,13 +47,22 @@ HeatmapOverlay.prototype.draw = function(){
 
     var overlayProjection = this.getProjection();
     var currentBounds = this.map.getBounds();
+    if (currentBounds.equals(this.bounds)) {
+      return;
+    }
+    this.bounds = currentBounds;
     var ne = overlayProjection.fromLatLngToDivPixel(currentBounds.getNorthEast());
     var sw = overlayProjection.fromLatLngToDivPixel(currentBounds.getSouthWest());
     var topY = ne.y;
     var leftX = sw.x;
-
-    this.conf.element.style.left = leftX;
-    this.conf.element.style.top = topY;
+  var h = sw.y - ne.y;
+  var w = ne.x - sw.x;
+
+    this.conf.element.style.left = leftX + 'px';
+    this.conf.element.style.top = topY + 'px';
+  this.conf.element.style.width = w + 'px';
+  this.conf.element.style.height = h + 'px';
+  this.heatmap.store.get("heatmap").resize();
 
 	if(this.latlngs.length > 0){
 		this.heatmap.clear();

diff --git a/src/heatmap.js b/src/heatmap.js
@@ -186,6 +186,16 @@
                 me.set("height", config.height || 0);
                 me.set("debug", config.debug);
         },
+        resize: function () {
+                var element = this.get("element"),
+                    canvas = this.get("canvas"),
+                    acanvas = this.get("acanvas");
+                canvas.width = acanvas.width = element.style.width.replace(/px/, "") || this.getWidth(element);
+                this.set("width", canvas.width);
+                canvas.height = acanvas.height = element.style.height.replace(/px/, "") || this.getHeight(element);
+                this.set("height", canvas.height);
+        },
+
         init: function(){
                 var me = this,
                     canvas = document.createElement("canvas"),
@@ -196,10 +206,7 @@
 
                 me.set("canvas", canvas);
                 me.set("acanvas", acanvas);
-                canvas.width = acanvas.width = element.style.width.replace(/px/,"") || me.getWidth(element);
-                me.set("width", canvas.width);
-                canvas.height = acanvas.height = element.style.height.replace(/px/,"") || me.getHeight(element);
-                me.set("height", canvas.height);
+                me.resize();
                 canvas.style.position = acanvas.style.position = "absolute";
                 canvas.style.top = acanvas.style.top = "0";
                 canvas.style.left = acanvas.style.left = "0";