overlay layer will fit viewport automatically

sunng87 · Jun 3, 2011 · 58d3974 · 58d3974
1 parent 381bc75
commit 58d3974
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/googlemap.html b/googlemap.html
@@ -24,7 +24,7 @@
                 };
                 var map = new google.maps.Map(document.getElementById("map"), myoptions);
 
-                var heatmap = new HeatCanvasOverlayView(map, {'step':0.3, 'degree':HeatCanvas.QUAD, 'opacity':0.9});
+                var heatmap = new HeatCanvasOverlayView(map, {'step':0.3, 'degree':HeatCanvas.QUAD, 'opacity':0.8});
                 var data = [[39.9075, 116.39723, 300], [31.22222, 121.45806, 187], [32.06167, 118.77778, 124], [22.54554, 114.0683, 63], [23.11667, 113.25, 58], [30.66667, 104.06667, 56], [30.29365, 120.16142, 47], [34.25833, 108.92861, 36], [30.58333, 114.26667, 35], [31.86389, 117.28083, 23], [29.56278, 106.55278, 22], [39.14222, 117.17667, 21], [31.31139, 120.61806, 21], [28.2, 112.96667, 17], [36.66833, 116.99722, 16], [26.57307, 111.84184, 15], [45.75, 126.65, 15], [38.91222, 121.60222, 13], [24.47979, 118.08187, 12], [26.06139, 119.30611, 10], [22.27694, 113.56778, 10], [25.28194, 110.28639, 10], [36.09861, 120.37194, 9], [34.75778, 113.64861, 8], [37.86944, 112.56028, 8], [41.79222, 123.43278, 7], [43.88, 125.32278, 7], [38.04139, 114.47861, 6], [25.03889, 102.71833, 6], [23.02677, 113.13148, 5], [28.68333, 115.88333, 5], [29.87819, 121.54945, 5], [27.61667, 113.85, 4], [27.99942, 120.66682, 4], [36.05639, 103.79222, 3], [23.04889, 113.74472, 3], [30.7522, 120.75, 3], [23.08333, 114.4, 3], [37.53333, 121.4, 3], [26.58333, 106.71667, 3], [37.50167, 122.11361, 3], [22.81667, 108.31667, 3], [31.78333, 119.96667, 3], [32.62639, 116.99694, 2], [26.88806, 112.615, 2], [39.93167, 119.58833, 2], [32.03028, 120.87472, 2], [24.91389, 118.58583, 2], [27.83333, 113.15, 2], [29.10778, 119.65472, 2], [25.43944, 119.01028, 2], [41.0275, 113.10583, 2], [35.06306, 118.34278, 2], [20.04583, 110.34167, 2], [41.12306, 80.26444, 2], [27.85, 112.9, 2], [28.45806, 119.91389, 2], [36.71, 119.10194, 2], [27.73444, 111.99444, 2], [36.61667, 101.76667, 2], [29.65, 91.1, 2], [39.63333, 118.18333, 2], [33.38556, 120.12528, 2], [23.36814, 116.71479, 2], [36.60056, 114.46778, 1], [34.33778, 108.70261, 1], [30.35028, 112.19028, 1], [23.05116, 112.45972, 1], [36.79056, 118.06333, 1], [32.49333, 119.91063, 1], [38.85111, 115.49028, 1], [33.57167, 114.03528, 1], [41.12361, 122.99, 1], [30.79508, 106.08474, 1], [30.91667, 113.9, 1], [36.18528, 117.12, 1], [33.63333, 114.63333, 1], [31.33657, 118.37548, 1], [22.58333, 113.08333, 1], [47.7, 128.9, 1], [35.23972, 113.23306, 1], [36.19278, 117.65694, 1], [43.6125, 122.26528, 1], [40.81056, 111.65222, 1], [30.01102, 120.57153, 1], [31.45934, 104.75424, 1], [25.8, 113.03333, 1], [32.56667, 110.78333, 1], [45.75281, 127.47986, 1], [34.86472, 117.55417, 1], [40.09361, 113.29139, 1], [27.54944, 109.95917, 1], [21.28145, 110.34271, 1], [29.12944, 110.47833, 1], [29.71139, 118.3125, 1], [35.4275, 119.45528, 1], [42.01556, 121.65889, 1], [29.88333, 114.21667, 1], [39.50972, 116.69472, 1], [31.71111, 113.36306, 1], [32.04167, 112.145, 1], [37.45639, 118.48556, 1], [26.645, 118.17361, 1], [46.58333, 125.0, 1], [29.2947, 117.20789, 1], [21.32256, 110.58291, 1], [40.81, 114.87944, 1], [27.11716, 114.97927, 1], [43.85083, 126.56028, 1], [40.9725, 117.93611, 1], [38.31667, 116.86667, 1], [30.65778, 117.48306, 1]];
                 for(var i=0,l=data.length; i<l; i++) {
                     heatmap.pushData(data[i][0], data[i][1], data[i][2]);

diff --git a/heatcanvas-googlemaps.js b/heatcanvas-googlemaps.js
@@ -13,13 +13,18 @@ function HeatCanvasOverlayView(map, options){
 HeatCanvasOverlayView.prototype = new google.maps.OverlayView();
 
 HeatCanvasOverlayView.prototype.onAdd = function(){
+    var proj = this.getProjection();
+    var sw = proj.fromLatLngToDivPixel(this.getMap().getBounds().getSouthWest());
+    var ne = proj.fromLatLngToDivPixel(this.getMap().getBounds().getNorthEast());
+
     var container = document.createElement("div");
     container.style.cssText = "position:absolute;top:0;left:0;border:0";
     container.style.width = "100%";
     container.style.height = "100%";
     var canvas = document.createElement("canvas");
-    canvas.style.width = this.map.getDiv().style.width;
-    canvas.style.height = this.map.getDiv().style.height;
+
+    canvas.style.width = ne.x-sw.x+"px";
+    canvas.style.height = sw.y-ne.y+"px";
     canvas.width = parseInt(canvas.style.width);
     canvas.height = parseInt(canvas.style.height);
     canvas.style.opacity = this.opacity;
@@ -29,19 +34,31 @@ HeatCanvasOverlayView.prototype.onAdd = function(){
 
     var panes = this.getPanes();
     panes.overlayLayer.appendChild(container);
+    this._div = container;
 }
 
 HeatCanvasOverlayView.prototype.pushData = function(lat, lon, value) {
     this.data.push({"lon":lon, "lat":lat, "v":value});
 }
 
 HeatCanvasOverlayView.prototype.draw = function() {
+    var proj = this.getProjection();
+    // fit current viewport
+    var sw = proj.fromLatLngToDivPixel(this.getMap().getBounds().getSouthWest());
+    var ne = proj.fromLatLngToDivPixel(this.getMap().getBounds().getNorthEast());
+
+    // Resize the image's DIV to fit the indicated dimensions.
+    var div = this._div;
+    div.style.left = sw.x + 'px';
+    div.style.top = ne.y + 'px';
+    div.style.width = (ne.x - sw.x) + 'px';
+    div.style.height = (sw.y - ne.y) + 'px';
+
     this.heatmap.clear();
     if (this.data.length > 0) {
-        var proj = this.getProjection();
         for (var i=0, l=this.data.length; i<l; i++) {
             latlon = new google.maps.LatLng(this.data[i].lat, this.data[i].lon);
-            localXY = proj.fromLatLngToDivPixel(latlon);
+            localXY = proj.fromLatLngToContainerPixel(latlon);
             this.heatmap.push(
                     Math.floor(localXY.x), 
                     Math.floor(localXY.y),