fix map issue

kendraio · Aug 29, 2024 · 6c22869 · 6c22869
1 parent 625ce0d
commit 6c22869
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/blocks/map-block/map-block.component.html b/src/app/blocks/map-block/map-block.component.html
@@ -3,6 +3,7 @@
      leaflet
      [leafletOptions]="options"
      [leafletLayers]="layers"
+
      [leafletMarkerCluster]="markerClusterData"
      [leafletMarkerClusterOptions]="markerClusterOptions">
 </div>
diff --git a/src/app/blocks/map-block/map-block.component.ts b/src/app/blocks/map-block/map-block.component.ts
@@ -1,15 +1,15 @@
 import {Component} from '@angular/core';
 import {BaseBlockComponent} from '../base-block/base-block.component';
-import {icon, latLng, marker, tileLayer, Marker} from 'leaflet';
+import {icon, latLng, marker, tileLayer, Marker, markerClusterGroup} from 'leaflet';
 import {get, isArray, set} from 'lodash-es';
+import 'leaflet.markercluster';
 
 @Component({
   selector: 'app-map-block',
   templateUrl: './map-block.component.html',
   styleUrls: ['./map-block.component.scss']
 })
 export class MapBlockComponent extends BaseBlockComponent {
-
   height = 500;
   options = {
     layers: [
@@ -25,9 +25,15 @@ contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA
     center: latLng(51.505, -0.09)
   };
   layers = [];
+  markerClusterGroup: any;
   markerClusterData: Marker[] = [];
   markerClusterOptions = {};
 
+  constructor() {
+    super()
+    this.markerClusterGroup = markerClusterGroup();
+  }
+
   onConfigUpdate(config: any) {
     this.height = get(config, 'height', 500);
     set(this.options, 'zoom', get(config, 'zoom', 8));
@@ -36,7 +42,6 @@ contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA
   }
 
   onData(data: any, firstChange: boolean) {
-    console.log('hello', data)
     if (isArray(data)) {
       this.layers = data.map(({ lat, long, label }) => 
         marker(latLng(lat, long), {
@@ -47,6 +52,9 @@ contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA
             shadowUrl: '/assets/marker-shadow.png'
           })
         }).bindPopup(label));
+
+        this.markerClusterGroup.clearLayers();
+        this.markerClusterGroup.addLayers(this.markerClusterData);
     }
 
   }