Marqueurs et grappes
Des lieux sur une carte : couleur et icône tirées de leur type, le regroupement quand ils sont nombreux, la bulle qui les décrit et la recherche embarquée.
Les marqueurs suivent le type du lieu
Couleur et icône viennent du sous-type que le back envoie déjà — Warehouse, CustomerSite, Office — et non d'un choix fait à la main dans la vue.
Les tailles de marqueur
Les cinq tailles de la maison, sur une même latitude.
Une collection, et son regroupement
240 sites répartis autour de trois foyers. « MapMarkers » reçoit les charges utiles brutes et appelle l'adaptateur lui-même.
Cliquez une bulle pour l'ouvrir, un marqueur pour le sélectionner.
Éteint, les 240 marqueurs sont dessinés d'un coup — c'est la limite du rendu DOM, et elle se voit. Allumé, le regroupement suit le zoom.
Sans palette, toutes les bulles portent le même jeton et seule la taille dit « plus ». Avec, la rampe est séquentielle : trois teintes pour trois paliers, donc une bulle plus grosse n'est jamais plus pâle. Le texte est calculé par contraste — une rampe rend des hex, pas des jetons, et un hex n'a pas de « -content » sur lequel s'appuyer.
Ce que le regroupement ne fait pas
Les mêmes six sites qu'en haut, passés par MapMarkers sans « cluster » : la collection sert aussi quand il n'y a rien à regrouper.
La bulle, et ce qu'on peut mettre dedans
Une bulle est ancrée à des coordonnées, pas à un élément : elle reste collée à son lieu quand la carte bouge. Elle répond à « qu'est-ce que ce point » ; pour « je veux travailler dessus », un Modal ouvert depuis onClick marche déjà, sans rien de neuf.
Une seule bulle à la fois, et l'intérieur est libre — ici une Card avec un bouton. « offset » prend une distance, et la bulle s'écarte du point quel que soit le côté par lequel elle s'accroche. En basculant le thème, le fond et la petite pointe suivent.
Chercher depuis la carte
Un champ de recherche posé dans un contrôle de la carte. Le géocodeur est une fonction qu'on lui donne : ici la Base Adresse Nationale, mais le même composant chercherait dans n'importe quelle source rendant des Place.
En ligne — carte large
En modal — carte courte
Le cadre de carte coupe ce qui dépasse : sur la carte courte, la liste de suggestions serait tronquée en bas. Le modal s'ouvre dans la couche supérieure du navigateur, qu'aucun overflow ne rogne — c'est pour ça qu'il existe.