From afad70924bf789fa1aa0ef3a899387f147bfb57e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 26 Mar 2024 12:23:04 +0100
Subject: [PATCH] Carto on Unveil ok

---
 .../Controllers/Fo/StaticPageController.php   |  37 ++-
 .../Requests/Bo/Sites/StoreSiteRequest.php    |   2 +-
 composer.json                                 |   3 +-
 composer.lock                                 | 279 +++++++++++++++++-
 config/image-resizer.php                      |  70 +++++
 .../assets/sites/default-picture-1000x727.jpg | Bin 0 -> 13734 bytes
 .../assets/sites/default-picture-300x300.png  | Bin 2555 -> 0 bytes
 database/seeders/Development/SiteSeeder.php   |   2 +-
 resources/sass/fo/base/_common.scss           |   6 +
 resources/sass/fo/pages/_unveil.scss          |  10 +-
 resources/ts/fo/base/common.ts                |  40 ++-
 .../fo/components/LeafletMapVueComponent.vue  | 132 ++++++---
 resources/ts/index.d.ts                       |   7 +
 resources/views/bo/pages/sites/form.blade.php |   4 +-
 resources/views/fo/pages/site.blade.php       |   2 +-
 resources/views/fo/pages/unveil.blade.php     |  24 +-
 resources/views/fo/partials/carte.blade.php   |  61 ++++
 17 files changed, 588 insertions(+), 91 deletions(-)
 create mode 100644 config/image-resizer.php
 create mode 100644 database/factories/assets/sites/default-picture-1000x727.jpg
 delete mode 100644 database/factories/assets/sites/default-picture-300x300.png
 create mode 100644 resources/views/fo/partials/carte.blade.php

diff --git a/app/Http/Controllers/Fo/StaticPageController.php b/app/Http/Controllers/Fo/StaticPageController.php
index de72f36..c3f2117 100644
--- a/app/Http/Controllers/Fo/StaticPageController.php
+++ b/app/Http/Controllers/Fo/StaticPageController.php
@@ -21,6 +21,7 @@ use App\Models\StaticPage;
 use App\Models\Strip;
 use App\Models\Testimonial;
 use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Str;
 
 class StaticPageController extends Controller
 {
@@ -80,18 +81,24 @@ class StaticPageController extends Controller
         $historySection    = $sectionModels->where('section', PageSectionEnum::unveil_history)->first();
         $commitmentSection = $sectionModels->where('section', PageSectionEnum::unveil_commitments)->first();
 
-        // * Calcul Viewbox leaflet map.
-        $viewBox = (object)[
-            // @phpstan-ignore-next-line
-            'lat' => \round($siteModelList->sum(fn (Site $siteModel) =>
-            $siteModel->latitude) / $siteModelList->count(), 6),
-            // @phpstan-ignore-next-line
-            'lng' => \round($siteModelList->sum(fn (Site $siteModel) =>
-            $siteModel->longitude) / $siteModelList->count(), 6)
-        ];
+        $viewBox     = null;
+        $initialZoom = null;
+        // * Calcul Viewbox leaflet map ().
+        // Carte  page “on se dévoile” : Point central = Laval + rayon = 100 km 
+        /** @var \App\Models\Site|null $lavalSite */
+        // @phpstan-ignore-next-line
+        $lavalSite = $siteModelList->first(fn (Site $site) => Str::contains($site->name, 'Laval'));
+        if ($lavalSite) {
+            $viewBox     = (object)[
+                'lat' => $lavalSite->latitude,
+                'lng' => $lavalSite->longitude
+            ];
+            $initialZoom = 9;
+        }
 
         return view('fo.pages.unveil', compact(
             'viewBox',
+            'initialZoom',
             'staticPageModel',
             'sectionModels',
             'historicalMilestoneModels',
@@ -276,9 +283,17 @@ class StaticPageController extends Controller
             $nextSiteModel = Site::query()->orderBy('order')->where('order', '>', $site->order)->first();
         }
 
+        $viewBox     = (object)[
+            'lat' => $site->latitude,
+            'lng' => $site->longitude
+        ];
+        $initialZoom = 9;
+
         return view('fo.pages.site', [
             'siteModel' => $site,
-            'nextSiteModel' => $nextSiteModel
+            'nextSiteModel' => $nextSiteModel,
+            'viewBox' => $viewBox,
+            'initialZoom' => $initialZoom,
         ]);
     }
-}
\ No newline at end of file
+}
diff --git a/app/Http/Requests/Bo/Sites/StoreSiteRequest.php b/app/Http/Requests/Bo/Sites/StoreSiteRequest.php
index 832c6c9..49734d1 100644
--- a/app/Http/Requests/Bo/Sites/StoreSiteRequest.php
+++ b/app/Http/Requests/Bo/Sites/StoreSiteRequest.php
@@ -80,7 +80,7 @@ class StoreSiteRequest extends FormRequest
         ];
         return \array_merge(
             $rules,
-            $this->pictureRules('logo', 300, 300, 300, 300, false),
+            $this->pictureRules('logo', 1000, 727, 1000, 727, false),
             $this->pictureRules('picture_1', 1000, 562, 1000, 562, false),
             $this->pictureRules('picture_2', 1000, 562, 1000, 562, true),
             $this->pictureRules('picture_3', 1000, 562, 1000, 562, true),
diff --git a/composer.json b/composer.json
index a312fbb..abb7b6e 100644
--- a/composer.json
+++ b/composer.json
@@ -16,6 +16,7 @@
         "axlon/laravel-postal-code-validation": "^3.5",
         "diglactic/laravel-breadcrumbs": "^8.0",
         "guzzlehttp/guzzle": "^7.2",
+        "kwaadpepper/image-resizer": "^2.1",
         "laravel/framework": "^10.0",
         "laravel/tinker": "^2.8",
         "laravel/ui": "^4.2",
@@ -28,7 +29,7 @@
         "fakerphp/faker": "^1.9.1",
         "kitloong/laravel-migrations-generator": "^6.8",
         "krlove/eloquent-model-generator": "dev-l10-compatibility",
-        "larastan/larastan": "^2.6",
+        "larastan/larastan": "^2.9",
         "laravel-lang/common": "^4.0",
         "laravel/pint": "^1.0",
         "laravel/sail": "^1.18",
diff --git a/composer.lock b/composer.lock
index d7285ee..9ec12b2 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "4bf7c1fe3b307c9b2251f4ebcfbd0cd4",
+    "content-hash": "1da5334945451015dfb5c5edc5c9b42f",
     "packages": [
         {
             "name": "axlon/laravel-postal-code-validation",
@@ -1422,6 +1422,158 @@
             ],
             "time": "2023-12-03T19:50:20+00:00"
         },
+        {
+            "name": "intervention/image",
+            "version": "2.7.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Intervention/image.git",
+                "reference": "04be355f8d6734c826045d02a1079ad658322dad"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Intervention/image/zipball/04be355f8d6734c826045d02a1079ad658322dad",
+                "reference": "04be355f8d6734c826045d02a1079ad658322dad",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "guzzlehttp/psr7": "~1.1 || ^2.0",
+                "php": ">=5.4.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "~0.9.2",
+                "phpunit/phpunit": "^4.8 || ^5.7 || ^7.5.15"
+            },
+            "suggest": {
+                "ext-gd": "to use GD library based image processing.",
+                "ext-imagick": "to use Imagick based image processing.",
+                "intervention/imagecache": "Caching extension for the Intervention Image library"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.4-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Intervention\\Image\\ImageServiceProvider"
+                    ],
+                    "aliases": {
+                        "Image": "Intervention\\Image\\Facades\\Image"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Intervention\\Image\\": "src/Intervention/Image"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Oliver Vogel",
+                    "email": "oliver@intervention.io",
+                    "homepage": "https://intervention.io/"
+                }
+            ],
+            "description": "Image handling and manipulation library with support for Laravel integration",
+            "homepage": "http://image.intervention.io/",
+            "keywords": [
+                "gd",
+                "image",
+                "imagick",
+                "laravel",
+                "thumbnail",
+                "watermark"
+            ],
+            "support": {
+                "issues": "https://github.com/Intervention/image/issues",
+                "source": "https://github.com/Intervention/image/tree/2.7.2"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/interventionio",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/Intervention",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-05-21T17:30:32+00:00"
+        },
+        {
+            "name": "intervention/imagecache",
+            "version": "2.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Intervention/imagecache.git",
+                "reference": "86136575a62d3634b51f196a998fce4a583b49bb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Intervention/imagecache/zipball/86136575a62d3634b51f196a998fce4a583b49bb",
+                "reference": "86136575a62d3634b51f196a998fce4a583b49bb",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/cache": "^5.5|~6|~7|~8|~9|~10",
+                "illuminate/filesystem": "^5.5|~6|~7|~8|~9|~10",
+                "intervention/image": "~2.2",
+                "nesbot/carbon": "^2.39",
+                "opis/closure": "^3.5",
+                "php": "~7.2|~8"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^8.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Intervention\\Image\\": "src/Intervention/Image"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Oliver Vogel",
+                    "email": "oliver@intervention.io",
+                    "homepage": "http://intervention.io/"
+                }
+            ],
+            "description": "Caching extension for the Intervention Image Class",
+            "homepage": "https://image.intervention.io",
+            "keywords": [
+                "cache",
+                "gd",
+                "image",
+                "imagick",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/Intervention/imagecache/issues",
+                "source": "https://github.com/Intervention/imagecache/tree/2.6.0"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/interventionio",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/Intervention",
+                    "type": "github"
+                }
+            ],
+            "abandoned": true,
+            "time": "2023-02-25T19:40:47+00:00"
+        },
         {
             "name": "jean85/pretty-package-versions",
             "version": "2.0.6",
@@ -1481,6 +1633,66 @@
             },
             "time": "2024-03-08T09:58:59+00:00"
         },
+        {
+            "name": "kwaadpepper/image-resizer",
+            "version": "2.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Kwaadpepper/image-resizer.git",
+                "reference": "2a14ad153b34916f437af50549bad47c018902df"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Kwaadpepper/image-resizer/zipball/2a14ad153b34916f437af50549bad47c018902df",
+                "reference": "2a14ad153b34916f437af50549bad47c018902df",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "~10",
+                "intervention/image": "^2.7.2",
+                "intervention/imagecache": "^2.6",
+                "laravel/framework": "~10"
+            },
+            "require-dev": {
+                "slevomat/coding-standard": "^8.11"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Kwaadpepper\\ImageResizer\\ImageResizerServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Kwaadpepper\\ImageResizer\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jérémy Munsch",
+                    "email": "github@jeremydev.ovh",
+                    "homepage": "https://jeremydev.ovh"
+                }
+            ],
+            "description": "Resize images on the fly and cache them",
+            "homepage": "https://github.com/kwaadpepper/image-resizer",
+            "keywords": [
+                "images",
+                "laravel",
+                "resize"
+            ],
+            "support": {
+                "issues": "https://github.com/Kwaadpepper/image-resizer/issues",
+                "source": "https://github.com/Kwaadpepper/image-resizer/tree/2.1.0"
+            },
+            "time": "2023-06-08T12:07:24+00:00"
+        },
         {
             "name": "laravel/framework",
             "version": "v10.48.3",
@@ -2982,6 +3194,71 @@
             ],
             "time": "2023-11-13T09:31:12+00:00"
         },
+        {
+            "name": "opis/closure",
+            "version": "3.6.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/opis/closure.git",
+                "reference": "3d81e4309d2a927abbe66df935f4bb60082805ad"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/opis/closure/zipball/3d81e4309d2a927abbe66df935f4bb60082805ad",
+                "reference": "3d81e4309d2a927abbe66df935f4bb60082805ad",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^5.4 || ^7.0 || ^8.0"
+            },
+            "require-dev": {
+                "jeremeamia/superclosure": "^2.0",
+                "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0 || ^8.0 || ^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.6.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "functions.php"
+                ],
+                "psr-4": {
+                    "Opis\\Closure\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Marius Sarca",
+                    "email": "marius.sarca@gmail.com"
+                },
+                {
+                    "name": "Sorin Sarca",
+                    "email": "sarca_sorin@hotmail.com"
+                }
+            ],
+            "description": "A library that can be used to serialize closures (anonymous functions) and arbitrary objects.",
+            "homepage": "https://opis.io/closure",
+            "keywords": [
+                "anonymous functions",
+                "closure",
+                "function",
+                "serializable",
+                "serialization",
+                "serialize"
+            ],
+            "support": {
+                "issues": "https://github.com/opis/closure/issues",
+                "source": "https://github.com/opis/closure/tree/3.6.3"
+            },
+            "time": "2022-01-27T09:35:39+00:00"
+        },
         {
             "name": "phpoption/phpoption",
             "version": "1.9.2",
diff --git a/config/image-resizer.php b/config/image-resizer.php
new file mode 100644
index 0000000..4443faa
--- /dev/null
+++ b/config/image-resizer.php
@@ -0,0 +1,70 @@
+<?php
+
+return [
+    /**
+     * The php image driver to use
+     * this can be 'imagick' or 'gd'
+     */
+    'driver' => 'imagick',
+
+    /**
+     * The cache driver to use as defined
+     * in config/cache of your app
+     */
+    'cache' => 'file',
+
+    /**
+     * The path where to store image in cache
+     */
+    'cachePath' => 'cache/images',
+
+    /**
+     * Image cache life time
+     * This is given in minutes
+     * Here the cache for images is
+     * one hour
+     */
+    'lifetime' => 60,
+
+    /**
+     * Format can specifiy to which format save the image
+     *              JPEG PNG GIF TIF BMP ICO PSD WebP
+     *   GD         ✔️  ✔️  ✔️   -   -   -   -  ✔️ *
+     *   Imagick    ✔️  ✔️  ✔️  ✔️  ✔️  ✔️ ✔️  ✔️ *
+     *   For WebP support GD driver must be used with PHP 5 >= 5.5.0 or PHP 7
+     *   in order to use imagewebp(). If Imagick is used, it must be compiled
+     *   with libwebp for WebP support.
+     *   resize => will resize the image (boolean)
+     *   fit => Combine cropping and resizing to format image in a smart way (boolean)
+     *   keepRatio => will keep image ratio wile resizing (boolean)
+     *   trim => boolean to trim the image using border color
+     *   inCanvas => to make sure image boundarie is respected
+     *   format => select tha wantd ouput form, yan can just convert images if you want
+     * example :
+     *  'small' => [
+     *      'height' => 500,
+     *      'width' => 250,
+     *      'inCanvas' => true,
+     *      'trim' => ['transparent', null, 10]
+     *  ],
+     *  'smallWebp' => [
+     *      'height' => 500,
+     *      'width' => 250,
+     *      'inCanvas' => true,
+     *      'format' => 'webp'
+     *  ],
+     *  'justconvertImage' => [
+     *      'format' => 'webp'
+     *  ]
+     */
+    'templates' => [
+        'cartoPicture' => [
+            'height' => 140,
+            'width' => 155,
+            'fit' => true,
+            'inCanvas' => true,
+            'trim' => ['transparent', null, 10],
+            'format' => 'webp',
+        ]
+    ]
+];
diff --git a/database/factories/assets/sites/default-picture-1000x727.jpg b/database/factories/assets/sites/default-picture-1000x727.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..68c2be001353d8ed684706cbc61858bff63a8ed7
GIT binary patch
literal 13734
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

literal 0
HcmV?d00001

diff --git a/database/factories/assets/sites/default-picture-300x300.png b/database/factories/assets/sites/default-picture-300x300.png
deleted file mode 100644
index 8daffacf10a44cd41900079cd5a6e922e0f572d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2555
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
KM9{q>v;GHaF=D6y

diff --git a/database/seeders/Development/SiteSeeder.php b/database/seeders/Development/SiteSeeder.php
index 583986c..0e10ac8 100644
--- a/database/seeders/Development/SiteSeeder.php
+++ b/database/seeders/Development/SiteSeeder.php
@@ -25,7 +25,7 @@ class SiteSeeder extends Seeder
             $site->logo      = FileStorageHelper::storeFile(
                 new Site(),
                 new \SplFileInfo(\resource_path(
-                    '../database/factories/assets/sites/default-picture-300x300.png'
+                    '../database/factories/assets/sites/default-picture-1000x727.jpg'
                 ))
             );
             $site->picture_1 = FileStorageHelper::storeFile(
diff --git a/resources/sass/fo/base/_common.scss b/resources/sass/fo/base/_common.scss
index 73a8205..eeb3b08 100644
--- a/resources/sass/fo/base/_common.scss
+++ b/resources/sass/fo/base/_common.scss
@@ -176,3 +176,9 @@ $theme-colors: map.merge($theme-colors, $light-colors);
         }
     }
 }
+
+// .map-site-widget {
+//     img {
+//         width: 6rem;
+//     }
+// }
diff --git a/resources/sass/fo/pages/_unveil.scss b/resources/sass/fo/pages/_unveil.scss
index affb0f9..fc79930 100644
--- a/resources/sass/fo/pages/_unveil.scss
+++ b/resources/sass/fo/pages/_unveil.scss
@@ -18,7 +18,15 @@
 
     .sites {
         .embed-map {
-            min-height: 20rem;
+            min-height: 30rem;
+
+            @include media-breakpoint-up(sm) {
+                min-height: 35rem;
+            }
+
+            @include media-breakpoint-up(md) {
+                min-height: 40rem;
+            }
 
             iframe {
                 width: 100%;
diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts
index 1d999e9..f58de70 100644
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@@ -177,6 +177,27 @@ document.addEventListener("DOMContentLoaded", function () {
                 },
             },
         },
+        "swiper-sites-map": {
+            centeredSlides: true,
+            modules: [Keyboard],
+            grabCursor: true,
+            slidesPerView: 1,
+            spaceBetween: 20,
+            keyboard: {
+                enabled: true,
+            },
+            breakpoints: {
+                768: {
+                    slidesPerView: 1.5,
+                },
+                992: {
+                    slidesPerView: 1,
+                },
+                1200: {
+                    slidesPerView: 1.3,
+                },
+            },
+        },
         "swiper-sites-pictures": {
             modules: [Navigation, Keyboard],
             grabCursor: true,
@@ -301,13 +322,8 @@ document.addEventListener("DOMContentLoaded", function () {
         },
     };
 
-    type SwiperSlider = {
-        element: HTMLElement;
-        swiper: Swiper;
-    };
-
-    const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>,
-        sliders: SwiperSlider[] = [];
+    const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>;
+    window.__SLIDERS = new Map<string,SwiperSlider>();
 
     for (const htmlElt of swiperVol) {
         if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
@@ -315,10 +331,12 @@ document.addEventListener("DOMContentLoaded", function () {
         }
         // @ts-ignore
         const swiper = new Swiper(htmlElt, swiperConfig[htmlElt.id as keyof typeof swiperConfig]);
-        sliders.push({
-            element: htmlElt,
-            swiper: swiper,
-        });
+        window.__SLIDERS.set(
+            htmlElt.id,
+            {
+                element: htmlElt,
+                swiper: swiper,
+            });
         if (swiper.el.id === "swiper-teams") {
             const btnPlayPause = document.querySelector(".swiper-pagination-playpause");
             btnPlayPause?.addEventListener("click", function () {
diff --git a/resources/ts/fo/components/LeafletMapVueComponent.vue b/resources/ts/fo/components/LeafletMapVueComponent.vue
index 6c869d7..eb70d35 100644
--- a/resources/ts/fo/components/LeafletMapVueComponent.vue
+++ b/resources/ts/fo/components/LeafletMapVueComponent.vue
@@ -5,7 +5,7 @@
   >
     <div
       ref="marker"
-      class="d-none marker-pin text-bg-white px-3 py-1 d-flex justify-content-center align-items-center f-barlow rounded-pill border border-1 border-primary"
+      class="d-none marker-pin bg-white text-primary px-3 py-1 d-flex justify-content-center align-items-center f-barlow rounded-pill border border-1 border-primary"
     >
       <img
         class="marker-logo mx-1"
@@ -13,25 +13,13 @@
         alt=""
       >
       <span>
-        <span class="mx-1 marker-title text-primary fw-bold text-uppercase text-break" />
-      </span>
-    </div>
-
-    <div
-      ref="marker-pannel"
-      class="d-none"
-    >
-      <span class="h4 marker-title" />
-      <div class="marker-desc" />
-      <span class="marker-people">
-        <FontAwesomeIcon icon="fa-solid fa-users" />
+        <span class="mx-1 marker-title fw-bold text-uppercase text-break" />
       </span>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { DivIcon, Icon, Map, Marker, TileLayer, type LatLngExpression, type LatLngTuple } from "leaflet";
 // @ts-ignore
 import "overlapping-marker-spiderfier-leaflet";
@@ -55,30 +43,32 @@ type Site = {
     alt: string;
     title: string;
   },
-  divIcon: DivIcon
+  divIcon: DivIcon,
+  marker: Marker|null
 };
 
 export default defineComponent({
   name: "LeafletMapVueComponent",
   mixins: [trans],
-  components: {FontAwesomeIcon},
   data(): {
     wrapperClasses: string[];
     map: Map;
     oms: OverlappingMarkerSpiderfier;
-    initialPosition: LatLngExpression;
+    initialPosition: LatLngExpression | null;
     initialZoom: number;
     siteList: Array<Site>;
     markerTextLength: number;
+    controlSliderId: string|null;
   } {
     return {
       wrapperClasses:[],
       map: {} as Map,
       oms: {} as OverlappingMarkerSpiderfier,
-      initialPosition: [0, 0],
-      initialZoom: 3,
+      initialPosition: null,
+      initialZoom: 9,
       siteList: [],
-      markerTextLength: 20
+      markerTextLength: 20,
+      controlSliderId: null
     };
   },
   computed: {},
@@ -86,7 +76,21 @@ export default defineComponent({
     const json = String(this.$attrs.json ?? "{}"),
           data = JSON.parse(json);
     this.wrapperClasses = data.wrapperClasses ?? [];
-    this.initialPosition = [Number.parseFloat(data.coordinates.lat), Number.parseFloat(data.coordinates.lng)];
+
+    if(data.coordinates) {
+      this.initialPosition = [
+        Number.parseFloat(data.coordinates.lat),
+        Number.parseFloat(data.coordinates.lng)
+      ];
+    }
+    if(data.initialZoom) {
+      this.initialZoom = data.initialZoom;
+    }
+
+    if(data.controlSliderId) {
+      this.controlSliderId = String(data.controlSliderId);
+    }
+    console.log(data);
 
     this.parseSiteModelList(data.siteModelList);
 
@@ -108,8 +112,12 @@ export default defineComponent({
       (new TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
       })).addTo(this.map as Map);
-      // * Auto set viewbox
-      (this.map as Map).fitBounds(this.siteList.map(site => Object.values(site.coords)) as LatLngTuple[]);
+      if(!this.initialPosition) {
+        // * Auto set viewbox
+        (this.map as Map).fitBounds(this.siteList.map(site => Object.values(site.coords)) as LatLngTuple[]);
+      } else {
+        (this.map as Map).setView(this.initialPosition, this.initialZoom);
+      }
       // * Setup OMS
       // @ts-ignore
       this.oms = new OverlappingMarkerSpiderfier(this.map as Map, {
@@ -130,14 +138,11 @@ export default defineComponent({
         // ditto
         spiralLengthFactor: 5,
       });
-      this.oms.addListener("click", (marker: Marker) => {
-        console.log(marker);
-      });
-      this.oms.addListener("spiderfy", () => {
-        this.map.closePopup();
-      });
+      this.oms.addListener("click", this.selectedMarker);
+      this.oms.addListener("spiderfy", this.clearSelectedMarkers);
     },
     parseSiteModelList(siteModelList: LaravelModelList) {
+      const bodyFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
       siteModelList.forEach((site) => {
         this.siteList.push({
           name: String(site.name),
@@ -152,6 +157,7 @@ export default defineComponent({
             alt: String(site.logo_alt),
             title: String(site.logo_title),
           },
+          marker: null,
           divIcon: new DivIcon({
             className: "leaf-div-icon",
             html: this.fetchNewMarkerElement(
@@ -162,8 +168,7 @@ export default defineComponent({
                 title: String(site.logo_title),
               }
             ),
-            iconSize: [30, 42],
-            iconAnchor: [15, 42]
+            iconSize: [10*bodyFontSize, 3*bodyFontSize],
           })
         });
       });
@@ -191,6 +196,7 @@ export default defineComponent({
         this.map.addLayer(marker);
         // @ts-ignore
         this.oms.addMarker(marker);
+        site.marker = marker;
       });
     },
     truncateString(str: string, limit: number, end: string = "..") {
@@ -198,6 +204,37 @@ export default defineComponent({
         return str;
       }
       return str.slice(0, limit) + end;
+    },
+    selectedMarker(marker: Marker) {
+      this.clearSelectedMarkers();
+      const siteIndex = this.siteList.findIndex(site => site!.marker!.options.title === marker.options.title);
+      if(siteIndex === -1) {
+        throw new Error("Could not fetch related Site");
+      }
+      const pin = marker.getElement()!.firstChild as HTMLElement | null;
+      if(!pin) {
+        throw new Error("Missing Marker Pin");
+      }
+      pin.classList.add("bg-primary", "text-white");
+      pin.classList.remove("bg-white", "text-primary");
+
+      if(this.controlSliderId) {
+        const slider = window.__SLIDERS.get(this.controlSliderId);
+        if(!slider) {
+          throw new Error(`Missing slider to control ${this.controlSliderId}`);
+        }
+        slider.swiper.slideTo(siteIndex);
+      }
+    },
+    clearSelectedMarkers() {
+      this.siteList.forEach(site => {
+        const pin =  site.marker!.getElement()!.firstChild as HTMLElement | null;
+        if(!pin) {
+          throw new Error("Missing Marker Pin");
+        }
+        pin.classList.add("bg-white", "text-primary");
+        pin.classList.remove("bg-primary", "text-white");
+      });
     }
   },
 });
@@ -208,26 +245,29 @@ export default defineComponent({
 </style>
 
 <style lang="scss" scoped>
-
-
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/vendor/rfs";
-  .leafleat-wrapper-class {
-    .marker-pin {
-      @include rfs(10rem, min-width);
-    }
-    .marker-logo {
-      object-fit: contain;
-      height: auto;
-
-      @include rfs(2rem, width);
-    }
-    .marker-title {
-      @include rfs(0.8rem, font-size);
-    }
+.leafleat-wrapper-class {
+  .marker-pin {
+    width: 10rem;
+    height: 3rem;
   }
+  .marker-logo {
+    object-fit: contain;
+    height: auto;
+    width: 2rem;
+  }
+  .marker-title {
+    @include rfs(0.8rem, font-size);
+    overflow: hidden;
+    display: -webkit-box;
+    /* number of lines to show */
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 </style>
diff --git a/resources/ts/index.d.ts b/resources/ts/index.d.ts
index 1626858..6f94bc6 100644
--- a/resources/ts/index.d.ts
+++ b/resources/ts/index.d.ts
@@ -1,6 +1,7 @@
 import CookieNotice from "@ldc-web/cookie-notice";
 import type VueTagsInput from "@sipec/vue3-tags-input";
 import { AxiosStatic } from "axios";
+import type Swiper from "swiper";
 export { };
 
 // * Enum
@@ -71,11 +72,17 @@ declare global {
 
     type Enum = EnumInterface;
 
+    type SwiperSlider = {
+        element: HTMLElement;
+        swiper: Swiper;
+    };
+
     interface Window {
         CookieNotice: typeof CookieNotice;
         axios: AxiosStatic;
         Swal: Function;
         vueDebug: boolean | undefined;
+        __SLIDERS: Map<string, SwiperSlider>,
         __SYSTEM: {
             _asset: Record<string, string>;
             _locale: string;
diff --git a/resources/views/bo/pages/sites/form.blade.php b/resources/views/bo/pages/sites/form.blade.php
index 05eb2a2..efac1b6 100644
--- a/resources/views/bo/pages/sites/form.blade.php
+++ b/resources/views/bo/pages/sites/form.blade.php
@@ -593,11 +593,11 @@
                         'id' => 'siteLogo',
                         'name' => 'logo',
                         'width' => 1000,
-                        'height' => 562,
+                        'height' => 727,
                         'model' => $siteModel ?? null,
                         'helper' => __('crud.minicrud.dimensions_must_be', [
                             'widthpx' => '1000px',
-                            'heightpx' => '562px',
+                            'heightpx' => '727px',
                         ]),
                         'required' => true,
                         'preview' => true,
diff --git a/resources/views/fo/pages/site.blade.php b/resources/views/fo/pages/site.blade.php
index 977a03c..5cc2890 100644
--- a/resources/views/fo/pages/site.blade.php
+++ b/resources/views/fo/pages/site.blade.php
@@ -14,7 +14,7 @@
                 </div>
                 <div class="col-12">
                     <div class="d-flex justify-content-between">
-                        <a href="{{ route('fo.home.show') }}" title="{{ __('Retour à la page d\'accueil') }}">
+                        <a href="{{ url()->previous() }}" title="{{ __('Retour à la page d\'accueil') }}">
                             <img class="arrow-left" src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                 title="{{ __('Retour à la page d\'accueil') }}" alt="{{ __('Flèche vers la gauche') }}">
                             {{ __('Retour') }}
diff --git a/resources/views/fo/pages/unveil.blade.php b/resources/views/fo/pages/unveil.blade.php
index d3f67bb..560747c 100644
--- a/resources/views/fo/pages/unveil.blade.php
+++ b/resources/views/fo/pages/unveil.blade.php
@@ -105,23 +105,17 @@
                             </div>
                         @endif
                     </div>
-                    <div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center">
+                    <div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center position-relative g-0">
                         @php
-                            $data = [
-                                'wrapperClasses' => 'rounded-3 embed-map w-100 my-3',
-                                'coordinates' => [
-                                    'lat' => $viewBox->lat,
-                                    'lng' => $viewBox->lng,
-                                ],
-                                'siteModelList' => $siteModelList,
-                            ];
+                            $carto = ['siteModelList' => $siteModelList];
+                            if (!empty($viewBox)) {
+                                $carto = $carto + compact('viewBox');
+                            }
+                            if (!empty($initialZoom)) {
+                                $carto['initialZoom'] = $initialZoom;
+                            }
                         @endphp
-                        <div class="leaflet-map-vue w-100" data-json='@json($data)'></div>
-                        {{-- FIXME: Quelles coordonnées pour la map ? --}}
-                        {{-- <iframe class="rounded-3 embed-map w-100 my-3"
-                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10661.469000249905!2d-0.7577479264599797!3d48.083855231712434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4809013bc7a7e43f%3A0xe01d7907f663610d!2sSNV%20Laval!5e0!3m2!1sfr!2sfr!4v1709025460315!5m2!1sfr!2sfr"
-                            title="{{ __('Carte de nos sites') }}" style="border:0;" allowfullscreen="" loading="lazy"
-                            referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
+                        @include('fo.partials.carte', $carto)
                     </div>
                 </div>
             </div>
diff --git a/resources/views/fo/partials/carte.blade.php b/resources/views/fo/partials/carte.blade.php
new file mode 100644
index 0000000..da63310
--- /dev/null
+++ b/resources/views/fo/partials/carte.blade.php
@@ -0,0 +1,61 @@
+{{-- Carte  page “on se dévoile” : Point central = Laval + rayon = 100 km   --}}
+{{-- Carte  page “site ” : Point central =  le site  + rayon = 50 km   --}}
+{{-- FIXME: USE COORDINATES TO CENTER MAP --}}
+@php
+    $data = [
+        'wrapperClasses' => 'rounded-3 embed-map w-100 my-3',
+        'siteModelList' => $siteModelList,
+        'controlSliderId' => 'swiper-sites-map',
+    ];
+    if (!empty($viewBox)) {
+        $data['coordinates'] = [
+            'lat' => $viewBox->lat,
+            'lng' => $viewBox->lng,
+        ];
+    }
+    if (!empty($initialZoom)) {
+        $data['initialZoom'] = $initialZoom;
+    }
+    $colors = ['quint', 'secondary', 'sixt', 'quad'];
+@endphp
+<div class="leaflet-map-vue w-100 z-1" data-json='@json($data)'></div>
+<div class="swiper w-100 z-2 swiper-sites-map position-absolute bottom-0 mb-4 px-2 pt-2" id="swiper-sites-map">
+    <div class="swiper-wrapper h-fit">
+        @foreach ($siteModelList as $index => $siteModel)
+            <div class="swiper-slide position-relative">
+                <div
+                    class="d-flex map-site-widget justify-content-center align-items-stretch text-bg-white rounded-4 border-primary border-1 flex-row overflow-hidden border p-2">
+                    <div class="d-flex align-items-center justify-content-center">
+                        <img class="rounded-3" src="{{ asset(resize($siteModel->picture_1, 'cartoPicture')) }}"
+                            title="{{ $siteModel->picture_1_title }}" alt="{{ $siteModel->picture_1_alt }}">
+                    </div>
+                    <div class="flex-grow-1 d-flex flex-column ps-3">
+                        <div class="h4 text-uppercase fw-bold text-primary">{{ Str::limit($siteModel->name, 25, '...') }}</div>
+                        <div class="ck-content text-primary py-1">{{ Str::limit(strip_tags($siteModel->description), 150, '...') }}
+                        </div>
+                        <div class="flex-grow-1 d-flex justify-content-between align-items-end mt-2 flex-row pb-2">
+                            <span class="text-primary d-inline-block">
+                                <i class="fa-solid fa-users me-2"></i>
+                                <span>{{ $siteModel->employees }}</span>
+                            </span>
+                            <a class="text-bg-{{ $colors[$index % count($colors)] }} carto-link p-3"
+                                href="{{ route('fo.sites.show', $siteModel) }}" alt="{{ __('Voir la page du site') }}">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+        @push('styles')
+            <style nonce="{{ $nonce }}">
+                .carto-link {
+                    position: relative;
+                    bottom: -1.1rem;
+                    border-radius: 1rem 0 0 0;
+                    right: -.5rem;
+                }
+            </style>
+        @endpush
+    </div>
+</div>