Paramétrage du template “Carte”

Le tem­plate Carte (map) per­met d’in­té­gr­er une carte inter­ac­tive à votre pro­jet et de con­fig­ur­er de nom­breux paramètres.

Vous pou­vez per­son­nalis­er votre fond de carte en util­isant https://mapbox.com
Vous pou­vez définir quelles scènes seront affichées sur la carte et à par­tir de quel niveau de zoom.

Vous pou­vez définir le cen­tre de votre carte, dessin­er un tracé ou un par­cours, ajouter des titres et des icônes pour matéri­alis­er l’emplacement de vos scènes

Vous avez égale­ment la pos­si­bil­ité d’afficher un bou­ton de nav­i­ga­tion dans le coin supérieur gauche et un autre dans le coin supérieur droit, et de définir vers quelles scènes ils ren­voient, le menu ou la carte par exemple.

Vous pou­vez égale­ment affich­er la barre d’ac­tion comme sur le tem­plate “Con­tent”

Lorsque vous cliquez sur l’op­tion “gér­er le con­tenu” de votre scène de type “map”, vous pou­vez paramétr­er ses dif­férents contenus.

Onglet “Map”

Le champ “POI_LIST” vous per­met de définir toutes les scènes que souhaitez faire appa­raître sur votre carte inter­ac­tive. Choi­sis­sez dans le menu déroulant une con­nex­ion exis­tante si vous en avez défi­ni. Si ce n’est pas le cas, cliquez sur “créer une nou­velle con­nex­ion vers une scène” et choi­sis­sez dans le menu déroulant une scène par­mi toutes les scènes de votre projet.

Une fois votre con­nex­ion créée, vous pou­vez en ajouter des nou­velles en cli­quant en haut à droite sur “Ajouter un élé­ment connexion”

Le champ “POI_ICON” vous per­met d’at­tribuer à vos con­nex­ions une image per­son­nal­isée pour les représen­ter sur la carte inter­ac­tive. Choi­sis­sez dans le menu déroulant une image stock­ée dans votre galerie d’image.
La pre­mière image choisie est attribuée à la pre­mière con­nex­ion définie dans le champ “POI_LIST”, la deux­ième image est attribuée à la deux­ième con­nex­ion, et ain­si de suite…

Par défaut, lorsque vous n’at­tribuez pas d’im­ages à vos con­nex­ions, le point d’in­térêt est sig­nifié par un rond de couleur sur votre carte inter­ac­tive. C’est grâce au code CSS que vous pou­vez per­son­nalis­er ce rond (taille, couleur, bordure).

Pour en savoir plus sur la per­son­nal­i­sa­tion des points d’in­térêts grâce au code CSS, con­sul­tez l’ar­ti­cle per­son­nalis­er les mark­ers de la carte.

Le champ “POI_LABEL” vous per­met de per­son­nalis­er le texte de l’en­cadré (ou pop-up) qui s’af­fichera au dessus de votre point d’in­térêt sur la carte interactive.

Vous pou­vez per­son­nalis­er l’aspect des pop-up grâce au code CSS (posi­tion et couleur du texte, couleur de fond et de bor­dure du pop-up…). Pour en savoir plus, con­sul­tez l’ar­ti­cle per­son­nalis­er les pop-up de la carte

NOTE 1 : pour que vos scènes appa­rais­sent sur la carte, il faut leur avoir attribué des coor­don­nées GPS. 
Pour cela, ren­dez-vous dans la liste des scènes et cliquez sur le bou­ton “con­fig­ur­er” attenant à la scène de votre choix. Dans l’on­glet “GEOLOCALISATION” ren­seignez les coor­don­nées (lat­i­tude et lon­gi­tude) de votre scène ain­si que le niveau de zoom à par­tir du quel vous souhaitez qu’elle appa­raisse sur votre carte. Puis validez

NOTE 2 : Pour que le bou­ton de géolo­cal­i­sa­tion appa­raisse sur la carte et per­me­tte à l’u­til­isa­teur de se situer, pensez à vous ren­dre dans l’on­glet “Con­fig­ur­er le pro­jet” et à ajouter “auto­TrackUser­Loca­tion” dans le champ des Réglages personnalisés.

Onglet “MAP_TRACE”

C’est ici que vous allez pou­voir insér­er un tracé sur votre carte interactive.

il faut au préal­able dessin­er ce tracé avec un autre out­il en ligne.
Vous pou­vez par exem­ple utilis­er http://geojson.io/
Le tracé que vous avez dess­iné génère un code (JSON) qu’il faut copi­er et coller dans le Le champ “TRACE_GEOJSON”.

Voici un exem­ple du code tel qu’il faut le copier :

Le champ “TRACE_STYLE” vous per­met de per­son­nalis­er l’aspect de votre tracé, comme la couleur ou l’é­pais­seur du trait.

Ci dessous un exem­ple de code :

Onglet “MAP_SETTINGS”

Cet onglet vous per­met de paramétr­er votre style de carte.

FRIGG utilise l’outil en ligne Map­box qui per­met de créer ou de per­son­nalis­er des styles de carte et de les inté­gr­er dans des sites ou des appli­ca­tions. Vous pour­rez créer gra­tu­ite­ment des styles de carte pour tous vos projets.
Il vous faut créer un compte sur https://www.mapbox.com/

Dans l’on­glet “account” de Map­box vous allez pou­voir récupér­er un code nom­mé token.

C’est ce code que vous devez copi­er et coller dans Le champ “MAP_TOKEN” de FRIGG Stu­dio

Vous pou­vez utilis­er le même token pour tous vos projets.

Dans Le champ “MAP_STYLE” de FRIGG Stu­dio il faut copi­er un code qui cor­re­spond au style de carte que vous souhaitez utilis­er dans votre projet.
Celui-ci sera donc dif­férent pour cha­cun de vos projets.

Pour trou­ver ce code suiv­ez les instruc­tions suivantes :
— Dans Map­box, ren­dez-vous en haut à droite sur l’on­glet “Stu­dio”
— Cliquez sur “New style” et créez votre style de zéro ou à par­tir d’un tem­plate existant.
— Ce style appa­rait main­tenant dans la liste de vos styles
— Cliquez alors sur les trois petits points à droite de votre style pour faire appa­raitre un menu, et copiez la dernière ligne qui com­mence par mapbox://style…

Voici un exem­ple du code tel qu’il faut le copier :

Vous pou­vez per­son­nalis­er votre style de carte dans map­box. Quand vous êtes sat­is­fait, cliquez sur “pub­lish” pour que les mod­i­fi­ca­tions que vous avez apportées soient pris­es en compte dans FRIGG Stu­dio. Il faut par­fois un moment (une heure ou plus) pour que les mod­i­fi­ca­tions appa­rais­sent dans votre pro­jet. Vous pou­vez apporter autant de mod­i­fi­ca­tions que vous le souhaitez. Pensez sim­ple­ment à repub­li­er votre carte pour que le style soit mis à jour.

Dans Le champ “MAP_CENTER” de FRIGG Stu­dio vous devez ren­seign­er les coor­don­nées GPS cor­re­spon­dant au cen­tre de votre carte.
Votre carte s’af­fichera automa­tique­ment à par­tir de ces coor­don­nées sur tous les écrans.
Voici com­ment il faut ren­seign­er ces coordonnées :

Dans Le champ “MAP_ZOOM” de FRIGG Stu­dio vous allez don­ner le niveau de zoom que vous souhaitez attribuer à votre carte lors de son affichage. L’u­til­isa­teur pour­ra l’a­juster par la suite comme sur n’im­porte quelle carte inter­ac­tive, mais cela vous per­me­t­tra d’af­fich­er votre carte et ses POI exacte­ment comme vous le souhaitez lors du charge­ment de la carte.
Les niveaux de zoom vont de 0 à 22, 0 étant le niveau le plus bas qui mon­tre la terre dans sa glob­al­ité, et 22 le niveau le plus ser­ré. Vous pou­vez affin­er votre niveau de zoom avec des réglages inter­mé­di­aires, comme “9.5”.

Voici com­ment vous devez ren­seign­er le niveau de zoom dans FRIGG Stu­dio :

Onglet “GENERAL”

Le champ “Back­ground” vous per­met de choisir une image de fond pour votre scène, par­mi les médias upload­és dans la Galerie de médias.
Si vous ne définis­sez pas d’image, le fond sera blanc.
Dans le cas du tem­plate “Carte” où le fond est occupé par la carte inter­ac­tive, le champ “Back­ground” peut vous servir à paramétr­er la couleur de fond de votre barre d’ac­tion (onglet ACTION_BAR). Si vous souhaitez affich­er un fond de couleur rouge, importez une image rouge de petite taille.
Astuce : Une couleur de fond peut égale­ment être définie dans le CSS per­son­nal­isé du projet.

Onglet “NAVIGATION”

L’on­glet “Nav­i­ga­tion” vous per­met de paramétr­er les bou­tons que vous pou­vez affich­er dans les angles supérieurs de votre scène.
MAIN_NAV indique le bou­ton de nav­i­ga­tion prin­ci­pal, c’est à dire celui qui s’af­fiche en haut à gauche de l’écran.

SECONDARY_NAV indique le bou­ton de nav­i­ga­tion sec­ondaire, c’est à dire celui qui s’af­fiche en haut à droite de l’écran.

Si vous ne ren­seignez aucune infor­ma­tion dans ces champs, les bou­tons n’ap­pa­raitront pas.

Le champ “MAIN_NAV_ICON” vous per­met de définir l’im­age de votre bou­ton de nav­i­ga­tion prin­ci­pal, que vous avez au préal­able inté­gré dans votre galerie de médias.
Le champ “MAIN_NAV_LINK” vous per­met de définir vers quelle scène ce bou­ton enver­ra l’u­til­isa­teur. Vous avez 3 pos­si­bil­ités pour définir cette connexion :
1- Vous pou­vez ain­si choisir par­mi les con­nex­ions exis­tantes, c’est à dire qui ont déjà été attribuées à cette scène.
2- Vous pou­vez créer une nou­velle con­nex­ion, en choi­sis­sant une scène par­mi toutes celles que vous avez créée dans votre projet.
3- Vous pou­vez créer une con­nex­ion de nav­i­ga­tion, c’est à dire ren­voy­er automa­tique­ment vers la pre­mière scène du pro­jet, ou vers la scène qui a été vis­itée précédem­ment par l’utilisateur.

Vous pou­vez répéter les mêmes réglages pour les champs “SECONDARY_NAV_ICON” et “SECONDARY_NAV_LINK”
Notez que le bou­ton de nav­i­ga­tion sec­ondaire sera rarement util­isé sur le tem­plate “carte”, car il masque le bou­ton de géolo­cal­i­sa­tion inté­gré à la carte interactive.

Onglet “ACTION_BAR”

Cet onglet per­met de paramétr­er la barre d’ac­tions que vous pou­vez affich­er en bas de votre scène de type “Carte”.
Il s’ag­it d’un ban­deau hor­i­zon­tal qui peut com­porter un ou plusieurs boutons.
La couleur de fond de cette barre d’ac­tions peut se paramétr­er dans l’on­glet “GENERAL” de la scène

Le champ “ITEMS_IMAGE” vous per­met de définir les icônes de vos bou­tons par­mi les images préal­able­ment importées dans la galerie de médias.

Le champ “ITEMS_LINK” vous per­met de définir vers quelles scène vont ren­voy­er cha­cune de vos icônes.

Onglet “SPECIAL”

Vous pou­vez ici attribuer des datas per­son­nal­isées (CUSTOM_DATA)  à votre scène.
pour en savoir plus sur les CUSTOM_DATA lisez l’article  per­son­nalis­er mon pro­jet grâce au CSS