adjust drawAccidents to display accidents without clustering

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

@@ -91,11 +91,7 @@ export class MapService {
   public drawAccidents(): void {
     this.fetchAccidentGeoData().then(data => {
       const myRenderer = L.canvas({padding: 0.5});
-      const accidentCluster = L.markerClusterGroup({
-        spiderflyOnMaxZoom: true,
-        showCoverageOnHover: true,
-        zoomToBoundsOnClick: true
-      });
+      const accidents = [];
       for (const accident of data) {
         const severityColor = this.getAccidentColor(accident.severity);
         const accidentMarker = L.circle([accident.lat, accident.lon], {
@@ -103,11 +99,11 @@ export class MapService {
           color: severityColor,
           fillColor: severityColor,
           fillOpacity: 0.5,
-          radis: 25
+          radius: 30
         });
-        accidentCluster.addLayer(accidentMarker);
+        accidents.push(accidentMarker);
       }
-      this.mapOverlays.Accidents = accidentCluster;
+      this.mapOverlays.Accidents = L.layerGroup(accidents);
       this.drawMapControl();
     });
   }

projects/project-3/frontend/src/styles.css

@@ -1,11 +0,0 @@
-@import "~leaflet/dist/leaflet.css";
-html, body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
-/*# sourceMappingURL=styles.css.map */

projects/project-3/frontend/src/styles.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AASQ;AATR;EACE;;;AAGF;EACE;EACA","file":"styles.css"}

projects/project-3/frontend/src/styles.scss

@@ -7,7 +7,6 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
 @import "~leaflet/dist/leaflet.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";