Lorsque vous créez une scène avec le tem­plate “Carte”, vous inté­grez une carte inter­ac­tive dans votre pro­jet.
L’u­til­isa­teur va pou­voir se déplac­er dans cette carte et il y sera géolo­cal­isé.
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 pro­jet.
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 pro­jet.

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

Personnalisation des Markers

Par défaut les mark­ers sont des ronds blancs avec une légère trans­parence et dont la taille s’a­juste en fonc­tion du niveau de zoom attribué à vos scènes.
Voici com­ment ils s’af­fichent si vous ne faites aucun réglage :

Vous allez pou­voir les per­son­nalis­er en util­isant le code CSS. Vous pou­vez agir sur leur taille, leur couleur et leur degré de trans­parence, et appli­quer ces réglages en fonc­tion du niveau de zoom que vous avez attribué à vos scènes.

Pour per­son­nalis­er vos Mark­ers, 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 per­son­nal­isé”.

Ci-dessous un exem­ple de code pour agir sur tous les Mark­ers des scènes de niveau de zoom 1 :

/* couleur des mark­ers de la carte de niveau 1*/

.tpl_map .map-marker.map-level‑1.withoutImage {
back­ground-col­or : rgba(239,223,24,1);
width:50px;
height:50px;
}

Visu­alisez ci-dessous le résul­tat avec ces réglages :

Plutôt que d’in­ter­venir sur le code CSS, vous pou­vez aus­si attribuer à chaque mark­er une image que vous avez au préal­able dans votre galerie de médias. priv­ilégiez des images vec­torisées au for­mat .svg pour qu’elles s’af­fichent tou­jours cor­recte­ment quelle que soit la réso­lu­tion d’écran de l’u­til­isa­teur.

Cliquez sur le bou­ton “gér­er le con­tenu” de votre scène de type Carte, et dans l’on­glet “MAP” vous allez pou­voir définir une image pour cha­cune de vos scènes grâce au champ “POI_ICON”.
Dans ce cas, le code CSS vous per­met tou­jours d’a­juster la taille de votre image en fonc­tion du niveau de zoom.
un exem­ple ci-dessous :