add marker-clustering support

projects/project-3/frontend/package-lock.json

@@ -7106,6 +7106,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
+    "leaflet.markercluster": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
+      "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw=="
+    },
     "less": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",

projects/project-3/frontend/package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
     "leaflet": "^1.7.1",
+    "leaflet.markercluster": "^1.4.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

projects/project-3/frontend/src/app/service/map.service.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import * as L from 'leaflet';
+import 'leaflet.markercluster';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
 
@@ -48,9 +49,16 @@ export class MapService {
   }
 
   public makeStationsWithDummyData(): void {
+    const markerClusters = L.markerClusterGroup({
+      spiderflyOnMaxZoom: true,
+      showCoverageOnHover: true,
+      zoomToBoundsOnClick: true
+    });
     for (const station of dummyData) {
-      L.marker([station.lat, station.lon], {icon: createIcon}).addTo(this.map);
+      const marker = L.marker([station.lat, station.lon], {icon: createIcon});
+      markerClusters.addLayer(marker);
     }
+    this.map.addLayer(markerClusters);
   }
 
   public makeStationMarkers(): void {