Lorsque vous créez une scène avec le template “Carte”, vous intégrez une carte interactive dans votre projet.
L’utilisateur va pouvoir se déplacer dans cette carte et il y sera géolocalisé.
Vous allez pouvoir matérialiser des Points d’Intérêt sur votre carte qui renvoient vers d’autres scènes de votre projet.
Pour chaque Point d’Intérêt, vous pouvez définir un “marker”, c’est à dire un point ou une image, ainsi qu’un “pop-up”, c’est à dire une légende insérée dans un cadre.
Vous pouvez personnaliser l’apparence de ces markers et de ces pop-up pour qu’ils répondent à la charte graphique de votre projet.
Nous allons voir ici comment personnaliser les pop-up.
Pour la personnalisation des markers, consultez l’article personnaliser les markers de la carte.
Personnalisation des Pop-up
Les légendes qui s’affichent dans vos Pop-up se définissent dans votre scène “Carte”, dans le champ “POI_LABEL” de l’onglet “MAP”.
Par défaut, voici comment ils s’affichent sur la carte :
Pour personnaliser vos Pop-up, rendez-vous dans l’onglet “Configurer le projet” de votre projet et ajoutez du code dans le champ “CSS personnalisé”.
Vous allez pouvoir définir des styles en fonction du niveau de zoom d’affichage de vos scènes.
Par exemple, pour que tous les Pop-up de niveau de zoom 1 aient un encadré de couleur bleue, vous allez ajouter le code suivant :
Note : le niveau de zoom à partir duquel une scène s’affiche sur la carte se définit dans l’onglet “configurer” de chaque scène. Si vous n’entrez aucune valeur dans le champ “niveau de zoom”, votre scène s’affichera tout le temps.
/* couleur des popup de la carte*/
.tpl_map .map-popup.map-level‑1 {
background-color : rgba(133,190,249,0.9);
}
“Rgba” signifie Red, Green, Blue, Alpha. Ces valeurs servent à définir la couleur et la couche alpha (transparence). Les trois premières valeurs rgba correspondent ici au code de cette couleur bleue, la valeur “0.9” correspond au niveau de transparence de votre encadré. Cette valeur doit être comprise entre 0 et 1.
Voici à quoi vos Pop-up ressembleront avec ce code :
pour modifier la bordure, il faut ajouter une ligne de code :
/* couleur des popup de la carte*/
.tpl_map .map-popup.map-level‑1 {
background-color : rgba(133,190,249,0.9);
border-color : rgba(76,76,76,1);
}
Et vous pouvez ajouter une autre ligne pour intervenir sur la couleur du texte :
/* couleur des popup de la carte*/
.tpl_map .map-popup.map-level‑1 {
background-color : rgba(133,190,249,0.9);
border-color : rgba(76,76,76,1);
color:rgba(76,76,76,1);
}
Voici à quoi ressembleront alors vos Pop-up :
Vous allez également pouvoir agir sur la façon dont votre texte s’affiche dans l’encadré. Celui-ci a une largeur en pixel définie par défaut, et des textes longs reviennent automatiquement à la ligne.
Si vous souhaitez que l’encadré s’adapte à la longueur de votre texte et agir sur la distance entre le texte et le bord de l’encadré, voici le code qu’il faut intégrer :
/* couleur des popup de la carte*/
.tpl_map .map-popup.map-level‑1 {
background-color : rgba(133,190,249,0.9);
border-color : rgba(76,76,76,1);
color:rgba(76,76,76,1);
}
/* affichage du texte dans les pop-up*/
.tpl_map .map-popup {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
Voici à quoi ressembleront alors vos Pop-up :
En jouant sur les différents niveau de zoom, vous allez ainsi pouvoir personnaliser vos pop-up avec une certaine finesse :
/* couleur des popup niveau 1 de la carte*/
.tpl_map .map-popup.map-level‑1 {
background-color : rgba(133,190,249,0.9);
border-color : rgba(76,76,76,1);
color:rgba(76,76,76,1);
font-size: 14px;
line-height:1.2;
}
/* affichage du texte dans les pop-up*/
.tpl_map .map-popup {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
/* couleur des popup niveau 13 de la carte*/
.tpl_map .map-popup.map-level-13 {
background-color : rgba(239,105,4,0.9);
border-color : rgba(76,76,76,1);
border-width : 3px;
color:rgba(76,76,76,1);
}
Voilà le résultat que vous pouvez obtenir :