UI Kit - Cartes Interactives Travelski

Variantes de Tailles de Carte

📏 Tailles Disponibles

Variante	Classe CSS	Hauteur Desktop	Hauteur Mobile	Usage Recommandé
Extra Small	`map-container--xs`	180px	120px → 100px	Aperçu, vignette
Small	`map-container--sm`	240px	160px → 140px	Carte compacte, sidebar
Medium	par défaut ou `map-container--md`	300px	200px → 180px	Usage standard
Large	`map-container--lg`	400px	240px → 220px	Section importante
Extra Large	`map-container--xl`	500px	280px → 260px	Page dédiée, hero

🔍 Extra Small (XS) - Aperçu

Carte Extra Small (180px)

Parfait pour les vignettes et aperçus rapides.

<div class="map-container map-container--xs"> <div id="map"></div> </div>

📱 Small (SM) - Compact

Carte Small (240px)

Idéal pour les barres latérales et espaces restreints.

<div class="map-container map-container--sm"> <div id="map"></div> </div>

🖥️ Medium (MD) - Standard

Carte Medium (300px) - Taille par défaut

Taille par défaut, équilibre parfait pour la plupart des usages.

<div class="map-container"> <div id="map"></div> </div>  <div class="map-container map-container--md"> <div id="map"></div> </div>

🗺️ Large (LG) - Étendue

Carte Large (400px)

Pour les sections importantes où la carte est l'élément principal.

<div class="map-container map-container--lg"> <div id="map"></div> </div>

🌍 Extra Large (XL) - Immersive

Carte Extra Large (500px)

Pour les pages dédiées et les expériences immersives.

<div class="map-container map-container--xl"> <div id="map"></div> </div>

💡 Guide d'Utilisation

🔍 Extra Small (XS)

Vignettes de propriétés
Aperçu dans les listes
Widgets de tableau de bord

📱 Small (SM)

Sidebar de réservation
Cartes compactes
Mobile en paysage

🖥️ Medium (MD)

Pages de réservation
Sections de contenu
Usage général

🗺️ Large (LG)

Pages de détail
Sections importantes
Desktop grand écran

🌍 Extra Large (XL)

Pages dédiées
Expérience immersive
Hero sections

🏠 Exemple Complet avec Informations

Carte avec informations de localisation (Large)

Carte avec informations de localisation complètes.

🏠

Résidence Les Chalets & Balcons de la Vanoise

Rue du Prã
73500 Villarodin-Bourget, France

Voir dans Google Maps

<div class="map-container map-container--lg"> <div id="map"></div> </div> <div class="location-info"> <div class="location-pin">🏠</div> <div class="location-details"> <div class="location-name">Résidence Les Chalets & Balcons de la Vanoise</div> <div class="location-address"> <strong>Rue du Prã</strong><br> 73500 Villarodin-Bourget, France </div> <a href="https://maps.google.com/?q=45.2197,6.7564" class="location-link"> Voir dans Google Maps </a> </div> </div>

Notes d'Utilisation

🗺️ Fonctionnalités

5 tailles prédéfinies : XS, SM, MD, LG, XL avec !important
Responsive automatique : Adaptation selon la taille d'écran
Carte interactive : Zoom, déplacement, popups
Marqueur résidence : Icône maison verte distinctive
Points d'intérêt : Services locaux avec icônes personnalisées
API flexible : Configuration et contrôles avancés

✅ Bonnes Pratiques

Utilisez map-container map-container--xs pour les deux classes
Choisissez la taille selon le contexte d'usage
Testez sur mobile pour vérifier l'adaptation
Incluez toujours Leaflet CSS et JS avant le composant carte
Utilisez un ID unique pour le conteneur de carte
Gérez les états de chargement et d'erreur
Ajoutez des aria-label pour l'accessibilité

🚫 À Éviter

Ne pas oublier d'inclure les dépendances Leaflet
Ne pas utiliser des coordonnées par défaut en production
Ne pas combiner plusieurs classes de taille
Ne pas créer plusieurs instances sur le même conteneur
Ne pas oublier les attributs alt sur les icônes