Personnaliser les pop-up de la carte

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.

“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 :

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

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 :

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 :

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