Defer geospatial map components

Author: ybnd

src/app/browse-by/browse-by-geospatial-data/browse-by-geospatial-data.component.html

@@ -1,11 +1,13 @@
 <div class="container">
   <h1>{{ 'browse.metadata.map' | translate }}</h1>
   @if (isPlatformBrowser(platformId)) {
-    <ds-geospatial-map [facetValues]="facetValues$"
-                       [currentScope]="this.scope$|async"
-                       [layout]="'browse'"
-                       style="width: 100%;">
-    </ds-geospatial-map>
+    @defer {
+      <ds-geospatial-map [facetValues]="facetValues$"
+                         [currentScope]="this.scope$|async"
+                         [layout]="'browse'"
+                         style="width: 100%;">
+      </ds-geospatial-map>
+    }
   }
 </div>
 

src/app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component.html

@@ -1,12 +1,14 @@
 @if (isNotEmpty(points) || isNotEmpty(bboxes)) {
   <div>
     <ds-metadata-field-wrapper [label]="label | translate">
+      @defer {
         <ds-geospatial-map [coordinates]="this.points"
                            [bbox]="this.bboxes"
                            [cluster]="this.cluster"
                            [layout]="'item'"
                            style="width: 100%;">
         </ds-geospatial-map>
+      }
     </ds-metadata-field-wrapper>
   </div>
 }

src/app/shared/geospatial-map/geospatial-map.component.ts

@@ -134,6 +134,9 @@ export class GeospatialMapComponent implements AfterViewInit, OnInit, OnDestroy
   private initMap(): void {
     // 'Import' leaflet packages in a browser-mode-only way to avoid issues with SSR
     const L = require('leaflet'); require('leaflet.markercluster'); require('leaflet-providers');
+
+    console.log(`GeospatialMapComponent.initMap()`, L); // todo: remove this
+
     // Set better default icons
     L.Icon.Default.mergeOptions({
       iconRetinaUrl: 'assets/images/marker-icon-2x.png',

src/app/shared/object-collection/object-collection.component.html

@@ -1,6 +1,8 @@
 @if ((currentMode$ | async) === viewModeEnum.GeospatialMap) {
-  <ds-object-geospatial-map [objects]="objects">
-  </ds-object-geospatial-map>
+  @defer {
+    <ds-object-geospatial-map [objects]="objects">
+    </ds-object-geospatial-map>
+  }
 }
 
 @if ((currentMode$ | async) === viewModeEnum.ListElement || (currentMode$ | async) === viewModeEnum.GeospatialMap) {

src/app/shared/object-geospatial-map/object-geospatial-map.component.html

@@ -1,3 +1,3 @@
 @if (isPlatformBrowser(platformId)) {
-    <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
+  <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
 }