Add chart view model

js/src/mapviewmodel.js

@@ -52,8 +52,11 @@ export default class MapViewModel extends ViewModel {
       /** @type {?number} */
       markerOver: null,
       /** @type {?number} */
-      markerSelect: null
+      markerSelect: null,
+      // click handler
+      onMenuToggle: null
     });
+    this.model.onMenuToggle = () => this.onMapResize();
     this.state = state;
     /** @type HTMLElement */
     this.mapElement = document.querySelector('#map-canvas');
@@ -61,6 +64,11 @@ export default class MapViewModel extends ViewModel {
     this.api = null;
   }
 
+  init() {
+    this.bindAll();
+    this.setObservers();
+  }
+
   /**
    * Dynamic change of map api
    * @param {string} apiName API name
@@ -102,10 +110,16 @@ export default class MapViewModel extends ViewModel {
     if (this.state.currentTrack) {
       this.api.displayTrack(this.state.currentTrack, this.savedBounds === null);
     }
+  }
+
+  setObservers() {
     config.onChanged('mapApi', (mapApi) => {
       this.loadMapAPI(mapApi);
     });
     this.state.onChanged('currentTrack', (track) => {
+      if (!this.api) {
+        return;
+      }
       this.api.clearMap();
       if (track) {
         uObserve.observe(track, 'positions', () => {
@@ -207,4 +221,10 @@ export default class MapViewModel extends ViewModel {
       <g><path stroke="black" fill="${fill}" d="${MapViewModel.getMarkerPath(isLarge)}"/>${isExtra ? MapViewModel.getMarkerExtra(isLarge) : ''}</g></svg>`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
   }
+
+  onMapResize() {
+    if (this.api) {
+      this.api.updateSize();
+    }
+  }
 }

js/test/mapviewmodel.test.js

@@ -171,7 +171,7 @@ describe('MapViewModel tests', () => {
     // given
     spyOn(vm, 'loadMapAPI');
     vm.api = mockApi;
-    vm.onReady();
+    vm.setObservers();
     const newApi = 'newapi';
     // when
     config.mapApi = newApi;
@@ -187,7 +187,7 @@ describe('MapViewModel tests', () => {
     // given
     vm.api = mockApi;
     state.currentTrack = null;
-    vm.onReady();
+    vm.setObservers();
     uObserve.setSilently(state, 'currentTrack', track);
     // when
     state.currentTrack = null;
@@ -203,7 +203,7 @@ describe('MapViewModel tests', () => {
     // given
     vm.api = mockApi;
     state.currentTrack = null;
-    vm.onReady();
+    vm.setObservers();
     // when
     state.currentTrack = track;
     // then