Filtre interactif, cartographie et calcul d'itinéraires vélo sur un site touristique à fort trafic
Scores de cette page :
EcoIndex A
SEO 100%
Accessibilité 100%
Performance 100%
Bonnes Pratiques 100%
Intervention en sous-traitance sur le site touristique officiel de la Camargue (données Apidae) : filtre de recherche avancé sans rechargement de page, cartographie interactive (grande carte dédiée et petites cartes sur les pages de catégorie), et calcul automatique des temps de trajet à vélo depuis les villes de la destination.
Contexte : renfort spécialisé sur un site déjà existant
Destination Camargue est le site touristique officiel du Parc naturel régional de Camargue, avec un très gros volume de contenu — hébergements, restaurants, loisirs, événements, producteurs locaux — alimenté par l'API touristique Apidae. Intervention en sous-traitance / renfort d'équipe, sur un périmètre précis : ni le design, ni l'architecture globale du site, ni son intégration WordPress ne relèvent de ce travail. Trois fonctionnalités précises ont été développées et intégrées à un thème déjà en place : le filtre interactif, la cartographie (grande carte dédiée et petites cartes sur les pages de catégorie), et le calcul de temps de trajet à vélo.
Un filtre qui met à jour les résultats sans recharger la page
Sur les nombreuses pages de catégorie du site (hébergements, restaurants, loisirs...), un bouton « Filtrer » ouvre une fenêtre de recherche avancée : villes, classement, labels, guides, accessibilité, mots-clés. Chaque critère coché met à jour en direct le nombre de résultats affiché en bas de la fenêtre — ici, de 58 à 24 résultats après sélection du classement 3 étoiles — sans recharger la page ni attendre une réponse serveur. Les filtres actifs restent lisibles dans l'URL, ce qui permet de revenir en arrière ou de partager un lien avec une recherche déjà filtrée : à la réouverture de la fenêtre, les critères précédemment choisis sont visuellement présélectionnés.
Concrètement, le comptage se met à jour à chaque case cochée, sans étape de validation intermédiaire :
Une carte interactive dédiée pour toute la destination
Une page carte à part entière affiche l'ensemble des points d'intérêt du site, organisés par grandes catégories dans un menu à cocher sur le côté. Chaque catégorie peut se déplier pour affiner par sous-type — ici, un clic sur « Restaurants » révèle les sous-catégories (pause gourmande, petite restauration, restaurants), et cocher une sous-catégorie masque instantanément tous les marqueurs qui ne correspondent pas, sans recharger la carte ni recharger la page. Le nombre entre parenthèses à côté de chaque catégorie reste à jour en permanence.
Sélectionner une sous-catégorie filtre les marqueurs affichés en conséquence :
Au survol d'un marqueur, le nom de l'établissement apparaît ; au clic, une fiche détaillée s'ouvre avec photo, catégorie et ville — et un clic sur le nom de l'établissement dans cette fiche mène directement à sa page complète.
Une carte compacte sur chaque page de catégorie
En complément de la grande carte dédiée, une version compacte de la même logique de carte apparaît directement sur les nombreuses pages de catégorie du site (par exemple la liste des hôtels), à côté du listing textuel. Règle volontaire différente de celle du filtre de la liste : cette petite carte affiche toujours l'intégralité des résultats possibles, indépendamment du filtre texte appliqué à la liste à côté — les deux zones (liste filtrable, carte non filtrée) fonctionnent en parallèle plutôt que d'être strictement synchronisées.
Le même mécanisme de fiche au clic s'applique sur cette carte compacte :
Calculer son temps de trajet à vélo jusqu'à chaque établissement
Sur la fiche de chaque hébergement, restaurant ou activité disposant de coordonnées GPS, un bloc dédié affiche le temps de trajet à vélo depuis quatre villes de référence de la destination (Arles, Saintes-Maries-de-la-Mer, Port-Saint-Louis, Les Salins-de-Giraud), avec un bouton qui ouvre directement Google Maps en mode itinéraire vélo, position de départ et destination déjà renseignées.
Le bouton mène directement à un itinéraire cyclable pré-rempli, sans que l'utilisateur ait à ressaisir l'adresse de destination :
Ces temps de trajet ne sont pas recalculés à chaque affichage de la page : ils sont calculés une seule fois via l'API Google Maps (mode déplacement à vélo, en évitant autoroutes et péages), puis stockés dans des champs cachés propres à chaque fiche. Un recalcul n'est déclenché que si les coordonnées du point d'intérêt changent ou n'ont encore jamais été calculées — pour ne pas multiplier inutilement les appels à une API externe à chaque visite.
Documenter sa propre contribution dans un projet collectif
Travail livré en Git, comme demandé par l'équipe — mais la personne en charge de l'intégration générale du site n'était pas à l'aise avec cet outil. Plutôt que de livrer du code sans accompagnement, une documentation dédiée a été rédigée directement dans le readme du projet, pour que n'importe qui reprenne le travail un jour sans avoir à tout redécouvrir seul : pour chaque fonctionnalité livrée (filtre interactif, cartographie, calcul des temps de trajet à vélo), la liste précise des fichiers créés ou modifiés, et le fonctionnement du code expliqué étape par étape, fichier par fichier — jusqu'au détail des cas particuliers à respecter (par exemple, la carte compacte des pages de catégorie qui doit volontairement afficher tous les résultats sans tenir compte du filtre actif sur la liste à côté).
Note
Le reste du site (design, architecture générale, poids des pages) est hors de ce périmètre d'intervention — le rôle sur ce projet se limitait aux trois fonctionnalités décrites ci-dessus, livrées comme composants autonomes à intégrer dans un thème existant.