Merge pull request #1358 from umap-project/heat-improvements

Heatmap improvements

umap/static/umap/js/umap.forms.js

@@ -836,13 +836,13 @@ L.FormBuilder.OutlinkTarget = L.FormBuilder.MultiChoice.extend({
   ],
 })
 
-L.FormBuilder.Range = L.FormBuilder.Input.extend({
+L.FormBuilder.Range = L.FormBuilder.FloatInput.extend({
   type: function () {
     return 'range'
   },
 
   value: function () {
-    return L.DomUtil.hasClass(this.wrapper, 'undefined') ? undefined : this.input.value
+    return L.DomUtil.hasClass(this.wrapper, 'undefined') ? undefined : L.FormBuilder.FloatInput.prototype.value.call(this)
   },
 
   buildHelpText: function () {
@@ -854,12 +854,13 @@ L.FormBuilder.Range = L.FormBuilder.Input.extend({
     datalist.id = `range-${this.options.label || this.name}`
     this.input.setAttribute('list', datalist.id)
     let options = ''
+    const step = this.options.step || 1,
+      digits = step < 1 ? 2 : 0
     for (let i = this.options.min; i <= this.options.max; i += this.options.step) {
-      options += `<option value="${i.toPrecision(2)}" label="${i.toPrecision(
-        2
-      )}"></option>`
+      options += `<option value="${i.toFixed(digits)}" label="${i.toFixed(digits)}"></option>`
     }
     datalist.innerHTML = options
+    L.FormBuilder.Input.prototype.buildHelpText.call(this)
   },
 })
 

umap/static/umap/js/umap.layer.js

@@ -137,14 +137,6 @@ L.U.Layer.Heat = L.HeatLayer.extend({
     this.setLatLngs([])
   },
 
-  redraw: function () {
-    // setlalngs call _redraw through setAnimFrame, thus async, so this
-    // can ends with race condition if we remove the layer very faslty after.
-    // Remove me when https://github.com/Leaflet/Leaflet.heat/pull/53 is released.
-    if (!this._map) return
-    L.HeatLayer.prototype.redraw.call(this)
-  },
-
   getFeatures: function () {
     return {}
   },
@@ -161,8 +153,11 @@ L.U.Layer.Heat = L.HeatLayer.extend({
       [
         'options.heat.radius',
         {
-          handler: 'BlurIntInput',
-          placeholder: L._('Heatmap radius'),
+          handler: 'Range',
+          min: 10,
+          max: 100,
+          step: 5,
+          label: L._('Heatmap radius'),
           helpText: L._('Override heatmap radius (default 25)'),
         },
       ],
@@ -187,6 +182,84 @@ L.U.Layer.Heat = L.HeatLayer.extend({
     }
     this._updateOptions()
   },
+
+  _redraw: function () {
+    // Import patch from https://github.com/Leaflet/Leaflet.heat/pull/78
+    // Remove me when this get merged and released.
+    if (!this._map) {
+      return
+    }
+    var data = [],
+      r = this._heat._r,
+      size = this._map.getSize(),
+      bounds = new L.Bounds(L.point([-r, -r]), size.add([r, r])),
+      cellSize = r / 2,
+      grid = [],
+      panePos = this._map._getMapPanePos(),
+      offsetX = panePos.x % cellSize,
+      offsetY = panePos.y % cellSize,
+      i,
+      len,
+      p,
+      cell,
+      x,
+      y,
+      j,
+      len2
+
+    this._max = 1
+
+    for (i = 0, len = this._latlngs.length; i < len; i++) {
+      p = this._map.latLngToContainerPoint(this._latlngs[i])
+      x = Math.floor((p.x - offsetX) / cellSize) + 2
+      y = Math.floor((p.y - offsetY) / cellSize) + 2
+
+      var alt =
+        this._latlngs[i].alt !== undefined
+          ? this._latlngs[i].alt
+          : this._latlngs[i][2] !== undefined
+          ? +this._latlngs[i][2]
+          : 1
+
+      grid[y] = grid[y] || []
+      cell = grid[y][x]
+
+      if (!cell) {
+        cell = grid[y][x] = [p.x, p.y, alt]
+        cell.p = p
+      } else {
+        cell[0] = (cell[0] * cell[2] + p.x * alt) / (cell[2] + alt) // x
+        cell[1] = (cell[1] * cell[2] + p.y * alt) / (cell[2] + alt) // y
+        cell[2] += alt // cumulated intensity value
+      }
+
+      // Set the max for the current zoom level
+      if (cell[2] > this._max) {
+        this._max = cell[2]
+      }
+    }
+
+    this._heat.max(this._max)
+
+    for (i = 0, len = grid.length; i < len; i++) {
+      if (grid[i]) {
+        for (j = 0, len2 = grid[i].length; j < len2; j++) {
+          cell = grid[i][j]
+          if (cell && bounds.contains(cell.p)) {
+            data.push([
+              Math.round(cell[0]),
+              Math.round(cell[1]),
+              Math.min(cell[2], this._max),
+            ])
+          }
+        }
+      }
+    }
+
+    this._heat.data(data).draw(this.options.minOpacity)
+
+    this._frame = null
+  },
 })
 
 L.U.DataLayer = L.Evented.extend({