mapboxgl-heatmap - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

index.js

@@ -5,11 +5,6 @@ var webgl_heatmap = require('./bin/webgl-heatmap');
 function HM(map) {
-    var heatmap_canvas = document.createElement('canvas');
-    heatmap_canvas.classList.add('heatmap-canvas');
-    heatmap_canvas.style.position = 'absolute';
-    heatmap_canvas.style.top = '0px';
-    heatmap_canvas.style.bottom = '0px';
-    heatmap_canvas.style.width = '100%';
-    heatmap_canvas.style.height = '100%';
-    map.container.appendChild(heatmap_canvas);
-
+    this.heatmap_canvas = document.createElement('canvas');
+    this.heatmap_canvas.classList.add('heatmap-canvas');
+    map.container.appendChild(this.heatmap_canvas);
+    this.heatmap_canvas.setAttribute('style', 'position: absolute;');
     map.on('move', (this._resetHeatmap).bind(this));
@@ -23,5 +18,6 @@ map.on('movestart', (this._resetHeatmap).bind(this));
     this.heatmap = webgl_heatmap.createWebGLHeatmap({
-        canvas: heatmap_canvas
+        canvas: this.heatmap_canvas
     });
 
+    this._resizeCanvas(map.container.offsetWidth, map.container.offsetHeight);
     req_anim_frame((this._updateHeatmap).bind(this));
@@ -40,2 +36,5 @@ };
 HM.prototype._resetHeatmap = function (event) {
+    if (event.type === 'resize') {
+        this._resizeCanvas(event.target.container.offsetWidth, event.target.container.offsetHeight);
+    }
     this.heatmap.multiply(0.5);
@@ -47,3 +46,19 @@ this.heatmap.update();
 }
+
+HM.prototype._resizeCanvas = function (width, height) {
+    var pixelRatio = window.devicePixelRatio || 1;
+
+    // Request the required canvas size taking the pixelratio into account.
+    this.heatmap_canvas.width = pixelRatio * width;
+    this.heatmap_canvas.height = pixelRatio * height;
+
+    // Maintain the same canvas size, potentially downscaling it for HiDPI displays
+    this.heatmap_canvas.style.width = width + 'px';
+    this.heatmap_canvas.style.height = height + 'px';
+
+    this.heatmap.adjustSize();
+}
+
 HM.prototype.addPoint = function (x, y, size, intensity) {
+    console.log(x + ' - ' + y);
     this.heatmap.addPoint(x, y, size, intensity);
@@ -50,0 +65,0 @@ }

package.json

 {
   "name": "mapboxgl-heatmap",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Rudamentary MapBoxGL Plugin to add ability to add a heatmap",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

50180

increased by1.3%

Lines of code

1046

increased by1.06%

No dependency changes