ajout du responsive

angular-client/src/app/components/shared/contact/map/map.component.scss

@@ -1,5 +1,12 @@
 #frugalmap {
+  height: 400px;  /* Carte visible */
+  width: 100%;
+  z-index: 1;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #frugalmap {
     height: 300px;
-    width: 100%;
-    border-radius: 1em;
-}
+  }
+}

angular-client/src/app/components/shared/contact/map/map.component.ts

@@ -1,15 +1,15 @@
-import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, OnInit, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Restaurant } from './../../../../models/restaurant';
 import { RestaurantsService } from 'src/app/services/restaurants.service';
-import { LeafletService } from 'src/app/services/leaflet.service'; // Assurez-vous de créer ce service
+import { LeafletService } from 'src/app/services/leaflet.service';
 
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements OnInit, AfterViewInit {
   private L: any;
   private macarte: any;
 
@@ -22,81 +22,45 @@ export class MapComponent implements OnInit {
   ngOnInit() {
     if (isPlatformBrowser(this.platformId)) {
       this.L = this.leafletService.getLeaflet();
+    }
+  }
+
+  ngAfterViewInit() {
+    if (isPlatformBrowser(this.platformId)) {
       this.initMap();
+
+      // Corriger le découpage de la carte après affichage
+      setTimeout(() => {
+        this.macarte.invalidateSize();
+      }, 500);
     }
   }
 
   private initMap(): void {
     if (!this.L) return;
 
-    // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
     this.macarte = this.L.map('frugalmap').setView([48.85513, 2.353429], 9);
 
+    // Utiliser HTTPS pour éviter les erreurs Mixed Content
     this.L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
       attribution: 'FatBoar',
     }).addTo(this.macarte);
 
     const myIcon = this.L.icon({
-      iconUrl: "../assets/img/marker/markericon.png"
+      iconUrl: 'assets/img/marker/markericon.png',
+      iconSize: [38, 38],
+      iconAnchor: [19, 38],
     });
 
     this.restaurantsService.getRestaurants().subscribe((data: any) => {
-      console.log('test resto', data);
       data.forEach((res: Restaurant) => {
         const marker = this.L.marker([res.latitude, res.longitude], { icon: myIcon }).addTo(this.macarte);
 
-        marker.bindPopup(`<h5 style="text-align: center"><b>${res.name}</b></h5>  <b> adresse : </b>${res.adress}`,
+        marker.bindPopup(
+          `<h5 style="text-align: center"><b>${res.name}</b></h5><b>Adresse :</b> ${res.adress}`,
           { maxWidth: 130, minWidth: 120 }
         );
       });
     });
   }
 }
-
-
-
-// import { Restaurant } from './../../../../models/restaurant';
-// import { Component, OnInit } from '@angular/core';
-// import { HttpClient } from '@angular/common/http';
-// import * as L from 'leaflet';
-// import { RestaurantsService } from 'src/app/services/restaurants.service';
-
-
-// @Component({
-//   selector: 'app-map',
-//   templateUrl: './map.component.html',
-//   styleUrls: ['./map.component.scss']
-// })
-// export class MapComponent implements OnInit {
-//   constructor(private restaurantsService: RestaurantsService) {}
- 
-//   // Fonction d'initialisation du composant.
-//   ngOnInit() {
-//     // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom.
-//     const macarte = L.map('frugalmap').setView([48.85513, 2.353429], 9);
-   
-//     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-//       attribution: 'FatBoar',
-//     }).addTo(macarte);
-   
-//     const myIcon = L.icon({
-//       // iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png'
-//       iconUrl: "../assets/img/marker/markericon.png"
-      
-//     });
-   
-   
-//     this.restaurantsService.getRestaurants().subscribe((data: any) => {
-//       console.log('test resto', data)
-//       data.forEach( (res : Restaurant ) => {
-//         var marker = L.marker([res.latitude, res.longitude], {icon: myIcon}).addTo(macarte);
-  
-
-//         marker.bindPopup(`<h5 style="text-align: center"><b>${res.name}</b></h5>  <b> adresse : </b>${res.adress}`,
-//         { maxWidth: 130 , minWidth:120}
-//         );
-//       });
-//     });
-   
-//   }
-//   }