Skip to main content

Lorsque vous créez une scène avec le tem­plate “Carte”, vous inté­grez une carte inter­ac­tive dans votre projet.
L’u­til­isa­teur va pou­voir se déplac­er dans cette carte et il y sera géolocalisé.
Vous allez pou­voir matéri­alis­er des Points d’In­térêt sur votre carte qui ren­voient vers d’autres scènes de votre projet.
Pour chaque Point d’In­térêt, vous pou­vez définir un “mark­er”, c’est à dire un point ou une image, ain­si qu’un “pop-up”, c’est à dire une légende insérée dans un cadre.

Vous pou­vez per­son­nalis­er l’ap­parence de ces mark­ers et de ces pop-up pour qu’ils répon­dent à la charte graphique de votre projet.

Nous allons voir ici com­ment per­son­nalis­er les pop-up.
Pour la per­son­nal­i­sa­tion des mark­ers, con­sul­tez l’article per­son­nalis­er les mark­ers de la carte.

Personnalisation des Pop-up

Les légen­des qui s’af­fichent dans vos Pop-up se définis­sent dans votre scène “Carte”, dans le champ “POI_LABEL” de l’on­glet “MAP”.

Par défaut, voici com­ment ils s’af­fichent sur la carte :

Pour per­son­nalis­er vos Pop-up, ren­dez-vous dans l’on­glet “Con­fig­ur­er le pro­jet” de votre pro­jet et ajoutez du code dans le champ “CSS personnalisé”.

Vous allez pou­voir définir des styles en fonc­tion du niveau de zoom d’af­fichage de vos scènes.

Par exem­ple, 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 à par­tir duquel une scène s’af­fiche sur la carte se définit dans l’on­glet “con­fig­ur­er” de chaque scène. Si vous n’en­trez aucune valeur dans le champ “niveau de zoom”, votre scène s’af­fichera tout le temps.

/* couleur des pop­up de la carte*/

.tpl_map .map-popup.map-level‑1 {
back­ground-col­or : rgba(133,190,249,0.9);
}

“Rgba” sig­ni­fie Red, Green, Blue, Alpha. Ces valeurs ser­vent à définir la couleur et la couche alpha (trans­parence). Les trois pre­mières valeurs rgba cor­re­spon­dent ici au code de cette couleur bleue, la valeur “0.9” cor­re­spond au niveau de trans­parence de votre encadré. Cette valeur doit être com­prise entre 0 et 1.

Voici à quoi vos Pop-up ressem­bleront avec ce code :

pour mod­i­fi­er la bor­dure, il faut ajouter une ligne de code :

/* couleur des pop­up de la carte*/

.tpl_map .map-popup.map-level‑1 {
back­ground-col­or : rgba(133,190,249,0.9);
bor­der-col­or : rgba(76,76,76,1);
}

Et vous pou­vez ajouter une autre ligne pour inter­venir sur la couleur du texte :

/* couleur des pop­up de la carte*/

.tpl_map .map-popup.map-level‑1 {
back­ground-col­or : rgba(133,190,249,0.9);
bor­der-col­or : rgba(76,76,76,1);
color:rgba(76,76,76,1);
}

Voici à quoi ressem­bleront alors vos Pop-up :

Vous allez égale­ment pou­voir agir sur la façon dont votre texte s’af­fiche dans l’en­cadré. Celui-ci a une largeur en pix­el définie par défaut, et des textes longs revi­en­nent automa­tique­ment à la ligne.
Si vous souhaitez que l’en­cadré s’adapte à la longueur de votre texte et agir sur la dis­tance entre le texte et le bord de l’en­cadré, voici le code qu’il faut intégrer :

/* couleur des pop­up de la carte*/

.tpl_map .map-popup.map-level‑1 {
back­ground-col­or : rgba(133,190,249,0.9);
bor­der-col­or : rgba(76,76,76,1);
color:rgba(76,76,76,1);
}

/* affichage du texte dans les pop-up*/

.tpl_map .map-pop­up {
width: auto;
padding-right: 30px;
padding-left: 30px;
}

Voici à quoi ressem­bleront alors vos Pop-up :

En jouant sur les dif­férents niveau de zoom, vous allez ain­si pou­voir per­son­nalis­er vos pop-up avec une cer­taine finesse :

/* couleur des pop­up niveau 1 de la carte*/
.tpl_map .map-popup.map-level‑1 {
back­ground-col­or : rgba(133,190,249,0.9);
bor­der-col­or : 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-pop­up {
width: auto;
padding-right: 15px;
padding-left: 15px;
}

/* couleur des pop­up niveau 13 de la carte*/
.tpl_map .map-popup.map-level-13 {
back­ground-col­or : rgba(239,105,4,0.9);
bor­der-col­or : rgba(76,76,76,1);
bor­der-width : 3px;
color:rgba(76,76,76,1);
}

Voilà le résul­tat que vous pou­vez obtenir :