3.4 Les composants de visualisation

3.4.1 Le tableau

Ce type de contrôle requiert un jeu de données associé. Il offre une multitude de fonctionnalités décrites ci-après. Il affiche par défaut tous les champs du jeu de données lié.

Les déclencheurs associés dépendent des options sélectionnées pour le contrôle.

Les options générales du tableau sont les suivantes :

• Activer la modification sur la table : cette option permet à l’utilisateur de modifier directement une valeur à l’intérieur d’un tableau. Le déclencheur Lors de la modification devient disponible. Une option Valider automatiquement les modifications est également disponible.

• Valider automatiquement les notifications : cette option permet de valider les modifications du tableau sans avoir à cliquer sun un bouton de validation. Les modifications sont enregistrées dès la saisie.

• Activer l’ajout sur la table : cette option permet à l’utilisateur d’ajouter directement une valeur dans le tableau. Le déclencheur Lors de l'ajout devient disponible.

• Cacher l’entête de la table : cette option masque l’entête du tableau. Cette option rend l’option Permettre à l’utilisateur d’afficher / masquer des colonnes indisponible.

• Permettre à l’utilisateur d’afficher / masquer les colonnes : cette option permet d’afficher ou de masquer des colonnes. Le déclencheur Lorsque l'utilisateur affiche/masque des colonnes devient disponible.

• Sélectionnable : cette option permet de sélectionner des lignes du tableau. Le déclencheur À la sélection d'une ligne devient disponible. Une option Sélection à choix multiple est également disponible pour pouvoir sélectionner plusieurs lignes.

• Afficher la pagination également en haut : cette option duplique les paginateurs du bas du tableau en haut.

Affectation d’un jeu de données

Pour afficher du contenu, un tableau doit obligatoirement être lié à un jeu de données (DataSet table Employe sur l’illustration). Les valeurs de l’un et de l’autre sont alors systématiquement synchronisées.

Un jeu de données peut être affecté à un tableau depuis les propriétés du contrôle (clic droit, Modifier, puis cliquer sur l’onglet (Données)). Sélectionner un jeu de données dans la liste Jeu de données associé. Si le jeu de données n’existe pas, il est possible d’en créer un en utilisant le bouton Créer un nouveau jeu de données, qui renverra vers le module de gestion des jeux de données.

On voit ici apparaître la structure du jeu de données « DataSet table employe » dans le tableau

Une fois le jeu de données associé, il faut cocher les colonnes qui seront affichées dans le tableau. Il est possible de définir une fonction à chacune des colonnes en cliquant sur à côté du nom de la colonne.

La table éditable

La table éditable peut être activée avec les cases à cocher Activer la modification sur la table et Activer l’ajout sur la table dans les propriétés du tableau. Ces options permettent à l’utilisateur d’ajouter et / ou modifier directement des valeurs à l’intérieur d’un tableau. Ces options activent les déclencheurs Lors de la modification et Lors de l'ajout.

La colonne **Éditer* apparaît. Elle permet de sélectionner puis valider la ligne à éditer

Il est possible d’éditer chaque colonne du tableau en faisant un clic droit dessus depuis le cadre Liste des contrôles à gauche de l’écran.

Les propriétés de la colonne du tableau s’affichent à droite de l’écran. Les options suivantes sont disponibles :

• Cliquable : permet de sélectionner la colonne lorsque l’application est exécutée.

• Masquer le nom de la colonne

• Colonne triable (activé par défaut)

• Trié d’origine

• Colonne modifiable : permet de modifier la colonne depuis le tableau lorsque l’application est exécutée.

• Colonne modifiable en ajout : permet d’ajouter des entrées dans la colonne directement depuis le tableau lorsque l’application est exécutée.

• Colonne redimensionnable

• Colonne réorganisable

• Fusionner les cellules de même valeur

• Colonne filtrable : permet d’avoir un champ de filtrage dans l’entête de la colonne.

• Colonne figée

• Ne jamais exporter la colonne : l’export du tableau n’exportera jamais cette colonne.

• Toujours exporter la colonne : l’export du tableau exportera toujours cette colonne.

Les exports

Plusieurs types d’export de tableau sont disponibles : Excel, CSV et PDF. Pour les activer, il suffit de cocher les cases correspondantes dans les propriétés du tableau. Le champ Label correspond à l’entête du fichier exporté.

L’export Excel a été activé. Un bouton en bas du tableau permet de déclencher le téléchargement

Tableau de sélection à choix multiple

Il est possible de sélectionner plusieurs lignes dans un tableau. Cocher la case Sélection à choix multiples dans les propriétés du tableau.

La sélection peut être utilisée dans un comportement métier. Créer une condition Pour chaque sur un objet Contrôle. Le tableau apparaît dans la liste Objet à parcourir. Sélectionner Parcourir : les lignes sélectionnées après avoir sélectionné le tableau.

Filtre avancé

Une fonctionnalité de filtrage avancé est disponible pour les colonnes. Afficher les propriétés de la colonne, et cocher la case Colonne filtrable. Un champ Type de filtre apparaît. Sélectionner Filtre avancé et cliquer sur Sauvegarder. Le filtre est différent selon le type de données de la colonne (date, texte, entier et décimal).

Les exports

Comme pour le tableau classique, plusieurs types d’export sont disponibles : Excel, CSV et PDF. Pour les activer, il suffit de cocher les cases correspondantes dans les propriétés du tableau croisé.

L’export Excel a été activé. Un bouton en bas du tableau permet de déclencher le téléchargement

3.4.3 Le planning

Ce type de contrôle requiert un jeu de données associé. Son fonctionnement est proche de celui d’un tableau croisé.

Création d'un planning

Il dispose de trois déclencheurs possibles : Au changement de zoom, À la création d'une tâche et À la sélection d'une ligne, qui dépendent des options cochées dans les propriétés du composant.

Fenêtre contextuelle d’édition du planning

Dans cette même fenêtre contextuelle, il est possible de surligner les jours fériés français, en plus des week-ends. Cette option est activée par défaut, elle est désactivable en décochant la case Surligner les jours fériés français.

La pagination est affichée en-dessous du planning. Il est possible de l’afficher également au-dessus via la case à cocher Afficher la pagination également en haut.

Le planning peut être exporté au format PDF et / ou CSV en cochant la case Activer l’export des données en PDF et / ou Activer l’export des données en CSV. Il est également possible d’opter pour un format paysage en cochant la case Exporter au format paysage.

Visualisation d’une page de planning exporté en PDF

Dans l’onglet (Données) de la fenêtre contextuelle d’édition du contrôle, il faut sélectionner au minimum trois fonctions à affecter aux différents champs du jeu de données : une fonction Ligne qui correspond à la première colonne du planning, une fonction Date de début et une fonction Date de fin. La fonction Groupe permet d’avoir des tables extensibles. Il existe également, dans la liste des fonctions disponibles, des fonctions qui permettent de désactiver le redimensionnement, le déplacement et le déplacement à travers des lignes du planning. Cette désactivation se fait de façon horizontale et verticale.

Exécution d'un planning

En mode Player, le planning se présente sous la forme d’un tableau croisé dans lequel il est possible de déplacer des tâches parmi les lignes et les colonnes. Le déplacement se fait en mode Glisser-déposer à la souris, similaire au placement des composants sur un écran dans le Mode Création du module Conception Ontomantics.

Le redimensionnement d’une tâche se fait en plaçant le pointeur de la souris sur le bord droit de la tâche à redimensionner. Le pointeur change de forme et il suffit alors de cliquer sans relâcher le bouton gauche de la souris puis de changer la taille de la tâche en bougeant la souris vers la gauche ou vers la droite, et de relâcher le bouton une fois que la tâche est à la taille voulue.

Exemple de planning d’une application Ontomantics

En plaçant le pointeur de la souris sur le planning, il est possible de faire défiler ce dernier horizontalement à l’aide de la molette. Le fait de déplacer une tâche horizontalement vers le bord du planning fait également défiler celui-ci automatiquement. Pour des questions de lisibilité et d’ergonomie, le fait de faire défiler le planning horizontalement alors que des tâches sont affichées sur le bord gauche du planning, fait défiler le nom de la tâche le long de celle-ci, afin qu’il reste visible malgré le défilement.

Le nom des tâches à gauche du planning reste visible en défilant

Les paginateurs situés sous le planning permettent de changer de page. Cependant, il est possible de passer à la page suivante en déplaçant une tâche verticalement vers le bas du planning. De même, il est possible de retourner à la page précédente en déplaçant une tâche vers le haut du planning.

3.4.4 L'agenda

Ce contrôle nécessite un jeu de données associé. Ses déclencheurs sont Au changement de date, Au changement de vue, À la création d'une tâche (uniquement si la case Activer la création est cochée dans les propriétés du contrôle) et À l'import d'une tâche (uniquement si la case Activer l’import iCal est cochée).

Sur l’onglet (Général), il est possible de sélectionner une vue par défaut (agenda du mois, de la semaine, du jour, etc.) et d’afficher des boutons pour différentes vues, permettant de basculer sur celles-ci en mode Player. La case Surligner les jours fériés français est cochée par défaut. Il est également possible de masquer des jours de la semaine.

Sur l’onglet (Données) de la fenêtre contextuelle d’édition du contrôle, sélectionner un jeu de données à associer, puis sélectionner au minimum deux fonctions à affecter aux différents champs du jeu de données : une fonction Date de début et une fonction Date de fin.

3.4.5 L'arbre

Le contrôle de type Arbre nécessite un jeu de données pour fonctionner.

Il dispose d’un déclencheur À la sélection d'un nœud afin de pouvoir lancer l’exécution de comportements lors du clic sur un élément de l’arbre.

Sur l’onglet (Général), il est possible d’activer le filtre de recherche multiple et la sélection à choix multiple.

Sur l’onglet (Données), sélectionner un jeu de données ; si aucun n’est disponible, il est possible d’en créer un en cliquant sur Créer un nouveau jeu de données. Un popup s’ouvre avec les informations pré-remplies qu’il est possible de modifier.

Le jeu de données associé doit contenir 3 champs :

• ID : identifiant du nœud dans l’arbre

• ID parent : identifiant du parent du nœud

• Texte : intitulé du nœud

Ces champs sont automatiquement proposés à la création d’un nouveau jeu de données.

Dans l’exemple suivant, le jeu de données a été rempli avec les employés d’une entreprise, organisés selon la hiérarchie. Le contenu brut du jeu de données est visible dans le tableau en-dessous.

Restitution du jeu de données, sous forme d’arbre en haut, et sous forme de tableau en bas

3.4.6 La liste de fichiers

3.4.7 Le graphique

Le fonctionnement d’un graphique est très similaire à celui d’un tableau ou d’une liste déroulante. Nous allons voir ici un exemple basique de création de graphiques (courbes, barres et camemberts).

Un graphique est nécessairement associé à un jeu de données. Dans la plupart des cas, deux colonnes sont nécessaires : la première correspond aux abscisses, la seconde aux ordonnées. Dans le cas d’un camembert par exemple, la première correspond au libellé des différentes parts, et la deuxième au pourcentage.

Dans le cas présent, nous voulons connaître la répartition des congés par personne pour une application de congés payés d’une entreprise. Voici un exemple de règle qui remplit le jeu de données en conséquence.

Une fonction « count » dans les conditions permet de compter le nombre de personnes pour chaque ID_VILLE. Les résultats sont récupérés dans une action d’insertion dans le jeu de données.

Voici un exemple du résultat obtenu avec trois types de graphiques différents :

 

Personnalisation du styles des éléments du graphique

À utiliser dans le champ style de l'onglet apparence des graphiques.

Lignes

Pour les graphiques de type lignes et mixtes.

PROPRIÉTÉ CHART.JS	TYPE	DÉFAUT
lineColor	Couleur	rgba(0, 0, 0, 0.1)
La couleur de la ligne.
lineCapStyle	Caractàres	butt
Détermine la forme utilisée pour dessiner l'extrémité des lignes. Doit être l'une des formes suivantes : "butt" : Les extrémités des lignes sont mises au carré aux points d'extrémité. "round" : Les extrémités des lignes sont arrondies. "square" : Les extrémités des lignes sont mises au carré en ajoutant une boîte de largeur égale et de hauteur égale à la moitié de l'épaisseur de la ligne.
lineJoinStyle	Caractàres	miter
Détermine la forme utilisée pour joindre deux segments de ligne à l'endroit où ils se rencontrent. Doit être l'une des formes suivantes : "miter" : Les segments connectés sont joints en étendant leurs bords extérieurs pour se connecter en un seul point, ce qui a pour effet de remplir une zone supplémentaire en forme de losange. "round" : Arrondit les coins d'une forme en remplissant un secteur supplémentaire du disque centré sur l'extrémité commune des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne. "bevel" : Remplit une zone triangulaire supplémentaire entre le point d'extrémité commun des segments connectés et les coins rectangulaires extérieurs séparés de chaque segment.
lineDash	Une suite d'entiers
Une suite de nombres qui spécifient les distances pour dessiner alternativement une ligne et un espace (en pixels). Exemple : lineDash: 5 10 15;
lineDashOffset	Nombre	0.0
Le décalage du tiret de la ligne si est utilisé.
lineWidth	Entier	3
L'épaisseur de la ligne en pixels.
lineTension	Nombre	0.4
Tension de la courbe de Bézier de la ligne. Défini à 0 pour dessiner des lignes droites.
lineAreaColor	Couleur	Même que lineColor
Couleur de l'air en dessous de la ligne. Utiliser la valeur lineAreaColor: transparent; pour la désactiver.

Points

Pour les graphiques de type points, lignes, bulles et mixtes.

PROPRIÉTÉ CHART.JS	TYPE	DÉFAUT
pointBackgroundColor	Couleur	rgba(0, 0, 0, 0.1)
La couleur de remplissage du point.
pointBorderColor	Couleur	rgba(128, 128, 128, 0.5)
La couleur de la bordure des points.
pointBorderWidth	Entier	2
L'épaisseur de la bordure du point en pixels.
pointRadius	Entier	5
Le rayon de la forme du point. Si la valeur est 0, le point n'est pas rendu.
pointHitRadius	Entier	1
La taille en pixels du point non affiché qui réagit aux événements de la souris.
pointRotation	Entier	0
La rotation du point en degrés.
pointStyle	Caractàres	circle
Le type de point. Les valeurs suivantes sont prises en charge : "circle", "cross", "crossRot", "dash", "line", "rect", "rectRounded", "rectRot", "star" et "triangle".
pointHoverBackgroundColor	Couleur	rgba(0, 0, 0, 0.1)
La couleur de remplissage du point lorsqu'il est survolé.
pointHoverBorderColor	Couleur	rgba(128, 128, 128, 0.5)
La couleur de la bordure du point lorsqu'il est survolé.
pointHoverBorderWidth	Entier	2
L'épaisseur de la bordure du point en pixels lorsqu'il est survolé.
pointHoverRadius	Entier	8
Le rayon de la forme du point lorsqu'il est survolé. Si la valeur est 0, le point n'est pas rendu.

Barres

Pour les graphiques de type barre et mixtes.

PROPRIÉTÉ CHART.JS	TYPE	DÉFAUT
barBackgroundColor	Couleur	rgba(0, 0, 0, 0.1)
La couleur de remplissage de la barre.
barBorderColor	Couleur	rgba(128, 128, 128, 0.5)
La couleur de la bordure de la barre.
barBorderWidth	Entier	2
L'épaisseur de la bordure de la barre en pixels.
barBorderSkipped	Caractàres ou Booléen	bottom
Ce paramètre est utilisé pour éviter de dessiner le trait de la barre à la base du remplissage. En général, il n'est pas nécessaire de le modifier, sauf lors de la création de types de graphiques qui dérivent d'un graphique à barres. Remarque : pour les barres négatives dans un graphique vertical, le haut et le bas sont inversés. Il en va de même pour la gauche et la droite dans un graphique horizontal. Les options sont les suivantes : "bottom", "left", "top", "right" ou "false"
barHoverBackgroundColor	Couleur
La couleur de remplissage de la barre lorsqu'elle est survolée.
barHoverBorderColor	Couleur
La couleur de la bordure de la barre lorsqu'elle est survolée.
barHoverBorderWidth	Entier	2
L'épaisseur de la bordure de la barre en pixels lorsqu'elle est survolée.

Parts

Pour les graphiques de type secteur, donut et aire polaire.

PROPRIÉTÉ CHART.JS	TYPE	DÉFAUT
arcBackgroundColor	Couleur	rgba(0, 0, 0, 0.1)
La couleur de remplissage de la part.
arcBorderColor	Couleur	rgba(128, 128, 128, 0.5)
La couleur de la bordure de la part.
arcBorderWidth	Entier	2
L'épaisseur de la bordure de la part en pixels.
arcBorderAlign	Caractàres	center
Alignement de la bordure. Les valeurs possibles sont "center" et "inner". Lorsque la valeur "center" est définie, les bords des parts les uns à côté des autres se chevauchent. Lorsque la valeur "inner" est définie, il est garanti que toutes les bordures ne se chevauchent pas.
arcHoverBackgroundColor	Couleur
La couleur de remplissage de la part lorsqu'elle est survolée.
arcHoverBorderColor	Couleur
La couleur de la bordure de la part lorsqu'elle est survolée.
arcHoverBorderWidth	Entier	2
L'épaisseur de la bordure de la part en pixels lorsqu'elle est survolée.

3.4.8 La carte

La plateforme intègre un composant de cartographie OpenStreetMap qui permet de naviguer sur les cartes du projet de cartographie libre OSM. Les déclencheurs associés au contrôle sont les suivants : Au changement d'emplacement, Au changement de zoom, Au clic, Au double clic, Au déplacement de la carte.

Composant OpenStreetMap dans le Designer en mode Création

Onglet Général de la fenêtre popup d’édition du contrôle OpenStreetMap

Il est possible de définir le lieu qui sera au centre de la carte en entrant ses coordonnées (latitude et longitude). En plus des champs traditionnels qui composent la fenêtre d’édition du contrôle (Titre, Description, Message d’aide, Bulle d’aide, etc.), d’autres options font leur apparition :

• le champ Emplacement initial spécifie le lieu qui sera affiché par défaut sur la carte

• le champ Niveau de zoom permet de définir le niveau de zoom par défaut ; cette valeur est modifiable en mode Player en utilisant la molette de la souris sur la carte pour zoomer et dézoomer, ou en utilisant les boutons + et -situés à gauche de la carte

• les champs Niveau de zoom minimal et maximal permettent de délimiter les limites du zoom qu’il est possible d’atteindre. Les valeurs situées en dehors de celles délimitant le niveau de zoom couvert ne seront pas accessibles

• le champ Adresse des tuiles permet de définir l’emplacement des images cartographiques à afficher dans le composant

• le champ Adresse du service de géocodage permet de renseigner l’adresse du service permettant de chercher des données OSM par leur nom et leur adresse et de générer des adresses potentielles à partir d’un point OSM

• la case Préserver le zoom et la position de la carte permet, lorsqu’elle est cochée, de ne pas se centrer ni zoomer directement sur l’itinéraire renseigné ; lorsqu’elle est décochée, la carte se focalise sur l’itinéraire

Le composant offre également la possibilité, lorsqu’associé à un jeu de données avec des valeurs de coordonnées géographiques cohérentes, de remplacer les marqueurs des points de départ, de passage et d’arrivée, par des marqueurs personnalisés.

Comment dessiner sur la carte

Personnalisation du styles des formes géométriques

Propriété Leaflet et équivalent CSS SVG, à utiliser dans la partie "properties" du fichier GeoJSON (voir exemple), sont tous deux supportées:

Les propriétés ci-dessous (sauf les 3 dernières) peuvent aussi être utilisé dans les champ CSS de l'onglet apparence des type d'élément de carte (ligne, point, polygone, cercle) pour les personnaliser.

PROPRIETE LEAFLET	EQUIVALENT CSS	TYPE	DEFAUT
stroke		Booléen	true
Si vous souhaitez dessiner un trait le long du chemin. Mettez-le à false pour désactiver les bordures sur les polygones ou les cercles.
color	stroke	Couleur	'#3388ff'
Couleur du trait
weight	stroke-width	Nombre	3
Largeur du trait en pixels
opacity	stroke-opacity	Nombre	1.0
Opacité du trait
lineCap	stroke-linecap	Caractères	'round'
Une chaîne qui définit la forme à utiliser à la fin du trait parmi 'round', 'square' ou 'butt'.
lineJoin	stroke-linejoin	Caractères	'round'
Une chaîne qui définit la forme à utiliser aux coins du trait parmi 'round', 'bevel' ou 'miter'.
dashArray	stroke-dasharray	Nombre, Pourcentage ou Caractères
Une chaîne qui définit le motif des tirets. Exemples : 90, '2cm 1cm', '50%', '4 1 2 3'
dashOffset	stroke-dashoffset	Nombre, Pourcentage ou Caractères
Une chaîne qui définit le décalage dans le motif des tirets pour commencer le tiret. Exemples : 45, '3cm', '25%', '2'
fill		Booléen ou URL	true sauf pour lignes
Si la forme doit être remplie par couleur. Mettez-le à false pour désactiver le remplissage sur les polygones, rectangle ou cercles. Vous pouvez aussi remplir la forme avec un motif en affectant une URL à la propriété: fill: url(/file/Images/pattern.png); ou directement le contenu d'une image SVG sous la forme : (width et height en pixels sont requis) Exemple pour une ligne horizontale : fill: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><line x1="0" y1="5" x2="10" y2="5" stroke="blue" stroke-width="1"/></svg>); Exemple pour une vague : fill: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="30"><path d="M-50.129 12.685C-33.346 12.358-16.786 4.918 0 5c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346" stroke="blue" stroke-width="1" fill="none"/></svg>);
fillColor	fill	Couleur	--Même que color--
Couleur de remplissage. La valeur par défaut est celle de l'option "color".
fillOpacity	fill-opacity	Nombre	0.2 (0 si fill:url)
Opacité du remplissage.
patternTransform		Caractères
En cas de remplissage avec un motif, permet de le déformer ou de le tourner: patternTransform: rotate(45) scale(0.5) skewX(30); https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/transform#transform_functions
fillRule	fill-rule	Caractères	'evenodd'
Une chaîne de caractères qui définit comment l'intérieur d'une forme est déterminé parmis 'evenodd' ou 'nonzero'.
smoothFactor		Nombre	1.0
Type PolyLine uniquement : De combien simplifier la polyligne à chaque niveau de zoom. Plus signifie de meilleures performances et un aspect plus lisse, et moins signifie une représentation plus précise
noClip		Booléen	false
Type PolyLine uniquement : Désactive l'écrêtage des polylignes.
radius		Nombre	10
Type Point uniquement : Rayon du cercle en pixels.
icon		Caractères
Pour afficher un marker à la place d'un cercle sur les éléments géométriques de type "Point". Images (Exemple : "/files/Images/marker.png") ou icônes font awesome (Exemple : "fas fa-map-marker-alt fa-3x icon-blue") supportées.
popupContent ou name		Caractères
Contenu de la bulle d'aide qui s'affichera en cliquant dessus.
interactive		Boolén	true
Si false, cela empêche l'ouverture de la bulle d'aide même si les propriétés popupContent ou name sont remplies.

En cas d'export avec des logiciels tels QGIS, veillez à ce que les coordonnées soit bien au format WGS84 EPSG:4326 [ Longitude, Lattitude ]

Exemple de geoJSON:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        1.2359619140625,
                        48.11843396091691
                    ],
                    [
                        3.6254882812499997,
                        48.77429274267509
                    ],
                    [
                        2.4224853515625,
                        47.956823800497478
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "stroke": "#1a1397",
                "stroke-width": 3,
                "stroke-opacity": 1,
                "fill": "#6c97FF",
                "fill-opacity": 0.5,
                "name": "Coors Field",
                "popupContent": "This is the popup content!"
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            0.7305908203125,
                            47.632081940263308
                        ],
                        [
                            2.691650390625,
                            47.22329888685773
                        ],
                        [
                            2.1478271484375,
                            47.76517619125415
                        ],
                        [
                            1.329345703125,
                            47.879512933970499
                        ],
                        [
                            0.7305908203125,
                            47.632081940263308
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "stroke": "#ff5151",
                "stroke-width": 2,
                "stroke-opacity": 1,
                "fill": "#0aa505",
                "fill-opacity": 0.5
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            3.3508300781249997,
                            47.79839667295524
                        ],
                        [
                            4.32861328125,
                            47.79839667295524
                        ],
                        [
                            4.32861328125,
                            48.08908799881762
                        ],
                        [
                            3.3508300781249997,
                            48.08908799881762
                        ],
                        [
                            3.3508300781249997,
                            47.79839667295524
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            3.4552001953125,
                            47.26804770458176
                        ],
                        [
                            4.21875,
                            47.26804770458176
                        ],
                        [
                            4.21875,
                            47.51349065484327
                        ],
                        [
                            3.4552001953125,
                            47.51349065484327
                        ],
                        [
                            3.4552001953125,
                            47.26804770458176
                        ]
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "icon": "fas fa-map-marker-alt fa-3x icon-blue",
                "popupContent": "I am a marker"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    4.1363525390625,
                    48.45106561953216
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "color": "#6c97FF",
                "radius": 20
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    3.93310546875,
                    48.91527985344383
                ]
            }
        }
    ]
}