changes

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { HomeComponent } from './home/home.component';
 import { ListComponent } from './list/list.component';
 import { DetailComponent } from './detail/detail.component';
 import {FormsModule} from "@angular/forms";
-import {HttpClientModule} from "@angular/common/http";
+import { HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
 
 @NgModule({
@@ -16,7 +16,8 @@ import { SafePipe } from './pipes/safe.pipe';
     HomeComponent,
     ListComponent,
     DetailComponent,
-    SafePipe
+    SafePipe,
+    HttpClientModule
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.html

@@ -1,13 +1,12 @@
 <div [ngClass]="{'background-color': backgroundColor}">
 
-  <div class="alert alert-warning shadow-lg" *ngIf="allert">
+  <div class="alert alert-warning shadow-lg " *ngIf="allert">
     <div>
       <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
       <span>Enter a location!!</span>
     </div>
   </div>
 
-
   <!-- <div class="canvas nuvola">
     <canvas #myCanvas width="100vw" class="canvas"></canvas>
   </div> -->

src/app/service/position.service.ts

@@ -26,7 +26,11 @@ export class positionService{
     }
   }*/
 
-  getDistanceBetweenCoordinates(lat1: number, lon1: number, lat2: number, lon2: number) {
+  getDistanceBetweenCoordinates(lat1: number | undefined, lon1: number | undefined, lat2: number, lon2: number) {
+    if (lat1 === undefined || lon1 === undefined) {
+      console.log('lat1 or lon1 is undefined')
+      return 0;
+    }
     const earthRadius = 6371; // Raggio della Terra in km
     const dLat = this.deg2rad(lat2 - lat1);
     const dLon = this.deg2rad(lon2 - lon1);