Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

[LeeDr]

On kibana 4.4.1 I created a Tile Map vis (on Firefox) with heatmap option. Saved it. Zoomed in by double-clicking. Everything works fine.

Then went to Chrome browser to try the same thing.

The first problem is that the map doesn't render correctly. I only see a small part of it;

And then when I click on the map to drag it into view I get this error;

Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17062)

Version: 4.4.1
Build: 9693

Error: Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17062)
    at window.onerror (http://localhost:5601/bundles/commons.bundle.js?v=9693:63832:25)

And if I open the dev console in Chrome I get this;

Error: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
    at Error (native)
    at Object.t.draw (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17062:1413)
    at L.HeatLayer.extend._redraw (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17067:2734)
    at L.HeatLayer.extend._reset (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17067:1754)
    at L.HeatLayer.extend.onAdd (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17067:703)
    at o.Map.o.Class.extend._layerAdd (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17040:30050)
    at o.Map.o.Class.extend.addLayer (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17040:21550)
    at HeatmapMarker.MarkerFactory.BaseMarker._addToMap (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17324:17)
    at HeatmapMarkerFactory.HeatmapMarker._createMarkerGroup (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17622:13)
    at new HeatmapMarker (http://localhost:5601/bundles/kibana.bundle.js?v=9693:17600:13)(anonymous function) @ commons.bundle.js?v=9693:40088(anonymous function) @ commons.bundle.js?v=9693:36857Scope.$digest @ commons.bundle.js?v=9693:43455Scope.$apply @ commons.bundle.js?v=9693:43708done @ commons.bundle.js?v=9693:38157completeRequest @ commons.bundle.js?v=9693:38355requestLoaded @ commons.bundle.js?v=9693:38296

I also reproduced it somewhat on IE11 where the map only shows a small portion in the upper left and the console shows IndexSizeError

[gilles-m]

Hello,

I have the same Issue with Kibana 4.5.1.

[apkoponen]

This issue is caused by the fact that the map canvas is still 0x0 pixels when we call L.heatLayer(points, options).

My workaround was to change the code in heatmap.js that creates and adds the layer to map. The size invalidated and then we wait until the canvas gets big enough. This is a hack, but I could not find a way to properly check when the map canvas gets actually resized.

HeatmapMarker.prototype._createMarkerGroup = function (options) {
      var self = this;
      var max = _.get(this.geoJson, 'properties.allmax');
      var points = this._dataToHeatArray(max);

      // Invalidate size to make sure canvas size is large enough
      self.map.invalidateSize();
      setupHeatLayer();
      function setupHeatLayer() {
        // Wait until size has been invalidated
        if(self.map.getSize().x > 0) {
          self._markerGroup = L.heatLayer(points, options);
          self._fixTooltips();
          self._addToMap();
        } else {
          setTimeout(setupHeatLayer, 100);
        }
      }
    };

[gmoskovicz]

@LeeDr is there any way to fix or workaround this issue? Saving the dashboard with a different zoom level for this viz should fix it?

[gmoskovicz]

@LeeDr i have some repro steps for this:

[1] Create the index

DELETE index_logs

PUT index_logs
{
  "mappings": {
    "type": {
      "properties": {
        "geoip": {
          "type": "object",
          "properties": {
            "location": {
              "type": "geo_point"
            }
          }
        },
        "@timestamp": {
          "type": "date"
        }
      }
    }
  }
}

POST index_logs/type/1
{
  "geoip": {
    "location": {
      "lat": 41.12,
      "lon": -71.34
    }
  },
  "@timestamp": "2016-12-10T12:10:30Z"
}

[2] Crete the index pattern

[3] Import the following dashboard: dashboards.txt . Import it with the import functionality from Kibana

[4] Go to the dashboard index_user_activity

[5] Change the time-range to 2 years:

[milos92100]

Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Same error on Chrome and Kibana 6.2.4