Ajoute une recherche de lieu à la carte

assets/customElements/map.js

@@ -219,6 +219,14 @@ class MapLibreMap {
         });
     }
 
+    /**
+     * Center map on a given location.
+     * @param {[number, number]} coordinates 
+     */
+    flyTo(coordinates) {
+        this.#map.flyTo({ center: coordinates });
+    }
+
     /**
      *
      * @param {[number, number]} pos
@@ -283,6 +291,10 @@ class MapElement extends HTMLElement {
             // useful to debug the map in the JS console of your browser : access it with "document.getElementsByTagName('d-map')[0].map"
             this.map = mapInstance;
         });
+
+        this.addEventListener('fly', (/** @type {Event} */ event) => {
+            map.flyTo(event.detail.center);
+        });
     }
 
     /**

src/Application/RoadGeocoderInterface.php

@@ -30,4 +30,6 @@ public function findRoadNames(string $search, string $cityCode): array;
     public function findSectionsInArea(string $areaGeometry, array $excludeTypes = [], ?bool $clipToArea = false): string;
 
     public function convertPolygonRoadToLines(string $geometry): string;
+
+    public function findPlacesForMap(string $search): array;
 }

src/Infrastructure/Adapter/BdTopoRoadGeocoder.php

@@ -387,4 +387,9 @@ public function convertPolygonRoadToLines(string $geometry): string
 
         return $row['geom'];
     }
+
+    public function findPlacesForMap(string $search): array
+    {
+        return [];
+    }
 }

src/Infrastructure/Controller/Map/Fragments/MapSearchController.php

@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Infrastructure\Controller\Map\Fragments;
+
+use App\Application\RoadGeocoderInterface;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+use Symfony\Component\Routing\Annotation\Route;
+
+final class MapSearchController
+{
+    public function __construct(
+        private \Twig\Environment $twig,
+        private RoadGeocoderInterface $roadGeocoder,
+    ) {
+    }
+
+    #[Route(
+        '/carte/search',
+        name: 'fragment_carto_search',
+        methods: ['GET'],
+    )]
+    public function __invoke(Request $request): Response
+    {
+        $search = $request->query->get('search');
+
+        if (!$search) {
+            throw new BadRequestHttpException();
+        }
+
+        $results = $this->roadGeocoder->findPlacesForMap($search);
+
+        return new Response(
+            $this->twig->render(
+                name: 'map/fragments/search_results.html.twig',
+                context: [
+                    'results' => $results,
+                ],
+            ),
+        );
+    }
+}

templates/map/_search_form.html.twig

@@ -0,0 +1,40 @@
+<div
+    class="fr-x-autocomplete-wrapper"
+    data-controller="autocomplete"
+    data-autocomplete-url-value="{{ path('fragment_carto_search') }}"
+    data-autocomplete-query-param-value="search"
+    data-autocomplete-min-length-value="3"
+    data-autocomplete-delay-value="500"
+    data-autocomplete-loading-status-value="{{ 'common.autocomplete.status.loading'|trans }}"
+    data-autocomplete-empty-status-value="{{ 'common.autocomplete.status.min_chars'|trans({ '%minChars%': 3 }) }}"
+    data-action="autocomplete.change->reset#reset"
+>
+    <div class="fr-search-bar">
+        <label for="map_search" class="app-sr-only">
+            {{ 'map.search_form.search'|trans }}
+        </label>
+
+        <input
+            id="map_search"
+            name="map_search"
+            type="text"
+            class="fr-input"
+            spellcheck="false"
+            autocomplete="false"
+            data-autocomplete-target="input"
+            placeholder="{{ 'map.search_form.search.placeholder'|trans }}"
+        >
+
+        <button class="fr-btn" aria-label="{{ 'common.form.search'|trans }}">{{ 'common.form.search'|trans }}</button>
+    </div>
+
+    <ul
+        id="map_search-results"
+        role="listbox"
+        aria-label="{{ 'map.search_form.results_label'|trans }}"
+        class="fr-x-autocomplete"
+        data-autocomplete-target="results"
+    >
+        <li role="status" data-autocomplete-target="status"></li>
+    </ul>
+</div>

templates/map/fragments/search_results.html.twig

@@ -0,0 +1,7 @@
+{% for result in results %}
+    <li role="option" data-autocomplete-value="{{ result.coordinates }}">{{ result.label }}</li>
+{% endfor %}
+
+<template id="status">
+    {{ 'common.autocomplete.results_count'|trans({ '%count%': results|length }) }}
+</template>

templates/map/map.html.twig

@@ -14,6 +14,9 @@
         <div class="fr-grid-row fr-x-h-full">
             <div class="fr-col-12 fr-col-sm-4 fr-col-md-3 fr-container fr-pt-2w fr-pb-6w">
                 <h1 class="fr-h4">{{ 'map.title'|trans }} </h1>
+
+                {% include 'map/_search_form.html.twig' with {} only %}
+
                 <h2 class="fr-h6">{{ 'map.filters.title'|trans }}</h2>
 
                 <d-map-form target="map" urlAttribute="dataUrl">

translations/messages.fr.xlf

@@ -2068,6 +2068,14 @@
                 <source>map.loading</source>
                 <target>Chargement de la carte en cours...</target>
             </trans-unit>
+            <trans-unit id="map.search_form.search">
+                <source>map.search_form.search</source>
+                <target>Rechercher un lieu</target>
+            </trans-unit>
+            <trans-unit id="map.search_form.search.placeholder">
+                <source>map.search_form.search.placeholder</source>
+                <target>Rechercher un lieu</target>
+            </trans-unit>
             <trans-unit id="map.filters.title">
                 <source>map.filters.title</source>
                 <target>Filtres</target>