fix: map widget not loading tiles properly

Closes #127

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),

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);
+    });
   }
 }

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">