Tilemap should notify correctly when it is ready

This regression was introduced when extracting tilemap from vislib.

src/ui/public/vis_maps/maps.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import $ from 'jquery';
 import d3 from 'd3';
 import MapsConfigProvider from './lib/maps_config';
 import TileMapChartProvider from './visualizations/tile_map';
@@ -91,10 +92,13 @@ export default function MapsFactory(Private) {
       }
 
       this.layout.render();
-      // todo: title
       const self = this;
       this.charts = [];
-      d3.select(this.el).selectAll('.chart').each(function (chartData) {
+
+
+      let loadedCount = 0;
+      const chartSelection = d3.select(this.el).selectAll('.chart');
+      chartSelection.each(function (chartData) {
         const chart = new TileMapChart(self, this, chartData);
 
         self.activeEvents().forEach(function (event) {
@@ -103,6 +107,13 @@ export default function MapsFactory(Private) {
 
         self.charts.push(chart);
         chart.render();
+
+        chart.events.on('rendered', function () {
+          loadedCount++;
+          if (loadedCount === chartSelection.length) {
+            $(self.el).trigger('renderComplete');
+          }
+        });
       });
     }
 

src/ui/public/vis_maps/visualizations/_map.js

@@ -192,7 +192,10 @@ export default function MapFactory(Private, tilemapSettings) {
 
       this._tileLayer.on('tileload', saturateTiles);
       this._tileLayer.on('load', () => {
-        if (!self._events) return;
+
+        if (!self._events) {
+          return;
+        }
 
         self._events.emit('rendered', {
           chart: self._chartData,