Carte interactive
La carte interactive est une manière innovante de visualiser des données et d'interagir avec des informations géographiques.
Les différents types de carte interactive
Derrière le terme de "carte interactive" se trouve plusieurs types de carte et d'effets. Voici quelques exemples de carte et la manière de les réaliser avec PandaSuite :
- Créer une carte zoomable : permettre aux utilisateurs de zoomer et de se déplacer sur une carte pour découvrir des contenus additionnels.
- Présenter des lieux d'intérêt GPS : utiliser un fond de carte pour placer des points d'intérêt basés sur leurs coordonnées GPS.
- Créer une carte sur-mesure : créer des cartes interactives personnalisées en utilisant des images / SVG et des animations.
Chacune de ces méthodes offre des avantages spécifiques et peut être choisie en fonction des besoins de votre projet. PandaSuite se distingue par sa flexibilité et sa capacité à créer des expériences interactives riches sans nécessiter de compétences en codage.
Créer une carte zoomable
Si vous souhaitez que vos utilisateurs puissent zoomer et naviguer dans la carte pour découvrir des contenus additionnels (textes, images, vidéos, liens) au clic, cette méthode est pour vous !
Pour créer ce type de carte interactive :
- Insérez un composant Zoomable
- A l'intérieur du composant Zoomable, ajoutez une image de fond et assurez-vous qu'elle prenne la totalité du composant.
- Vous pouvez ajouter vos boutons interactifs (hotspots) qui, lorsqu'ils sont cliqués, affichent des informations supplémentaires dans des fenêtres pop-up ou des popovers, permettant ainsi de maintenir un aspect visuel propre.
Pour en savoir plus : le composant Zoomable
Présenter des lieux d'intérêt GPS
Lorsque vous réalisez une visite touristique ou culturelle, il peut être intéressant d'utiliser un fond de carte (Google Maps, OpenStreetMap ou Mapbox) et de placer dessus les points d'intérêt en fonction de leurs coordonnées GPS.
Pour créer ce type de carte interactive :
- Insérez un composant Carte
- Choisissez votre fournisseur de cartographie : Google Maps, OpenStreetMap ou Mapbox
- Ajoutez des marqueurs pour signaler des points d'intérêt spécifiques. Vous pouvez personnaliser l'icône, la taille, la position et le texte contextuel à afficher en pop-over
- Ces marqueurs peuvent être générés dynamiquement depuis une source de données.
Pour en savoir plus : le composant Carte
Créer une carte sur-mesure avec les états
PandaSuite permet de créer des cartes interactives hautement personnalisées.
Cette méthode tire parti des états pour générer des effets de zoom et des animations séquentielles pour offrir une expérience utilisateur riche et engageante. Cette technique est particulièrement utile pour des projets nécessitant un niveau élevé personnalisation visuelle.
L' importation de fichiers SVG depuis des outils comme Illustrator est prise en charge, facilitant ainsi l'intégration de designs complexes et la réalisation d'animations sur mesure. .
Voici une vidéo (un peu ancienne) sur comment créer votre propre carte interactive personnalisée en utilisant des SVG.
Ajouter des pop-ups ou des popovers
Voici un tutoriel qui vous explique comment faire :