Le noeud Mapbox vous permet d'afficher votre propre carte géographique avec différentes visualisations: mode clair, sombre, plan, espace vert, satellites ainsi que d'accéder à des fonctionnalités de navigation.

Components

Configuration

Token d'accès

Pour mettre en place la carte, il faut rentrer un access token. Vous pouvez en avoir un gratuitement sur le site Mapbox, en vous créant un compte vous aurez un lien disponible.

Mapbox

Vous pouvez ensuite configurer la vision de la carte dans Mapbox.

Apparence

Vous pouvez choisir entre différents types d'apparence : rues, extérieurs, clair, sombre, satellite, satellite et rues, navigation de jour, navigation de nuit.

Longitude

Vous pouvez déterminer une longitude.

Latitude

Vous pouvez déterminer une latitude.

Zoom

Vous pouvez zoomer et dézoomer sur la carte.

Repères

Vous pouvez ajouter des repères sur la carte, e.g. une repère ici à Notre-Dame de Paris. Vous pouvez déterminer sa latitude, sa longitude, puis l'image du repère et enfin sa taille.

GPS

Activer tracking

Vous pouvez activer un traceur GPS sur la carte.

Haute précision

Vous pouvez déterminer la précision du traceur GPS.

Style

Le style gère les propriétés visuelles générales appliquées à ce nœud.

Fond

Contrôlez l'arrière-plan (image, couleur ou gradient) du nœud.

Opacité

Contrôle l'opacité du nœud.

Arrondi

Contrôle le rayon de l'arrondi des coins de extérieurs du nœud. Vous pouvez définir le rayon pour tous les coins (haut gauche, haut droit, bas gauche, bas droit) ou pour chacun d'entre eux individuellement.

Bordure

Contrôle la forme, la couleur et l'épaisseur de la bordure du nœud.

épaisseur : l'épaisseur de la bordure. Vous pouvez définir l'épaisseur pour toutes les bordures (haut, gauche, droite, bas) ou pour chacune d'entre elles individuellement.
Forme : le style de la bordure.
Couleur : la couleur de la bordure.

Ombres

Permet d'ajouter une ou plusieurs ombres à un nœud. Chaque ombre est définie par :

type : si l'ombre est intérieure ou extérieure à la boîte du noeud.
x: spécifie la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément.
y : spécifie la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément.
flou : plus cette valeur est grande, plus le flou est important, donc l'ombre devient plus grande et plus légère.
dispersion : les valeurs positives font que l'ombre s'étend et grandit, les valeurs négatives font que l'ombre se rétrécit.

Flou

Applique le flou sur l'arrière-plan du nœud uniquement, pour créer un effet de verre de style iOS. Plus la valeur est grande, plus le flou est important.

Disposition

La disposition vous permet de placer et de positionner votre nœud en fonction de ses frères et sœurs (ceux du même noeud parent).

Largeur

Contrôle la largeur du noeud.

px : définit la largeur du noeud en pixel.
% : définit la largeur du noeud en pourcentage par rapport à la largeur de son parent.
fit : adapte automatiquement la largeur du noeud en fonction de la largeur de son contenu.
grow : spécifie combien d'espace restant du parent doit être attribué au noeud.

Hauteur

px : définit la hauteur du noeud en pixel.
% : définit la hauteur du noeud en pourcentage par rapport à la largeur de son parent.
fit : détermine automatiquement la hauteur du noeud en fonction de la largeur de son contenu.
grow : spécifie combien d'espace restant du parent doit être attribué au noeud.

Haut

Contrôle la marge supérieure entre le noeud et son voisin.

px : définit la marge en pixel.
% : définit la marge en pourcentage par rapport à la largeur de son parent.
auto : définit automatiquement la marge à l'espace restant dans son parent. S'il y a plusieurs noeuds dont la marge supérieure est fixée à auto, l'espace restant est divisé de manière égale entre chaque noeud.

Droite

Contrôle la marge de droite entre le noeud et son voisin.

px : définit la marge en pixel.
% : définit la marge en pourcentage par rapport à la largeur de son parent.
auto : définit automatiquement la marge à l'espace restant dans son parent. S'il y a plus de noeuds dont la marge supérieure est fixée à auto, l'espace restant est divisé de manière égale entre chaque noeud.

Bas

Contrôle la marge inférieure entre le noeud et son voisin.

px : définit la marge en pixel.
% : définit la marge en pourcentage par rapport à la largeur de son parent.
auto : définit automatiquement la marge à l'espace restant dans son parent. S'il y a plus de noeuds avec une marge supérieure définie à auto, l'espace restant est divisé de manière égale entre chaque noeud.