Une carte d'un lieu, pas juste une carte

Le web fait tourner Leaflet sur n'importe quel serveur de tuiles raster — pas de clé d'API, pas de facturation, pas de poids de SDK propriétaire. Le natif fait tourner react-native-maps plus expo-location, sur le fournisseur de cartes de la plateforme en dessous.

Tuiles thématisées. Les tuiles OSM par défaut sont uniquement claires et visuellement bruyantes — elles se battent avec un système de design. Les serveurs de tuiles CARTO (voyager pour le clair, dark_matter pour le sombre) sont gratuits, sourds, et se placent sous les couleurs de marque au lieu de rivaliser avec elles. Change l'URL de tuile quand la classe de mode sombre bascule et la carte est thématisée en deux URL, aucune chaîne de style personnalisée.

Pins signature. Le divIcon de Leaflet accepte du HTML/SVG arbitraire, donc un pin peut être la géométrie propre du produit — codé par teinte selon la catégorie — au lieu de la goutte par défaut. Ça vaut la peine de concevoir trois états : entrée de dépôt (agrandissement avec dépassement, échelonné pour que la carte se construise visiblement), sélectionné (échelle plus un anneau), et groupé (un décompte dans le pin). L'échelonnement réutilise les mêmes tokens de mouvement que le reste de l'application — la carte est un écran, pas un embed.

Verrouille-la à la région. maxBounds plus une plage de zoom min/max. Ça transforme « une carte » en « une carte de ce lieu précis » — les utilisateurs ne peuvent pas faire défiler jusqu'à l'Atlantique, les tuiles hors de la région ne se chargent jamais, et ça se lit comme délibéré plutôt que générique.

Performance. Charge le chunk de carte paresseusement avec React.lazy — Leaflet est lourd et ne peut pas rester dans le chemin critique du bundle d'accueil. Rends un placeholder de silhouette léger jusqu'à l'hydratation. Garde le LCP sur le titre en surimpression, pas sur les tuiles. Étale le montage des marqueurs au-delà d'environ une centaine de pins ; l'entrée échelonnée fait aussi office de limiteur de montage.

La permission de géolocalisation est la différence entre le plaisir et l'hostilité. Ne la demande jamais au chargement — seulement sur un tap explicite d'une affordance clairement étiquetée. Le refus et le timeout sont silencieux, retombant sur le centre régional par défaut sans toast et sans re-demande ; la fonctionnalité est une amélioration, pas une exigence. À l'accord, fais immédiatement quelque chose de visiblement digne de la permission — fais voler la caméra, montre un marqueur de position qui pulse, fais surgir un fait dérivé comme « 6 emplacements à moins de 5 km » — pour que la récompense justifie la demande rétroactivement.

La méta-leçon : les deux stacks de carte étaient déjà installées et livrées avant la refonte — Leaflet caché derrière un interrupteur secondaire sur le web, react-native-maps entièrement inutilisé sur l'écran d'accueil mobile. La fonctionnalité d'accueil « nouvelle » phare était surtout la promotion d'une capacité existante et enterrée. Audite les dépendances installées contre les écrans rendus avant d'écrire quoi que ce soit de nouveau.