Feature #17
closedAjouter une vue carte interactive pour visualiser les offres géolocalisées
95%
conversation:11
Description
### Problème
Actuellement, les candidats ne peuvent visualiser les offres que sous forme de liste. Cela ne permet pas d’avoir une **vision géographique** des opportunités, ce qui est particulièrement utile pour identifier les zones avec une forte concentration d’offres (ex : télétravail, villes spécifiques) ou pour évaluer les déplacements possibles.
### Contexte
- L’application dispose déjà des **coordonnées GPS** (latitude/longitude) pour la majorité des offres.
- Les filtres existants (salaire, stack, télétravail, etc.) doivent s’appliquer aussi à la carte pour affiner les résultats.
- Sur mobile, l’espace est limité : la carte doit être prioritaire, avec un accès rapide à la liste via un toggle.
- Sur desktop, une **sidebar compacte** à droite doit afficher les offres visibles sur la carte pour une navigation fluide.
### Comportement proposé
- **Toggle liste/carte** : Bouton en haut de l’écran pour basculer entre la vue liste et la vue carte.
- **Carte interactive** :
- Épingles avec **icônes personnalisées** pour indiquer le salaire (💰), le télétravail (🏠), ou le présentiel (🏢).
- **Regroupement des épingles** : Si plusieurs offres sont proches, afficher une seule épingle avec un nombre (ex : "5"). Un clic dézoome pour séparer les épingles.
- **Info-bulle** : Au survol/clic sur une épingle, afficher un résumé (titre, entreprise, salaire, type de contrat) + bouton "Voir détails".
- **Sidebar (desktop)** : Liste compacte des offres visibles sur la carte, synchronisée avec les filtres. Un clic sur une offre centre la carte sur son épingle.
- **Filtres** : Appliqués en temps réel à la carte (les épingles non filtrées disparaissent). La carte ne zoome pas automatiquement.
- **Offres sans localisation précise** : Placer les offres "Remote Europe" au centre de l’Europe avec une étiquette "Remote". Ignorer les offres sans coordonnées GPS sur la carte.
- **Performance** : Limiter à 200 épingles max affichées simultanément. Afficher un message si trop d’offres correspondent aux filtres.
## Acceptance criteria
- [ ] **Toggle liste/carte** : Bouton fonctionnel sur mobile et desktop pour basculer entre les deux vues.
- [ ] **Carte interactive** :
- [ ] Affichage des épingles avec icônes (💰/🏠/🏢) selon les critères (salaire/télétravail/présentiel).
- [ ] Regroupement des épingles proches (ex : "5 offres à Paris") et dézoom automatique au clic.
- [ ] Info-bulle au survol/clic avec résumé de l’offre + bouton "Voir détails".
- [ ] **Sidebar (desktop)** :
- [ ] Liste compacte des offres visibles sur la carte, synchronisée avec les filtres.
- [ ] Clic sur une offre centre la carte sur son épingle et ouvre l’info-bulle.
- [ ] **Filtres** : Appliqués en temps réel à la carte (les épingles non filtrées disparaissent).
- [ ] **Gestion des offres sans localisation** :
- [ ] Offres "Remote Europe" placées au centre de l’Europe avec étiquette "Remote".
- [ ] Offres sans coordonnées GPS ignorées sur la carte (mais visibles en vue liste).
- [ ] **Performance** : Limite de 200 épingles max affichées. Message d’avertissement si trop d’offres correspondent aux filtres.
- [ ] **Responsive** :
- [ ] Mobile : Carte en plein écran, liste masquée (accessible via toggle).
- [ ] Desktop : Carte à gauche (2/3) + sidebar à droite (1/3).
- [ ] **Tests** : Vérifier le comportement avec des filtres extrêmes (ex : "Remote 100%" ou "Salaire > 100k€").
- [ ] **Documentation** : Mettre à jour le guide utilisateur pour expliquer la nouvelle vue carte et ses fonctionnalités.
Files
