fix(map): get the bubble map back (thanks to @SUlbrichA) (#1655)

Closes #1576
akveo · Apr 26, 2018 · 19f9d0e · 19f9d0e
1 parent bb9dccf
commit 19f9d0e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -42,6 +42,7 @@
         "../node_modules/tinymce/plugins/paste/plugin.min.js",
         "../node_modules/tinymce/plugins/table/plugin.min.js",
         "../node_modules/echarts/dist/echarts.min.js",
+        "../node_modules/echarts/dist/extension/bmap.min.js",
         "../node_modules/chart.js/dist/Chart.min.js"
       ],
       "environmentSource": "environments/environment.ts",

diff --git a/src/app/pages/maps/bubble/bubble-map.component.ts b/src/app/pages/maps/bubble/bubble-map.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { combineLatest } from 'rxjs/observable/combineLatest';
+import { takeWhile } from 'rxjs/operators/takeWhile';
+import { NgxEchartsService } from 'ngx-echarts';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
@@ -23,12 +27,21 @@ export class BubbleMapComponent implements OnDestroy {
 
   bubbleTheme: any;
   geoColors: any[];
-  themeSubscription: any;
 
-  constructor(private theme: NbThemeService) {
+  private alive = true;
 
-    this.themeSubscription = this.theme.getJsTheme()
-      .subscribe(config => {
+  constructor(private theme: NbThemeService,
+              private http: HttpClient,
+              private es: NgxEchartsService) {
+
+    combineLatest([
+      this.http.get('assets/map/world.json'),
+      this.theme.getJsTheme(),
+    ])
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(([map, config]: [any, any]) => {
+
+        this.es.registerMap('world', map);
 
         const colors = config.variables;
         this.bubbleTheme = config.variables.bubbleMap;
@@ -527,7 +540,7 @@ export class BubbleMapComponent implements OnDestroy {
   }
 
   ngOnDestroy() {
-    this.themeSubscription.unsubscribe();
+    this.alive = false;
   }
 
   private getRandomGeoColor() {

diff --git a/src/assets/map/world.json b/src/assets/map/world.json