added routes user can now click on take route to get business locatio…

…n and direction map

frontend/package.json

@@ -32,6 +32,7 @@
     "@pinetwork-js/sdk": "^0.7.0",
     "axios": "^1.6.7",
     "leaflet": "^1.9.4",
+    "leaflet-routing-machine": "^3.2.12",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

frontend/src/app/core/service/geolocation.service.ts

@@ -7,7 +7,7 @@ import axios from 'axios';
   providedIn: 'root',
 })
 export class GeolocationService {
-  private readonly initZoomLevel = 15;
+  private readonly initZoomLevel = 18;
   initCoords: number[] = [];
   private readonly geolocationTrigger = new Subject<void>();
   private readonly maxZoomLevel = 18;
@@ -74,6 +74,18 @@ export class GeolocationService {
       shadowUrl: 'assets/marker-shadow.png',
     });
   }
+  getMiddleIcon(): Icon {
+    return icon({
+      ...Icon.Default.prototype.options,
+      iconUrl: 'assets/yellow.png',
+      iconRetinaUrl: 'assets/marker-icon.png',
+      shadowUrl: 'assets/marker-shadow.png',
+      iconSize: [41, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41],
+    });
+  }
 
   async getUserPositionManualy() {
     const response = await axios.get('https://ipapi.co/json/');

frontend/src/app/dialogs/social/social.component.html

@@ -1,10 +1,5 @@
 <h2 mat-dialog-title class="text-2xl font-bold text-center relative">
   <span>Map Of Pi Invitation</span>
-  <span
-    mat-dialog-close="true"
-    class="absolute top-4 right-4 py-2 px-4 bg-blue-500 rounded-full"
-    >X</span
-  >
 </h2>
 <mat-dialog-content class="text-lg mb-6">
   <p>
@@ -27,7 +22,12 @@ <h2 mat-dialog-title class="text-2xl font-bold text-center relative">
 <div class="flex justify-center items-center">
   <mat-dialog-actions class="flex justify-center items-center">
     <button mat-button mat-dialog-close mat-dialog-close="false">
-      <span class="px-4 py-2 bg-yellow-600 text-white rounded-md">Join Us</span>
+      <a
+        href="https://twitter.com/mapofpi"
+        target="_blank"
+        class="px-4 py-2 bg-yellow-600 text-white rounded-md"
+        >Join Us</a
+      >
     </button>
   </mat-dialog-actions>
 </div>

frontend/src/app/home/action-row/action-row.component.scss

@@ -1,11 +1,10 @@
 .action-row-container {
-    position: fixed;
-    top: 70%; /* Adjust this value as needed */
-    width: 100%;
-    min-width: 80px;
-    margin-bottom: 2px;
-    display: flex;
-    justify-content: center;
-    z-index: 5;
+  position: fixed;
+  top: 80%; /* Adjust this value as needed */
+  width: 100%;
+  min-width: 80px;
+  margin-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  z-index: 5;
 }
-

frontend/src/app/home/map/map.component.scss

@@ -2,3 +2,57 @@
   height: calc(100vh - var(--mat-toolbar-mobile-height));
   z-index: 0;
 }
+
+/* Customize the route popup */
+.leaflet-routing-container {
+  background-color: white; /* Change background color */
+  border: 2px solid #ca1010; /* Add border */
+  border-radius: 5px; /* Add border radius */
+  padding: 10px; /* Add padding */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions {
+  margin-bottom: 5px; /* Adjust margin */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions ul {
+  list-style: none; /* Remove list styles */
+  padding: 0; /* Remove padding */
+  margin: 0; /* Remove margin */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions ul li {
+  padding: 5px 0; /* Add padding */
+}
+
+.leaflet-routing-container
+  .leaflet-routing-instructions
+  ul
+  li
+  span.leaflet-routing-text {
+  font-weight: bold; /* Make text bold */
+}
+
+.leaflet-routing-container
+  .leaflet-routing-instructions
+  ul
+  li
+  span.leaflet-routing-icon {
+  margin-right: 5px; /* Adjust margin */
+}
+
+/* Customize the close button */
+.leaflet-routing-container .leaflet-routing-popup .leaflet-popup-close-button {
+  color: #333; /* Change color */
+  font-size: 16px; /* Adjust font size */
+  top: 5px; /* Adjust top position */
+  right: 5px; /* Adjust right position */
+}
+
+/* Hover effect for close button */
+.leaflet-routing-container
+  .leaflet-routing-popup
+  .leaflet-popup-close-button:hover {
+  color: #000; /* Change color on hover */
+}

frontend/src/app/home/map/map.component.ts

@@ -3,11 +3,12 @@ import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { Map, marker, Layer } from 'leaflet';
 import { GeolocationService } from '../../core/service/geolocation.service';
 import { SnackService } from '../../core/service/snack.service';
-import { take } from 'rxjs';
 import { dummyCoordinates } from '../../core/model/business';
 import { Router, RouterModule } from '@angular/router';
 import { ShopService } from '../../core/service/shop.service';
 import axios from 'axios';
+import 'leaflet-routing-machine';
+import * as L from 'leaflet';
 
 @Component({
   selector: 'app-map',
@@ -49,34 +50,10 @@ export class MapComponent implements OnInit {
   }
 
   locateMe(): void {
-    this.geolocationService
-      .getCurrentPosition()
-      .pipe(take(1))
-      .subscribe({
-        next: (coords: GeolocationCoordinates) => {
-          this.layer = marker([coords.latitude, coords.longitude], {
-            icon: this.geolocationService.getUserMarkerIcon(),
-          })
-            .bindPopup('A pretty CSS popup.<br> Easily customizable.')
-            .openPopup();
-
-          this.map.addLayer(this.layer);
-          this.map.flyTo([coords.latitude, coords.longitude], 15);
-
-          // Add all other coordinates to the map
-          this.addAllCoordinatesToMap();
-
-          this.cdr.detectChanges();
-        },
-        error: (error: string) => {
-          this.snackService.showError(`Geolocation error: ${error}`);
-        },
-      });
+    this.track();
   }
 
   async track() {
-    this.snackService.showMessage(`Locating your position`);
-
     console.log('Coordinates from shop in track: ', this.shopService.getUserPosition());
 
     const location = await axios.get('https://ipapi.co/json/');
@@ -89,7 +66,7 @@ export class MapComponent implements OnInit {
       const userMarker = marker([coord[0], coord[1]], {
         icon: this.geolocationService.getUserMarkerIcon(),
       })
-        .bindPopup('User location')
+        .bindPopup(`<div class=""> You're Here</div>`)
         .openPopup();
 
       this.map.addLayer(userMarker);
@@ -150,8 +127,89 @@ export class MapComponent implements OnInit {
         .addEventListener('click', (e) => {
           const commingBtn = document.querySelectorAll('#comming');
           commingBtn.forEach((btn) => {
-            btn.addEventListener('click', () => {
-              this.snackService.showMessage('This feature is in development');
+            btn.addEventListener('click', async () => {
+              const location = await axios.get('https://ipapi.co/json/');
+
+              const { data } = location;
+
+              const userLocation = [[data.latitude, data.longitude]];
+
+              const shopLocation = [shop.coordinates[0], shop.coordinates[1]];
+
+              this.map.closePopup();
+
+              const creatingMarkers = (i: number, waypoints: any, n: number) => {
+                let icon;
+
+                if (i === 0) {
+                  icon = this.geolocationService.getUserMarkerIcon();
+                } else if (i === n - 1) {
+                  icon = this.geolocationService.getMarkerIcon();
+                } else {
+                  icon = this.geolocationService.getMiddleIcon();
+                }
+
+                const newMarker = L.marker(waypoints.latLng, {
+                  icon: icon,
+                }).addTo(this.map);
+
+                newMarker.getElement()?.setAttribute('data-custom-type', i === 0 ? 'user' : i === n - 1 ? 'shop' : 'middle');
+
+                newMarker.addEventListener('click', (e) => {
+                  const customType = e.target.getElement()?.getAttribute('data-custom-type');
+
+                  switch (customType) {
+                    case 'user':
+                      this.snackService.showMessage(`Dear Soleil00 You"re located her`);
+                      break;
+                    case 'shop':
+                      newMarker.bindPopup(`
+                            <div class="p-4">
+                                <div class="text-lg font-bold mb-2">${shop.name}</div>
+                                <div>${shop.name} is located here and you are about to take routes towards it. It will approximately take you 23 min by car.</div>
+                                <button id="cancelBtn" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Cancel</button>
+                            </div>
+                        `);
+
+                      // Wait for the popup to open before attaching the event listener
+                      newMarker.on('popupopen', () => {
+                        const cancelBtn = document.getElementById('cancelBtn');
+                        if (cancelBtn) {
+                          cancelBtn.addEventListener('click', () => {
+                            // routeControl.removeFrom(this.map);
+                            this.map.removeControl(routeControl);
+                            newMarker.removeFrom(this.map);
+                            console.log('Button clicked');
+                          });
+                        }
+                      });
+
+                      break;
+                    case 'middle':
+                      this.snackService.showMessage('Middle clicked');
+                      break;
+                    default:
+                      this.snackService.showMessage('Unknown marker clicked');
+                  }
+                });
+              };
+
+              const routeControl = (window as any).L.Routing.control({
+                waypoints: [(window as any).L.latLng(userLocation[0], userLocation[1]), (window as any).L.latLng(shopLocation[0], shopLocation[1])],
+                showAlternatives: true,
+                createMarker: creatingMarkers,
+                altLineOptions: {
+                  styles: [
+                    { color: 'black', opacity: 0.15, weight: 9 },
+                    { color: 'white', opacity: 0.8, weight: 6 },
+                    { color: 'blue', opacity: 0.5, weight: 2 },
+                  ],
+                },
+              });
+
+              console.log('from routing : ', { ...routeControl });
+              console.log('type of routes : ', typeof routeControl);
+              routeControl.addTo(this.map);
             });
           });