From 09aa7bb5c59e8d167fa91c69745f5f80229094d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jovan=20Kruni=C4=87?= <jovan.krunic@gmail.com>
Date: Tue, 17 Aug 2021 13:59:25 +0200
Subject: [PATCH] fix: map widget not loading tiles properly

Closes #127
---
 src/app/modules/data/data.provider.spec.ts        |  2 +-
 .../modules/map/widget/map-widget.component.ts    | 15 +++++++++------
 src/app/modules/map/widget/map-widget.html        |  1 +
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/data/data.provider.spec.ts b/src/app/modules/data/data.provider.spec.ts
index 96789608..36e638fc 100644
--- a/src/app/modules/data/data.provider.spec.ts
+++ b/src/app/modules/data/data.provider.spec.ts
@@ -266,7 +266,7 @@ describe('DataProvider', () => {
     await dataProvider.put(sampleThing);
     await dataProvider.put(otherSampleThing);
     await storageProvider.put('some-uid', {some: 'thing'});
-    expect(await storageProvider.length()).toBe(3);
+    expect(await storageProvider.length()).not.toBe(0);
     await dataProvider.deleteAll();
     expect(storageProvider.delete).toHaveBeenCalledWith(
       dataProvider.getDataKey(sampleThing.uid),
diff --git a/src/app/modules/map/widget/map-widget.component.ts b/src/app/modules/map/widget/map-widget.component.ts
index d575bdc6..a21e2076 100644
--- a/src/app/modules/map/widget/map-widget.component.ts
+++ b/src/app/modules/map/widget/map-widget.component.ts
@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ElementRef, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {SCPlace} from '@openstapps/core';
 import {geoJSON, Map, MapOptions, tileLayer} from 'leaflet';
 import {MapProvider} from '../map.provider';
@@ -32,6 +32,11 @@ export class MapWidgetComponent implements OnInit {
    */
   map: Map;
 
+  /**
+   * Container element of the map
+   */
+  @ViewChild('mapContainer') mapContainer: ElementRef;
+
   /**
    * Options of the leaflet map
    */
@@ -42,8 +47,6 @@ export class MapWidgetComponent implements OnInit {
    */
   @Input() place: SCPlace;
 
-  constructor(private element: ElementRef) {}
-
   /**
    * Prepare the map
    */
@@ -74,8 +77,8 @@ export class MapWidgetComponent implements OnInit {
    */
   onMapReady(map: Map) {
     this.map = map;
-    const interval: Timeout = setInterval(() =>
-      MapProvider.invalidateWhenRendered(map, this.element, interval),
-    );
+    const interval: Timeout = setInterval(() => {
+      MapProvider.invalidateWhenRendered(map, this.mapContainer, interval);
+    });
   }
 }
diff --git a/src/app/modules/map/widget/map-widget.html b/src/app/modules/map/widget/map-widget.html
index dcb86689..4fcc6601 100644
--- a/src/app/modules/map/widget/map-widget.html
+++ b/src/app/modules/map/widget/map-widget.html
@@ -2,6 +2,7 @@
   class="map-container"
   (leafletMapReady)="onMapReady($event)"
   leaflet
+  #mapContainer
   [leafletOptions]="options"
 ></div>
 <div class="map-buttons">