Accomidate for map element resize in leaflet

web-app/src/app/home/home.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="user">
-  <navigation (onFeedToggle)="onFeedToggle()" (onPreferencesToggle)="preferences.toggle()"></navigation>
+<div *ngIf="user" class="home">
+  <navigation (onFeedToggle)="feed.toggle()" (onPreferencesToggle)="preferences.toggle()"></navigation>
 
   <mat-sidenav-container class="main-container" hasBackdrop="false">
     <mat-sidenav #feed mode="side" position="start" opened>
@@ -10,7 +10,7 @@
       <preferences></preferences>
     </mat-sidenav>
 
-    <map [mapSize]="mapSize" (addObservation)="onAddObservation($event)"></map>
+    <map (addObservation)="onAddObservation($event)"></map>
 
   </mat-sidenav-container>
 </div>

web-app/src/app/home/home.component.scss

@@ -1,5 +1,8 @@
 :host {
   height: 100%;
+}
+
+.home {
   display: flex;
   flex-direction: column;
   overflow: hidden;

web-app/src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MapService } from '../map/map.service';
 import { FilterService } from '../filter/filter.service';
 import { MatSidenav } from '@angular/material/sidenav';
@@ -12,11 +12,10 @@ import * as _ from 'underscore';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class HomeComponent implements OnInit, OnDestroy, OnChanges {
+export class HomeComponent implements OnInit, OnDestroy {
 
   user: User
   map: any
-  mapSize: number
   event: any
   hideFeed: boolean = false
   newObservation: any
@@ -44,13 +43,6 @@ export class HomeComponent implements OnInit, OnDestroy, OnChanges {
     this.mapService.removeListener(this)
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.toggleFeed && !changes.toggleFeed.isFirstChange()) {
-      this.mapSize = Date.now()
-      this.hideFeed = !this.hideFeed;
-    }
-  }
-
   onMap($event) {
     this.map = $event.map
   }
@@ -59,14 +51,9 @@ export class HomeComponent implements OnInit, OnDestroy, OnChanges {
     this.event = filter.event?.added?.length ? filter.event.added[0] : null
   }
 
-  onFeedToggle(): void {
-    this.feed.toggle()
-    this.mapSize = Date.now()
-  }
-
   onAddObservation($event) {
     if (!this.feed.opened) {
-      this.onFeedToggle()
+      this.feed.toggle()
     }
 
     this.newObservation = $event

web-app/src/app/map/map.component.html

@@ -18,7 +18,7 @@
   </mat-sidenav>
 
   <mat-sidenav-content>
-    <div id="map">
+    <div id="map" #map>
       <div class="map-controls-left">
         <map-control-zoom (onZoom)="onZoom($event)"></map-control-zoom>
         <map-control-search (onSearch)="onSearch($event)" (onSearchClear)="onSearchClear()"></map-control-search>

web-app/src/app/map/map.component.ts

@@ -1,12 +1,12 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core'
 import { LocationState } from '../../app/map/controls/location.component'
 import { ZoomDirection } from '../../app/map/controls/zoom.component'
 import { LayerService } from '../layer/layer.service'
 import { MapLayerService, StyleEvent, ToggleEvent } from './layers/layer.service'
 import { MapService } from './map.service'
 import { LocalStorageService } from '../http/local-storage.service'
 import { EventService } from '../event/event.service'
-import { map, latLng, popup,tileLayer, Icon, Util, marker, TileLayer, geoJSON, latLngBounds, LatLng, markerClusterGroup, Layer } from "leaflet"
+import { map, latLng, popup,tileLayer, Icon, Util, marker, TileLayer, geoJSON, latLngBounds, LatLng, markerClusterGroup, Layer, Map, LeafletEvent } from "leaflet"
 import { OpacityEvent, ZoomEvent } from './layers/layer.service'
 import { ReorderEvent } from './layers/layers.component'
 import { moveItemInArray } from '@angular/cdk/drag-drop'
@@ -43,10 +43,12 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   public static readonly FEATURE_PANE_Z_INDEX_OFFSET = 6 * MapComponent.PANE_Z_INDEX_BUCKET_SIZE
   public static readonly MAGE_PANE_Z_INDEX_OFFSET = 7 * MapComponent.PANE_Z_INDEX_BUCKET_SIZE
 
-  @Input() mapSize: number
   @Output() addObservation = new EventEmitter<any>()
 
-  map: any
+  @ViewChild('map') mapElement: ElementRef<any>
+  mapReizeObserver?: ResizeObserver
+
+  map: Map
   groups: any = {
     'base': {
       offset: MapComponent.BASE_PANE_Z_INDEX_OFFSET,
@@ -99,13 +101,15 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     layerService.zoom$.subscribe(event => this.zoom(event));
     layerService.opacity$.subscribe(event => this.opacityChanged(event));
     layerService.style$.subscribe(event => this.styleChanged(event));
-  }
 
-  ngOnDestroy(): void {
-    this.mapService.removeListener(this)
+    this.mapReizeObserver = new ResizeObserver(() => {
+      this.map.invalidateSize({ pan: false, debounceMoveend: true })
+    })
   }
 
   ngAfterViewInit() {
+    this.mapReizeObserver?.observe(this.mapElement.nativeElement)
+
     let mapPosition = this.localStorageService.getMapPosition()
     if (!mapPosition) {
       this.localStorageService.setMapPosition({
@@ -130,19 +134,19 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     // To easily adjust zIndex across all types of layers each feature group,
     // overlay map, etc, will be placed in its own map pane
     this.map.createPane(this.BASE_LAYER_PANE)
-    this.map.getPane(this.BASE_LAYER_PANE).style.zIndex = 100 * 100
+    this.map.getPane(this.BASE_LAYER_PANE).style.zIndex = `${100 * 100}`
 
-    this.map.getPane('tilePane').style.zIndex = 200 * 100
-    this.map.getPane('overlayPane').style.zIndex = 400 * 100
-    this.map.getPane('shadowPane').style.zIndex = 500 * 100
-    this.map.getPane('markerPane').style.zIndex = 600 * 100
-    this.map.getPane('tooltipPane').style.zIndex = 800 * 100
-    this.map.getPane('popupPane').style.zIndex = 900 * 100
+    this.map.getPane('tilePane').style.zIndex = `${200 * 100}`
+    this.map.getPane('overlayPane').style.zIndex = `${400 * 100}`
+    this.map.getPane('shadowPane').style.zIndex = `${500 * 100}`
+    this.map.getPane('markerPane').style.zIndex = `${600 * 100}`
+    this.map.getPane('tooltipPane').style.zIndex = `${700 * 100}`
+    this.map.getPane('popupPane').style.zIndex = `${800 * 100}`
 
     // Add in a base layer of styled GeoJSON in case the tiles do not load
     const FALLBACK_LAYER_PANE = 'fallbackLayerPane'
     this.map.createPane(FALLBACK_LAYER_PANE)
-    this.map.getPane(FALLBACK_LAYER_PANE).style.zIndex = 1
+    this.map.getPane(FALLBACK_LAYER_PANE).style.zIndex = '1'
 
     this.map.addLayer(
       geoJSON(countries, {
@@ -181,15 +185,6 @@ export class MapComponent implements OnDestroy, AfterViewInit {
       this.localStorageService
     )
 
-    this.map.on('baselayerchange', baseLayer => {
-      const layer = this.layers[baseLayer.id]
-      this.mapService.selectBaseLayer(layer)
-    })
-
-    this.map.on('overlayadd', overlay => {
-      const layer = this.layers[overlay.id]
-      this.mapService.overlayAdded(layer)
-    })
     this.pollListener = {
       onPoll: this.onPoll.bind(this)
     }
@@ -203,6 +198,11 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     })
   }
 
+  ngOnDestroy(): void {
+    this.mapService.removeListener(this)
+    this.mapReizeObserver?.unobserve(this.mapElement.nativeElement);
+  }
+
   saveMapPosition() {
     const center = this.map.getCenter()
     this.localStorageService.setMapPosition({
@@ -218,7 +218,7 @@ export class MapComponent implements OnDestroy, AfterViewInit {
 
   opacityChanged(event: OpacityEvent): void {
     const pane = this.map.getPanes()[event.layer.layer.pane]
-    pane.style.opacity = event.opacity
+    pane.style.opacity = `${event.opacity}`
     if (event.layer.layer.setOpacity) {
       event.layer.layer.setOpacity(event.opacity)
     }
@@ -792,8 +792,8 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   setPaneOpacity(panes, opacityFactor) {
     panes.forEach(pane => {
       const mapPane = this.map.getPanes()[pane]
-      const opacity = mapPane.style.opacity || 1
-      mapPane.style.opacity = opacity * opacityFactor
+      const opacity = mapPane.style.opacity || "1"
+      mapPane.style.opacity = `${parseInt(opacity)} * ${opacityFactor}`
     })
   }