Conseils & Astuces ArcGIS Online - N°195
N° 195 - Utiliser des styles CSS pour gérer les dispositions dans vos fenêtres
contextuelles
Depuis la mise à jour de décembre 2024, les fenêtres contextuelles des cartes
web ArcGIS Online supportent l'utilisation de style CSS inline. Bien qu'il
ne soit recommander lors de la création de pages ou de sites web, le CSS
inline est utilisé pour donner un style à un élément HTML spécifique, son
utilisation est bien adapté au contexte des éléments d'une fenêtre
contextuel. Pour ces CSS inline, il vous suffit d’ajouter l’attribut de
style à chaque balise HTML de votre fenêtre contextuelle, sans avoir à
référencer de fichiers CSS externe ou des styles en utilisant des
sélecteurs.
Support de Flexbox et de Grid
Ce support de CSS inline va notamment vous permettre d'utiliser des
conteneurs Flexbox ou Grid pour contrôler la disposition des éléments dans
vos fenêtres contextuelles. La principale différence entre Flexbox et Grid
réside dans leur conception et leur utilisation. Flexbox est conçu pour la
mise en page unidimensionnelle (ligne ou colonne). Grid est conçu pour la
mise en page bidimensionnelle (ligne et colonne).
Avec Flexbox, les éléments "enfants" sont alignés uniquement sur une
ligne horizontale ou une colonne verticale.
Avec Grid, vous pouvez créer une grille complète et placer des éléments
"enfants" à des intersections précises.
Propriétés CSS supportées
La liste suivante décrit les propriétés CSS supportées par ArcGIS Online
pour contrôler l'apparence de vos mises en page Flexbox et Grid :
- Align-items
- Align-self
- Gap
- Grid
- Grid-area
- Grid-auto-columns
- Grid-auto-flow
- Grid-auto-rows
- Grid-column
- Grid-column-end
- Grid-column-start
- Grid-row
- Grid-row-end
- Grid-row-start
- Grid-template
- Grid-template-areas
- Grid-template-columns
- Grid-template-rows
- Justify-content
- Justify-items
- Justify-self
- Margin
- Padding
Dans la suite de cet article, je vous propose quelques exemple génériques pour
des styles Flexbox ou Grid.
Exemples de fenêtres contextuelles utilisant les boîtes flexibles
(Flexbox)
Dans ce premier exemple, nous divisions verticalement la fenêtre
contextuelle en trois zones de hauteur identique (30% de la hauteur totale)
pour trois catégories d'information différentes : Information 1, Information
2 et Information 3. Un affichage en boîtes flexibles (display: flex) en
"row" permet d'empiler les trois blocs :
<div style="align-items:flex-end;display:flex;flex-wrap:wrap;gap:5px;
flex-direction:row;height:200px;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
padding:10px;">
Information 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
padding:10px;">
Information 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;width:100%;
padding:10px;">
Information 3
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Une variante sur les hauteurs (15%, 70% et 15%) permettra d'obtenir trois
zones de type : En-tête, Information et Pied de page :
<div style="align-items:flex-end;display:flex;flex-direction:row;flex-wrap:wrap;
gap:5px;height:200px;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:15%;width:100%;
padding:10px;">
En-tête
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:60%;width:100%;
padding:10px;">
Information
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:15%;width:100%;
padding:10px;">
Pied de page
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Dans ce second exemple, nous divisions horizontalement la fenêtre
contextuelle en quatre zones : Infos Année 1, Infos Année 2 et Infos
Année 3. Un affichage en boîtes flexibles (display: flex) en
"column" permet de juxtaposer les trois blocs :
<div style="align-items:flex-start;display:flex;
flex-direction:column;flex-wrap:wrap;gap:5px;height:220px;width:100%;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
padding:10px;width:33%;">
Infos Année 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
padding:10px;width:33%;">
Infos Année 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
padding:10px;width:33%;">
Infos Année 3
</div>
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Dans ce troisième exemple, nous divisions la fenêtre contextuelle en
trois lignes contenant deux éléments : Information et Image. Un affichage en boîtes flexibles (display: flex) en "row" permettra de
superposer les trois lignes :
<div style="align-items:flex-end;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;
height:200px;width:100%;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%;
padding:10px;">
Information 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
padding:10px;">
Image 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%;
padding:10px;">
Information 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
padding:10px;">
Image 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:65%
padding:10px;">
Information 3
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:33%;width:30%;
padding:10px;">
Image 3
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
On notera que dans ce dernier cas, une approche avec des boîtes
flexibles (display: flex) en "column" permet également d'arriver au
même résultat.
<div style="align-items:flex-end;display:flex;flex-direction:column;flex-wrap:wrap;
gap:5px;height:220px;width:100%;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:65%;">
Information 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:65%;">
Information 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:65%;">
Information 3
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:30%;">
Image 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:30%;">
Image 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:30%;padding:10px;
width:30%;">
Image 3
</div>
</div>
Dans ce dernier exemple, nous divisions verticalement et horizontalement
la fenêtre contextuelle en quatre zones : Infos Année 1, Infos Année 2
puis pour la dernière colonne Prévision Année 3 et Prévision Année 4. Un
affichage en boîtes flexibles (display: flex) en "column" permet de
juxtaposer les quatre blocs :
<div style="align-items:flex-start;display:flex;
flex-direction:column;flex-wrap:wrap;gap:5px;height:200px;width:100%;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
padding:10px;width:33%;">
Infos Année 1
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:100%;
padding:10px;width:33%;">
Infos Année 2
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:97px;
padding:10px;width:33%;">
Prévision Année 3
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;height:98px;
padding:10px;width:33%;">
Prévision Année 4
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Exemples de fenêtres contextuelles utilisant les grilles (Grid)
Avec le positionnement CSS par grille, vous allez disposer de plus de
souplesse dans la création des éléments de votre fenêtre notamment en agissant simultanément sur les lignes et les colonnes en utilisant les propriétés grid-column-start, grid-column-end, grid-row-start et grid-row-end.
Dans ce premier exemple, la grille utilise la valeur "auto" pour définir les largeurs des colonnes. Il montre également comment définir les indices de début/fin des positions :
<div style="display:grid;gap:10px;grid-template-columns:auto auto auto;height:200px;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-end:3;
grid-column-start:1;grid-row-start:1;padding:10px;">
En-tête
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:3;
grid-row-end:3;grid-row-start:1;padding:10px;">
Liste
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:1;
grid-row-start:2;padding:10px;">
Image
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column-start:2;
grid-row-start:2;padding:10px;">
Sources
</div>
</div>
La fenêtre contextuelle
ressemblera à ceci :
Le second exemple montre comment définir les indices de début/fin des positions à l'aide des propriétés grid-column et grid-row et des indices sténographiques :
<div style="display:grid;gap:10px;
grid-template-columns:auto auto auto;height:200px;">
<div style="background-color:#e2f5d3;border:1px solid #ccc;grid-column:1/4;
grid-row:1;padding:10px;">
En-tête
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;
grid-column:1/2;grid-row: 2 / span 2;padding:10px;">
Menu
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;
grid-column:2/3;grid-row:2;padding:10px;">
Information
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;
grid-column:3/4;grid-row:2;padding:10px;">
Crédits
</div>
<div style="background-color:#e2f5d3;border:1px solid #ccc;
grid-column:2/4;grid-row:3;padding:10px;">
Pied de page
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Le dernier exemple reprend les propriétés des grilles vues précédemment pour montrer comment utiliser le positionnement par grille dans l'idée d'intégrer différents :
<div style="display:grid;gap:10px;grid-template-columns:auto auto auto;height:200px;">
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/5;
grid-row:1;padding:10px;">
En-tête
</div>
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/2;
grid-row:2;padding:10px;">
Icone 1
</div>
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:2/3;
grid-row:2;padding:10px;">
Icone 2
</div>
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:3/4;
grid-row:2;padding:10px;">
Icone 3
</div>
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:4/5;
grid-row:2;padding:10px;">
Icone 4
</div>
<div style="background-color:#dbf0d1;border:1px solid #ccc;grid-column:1/5;
grid-row:3;padding:10px;">
Description
</div>
</div>
La fenêtre contextuelle ressemblera à ceci :
Comment procéder dans ArcGIS Online ?
Comme vous le savez déjà, pour modifier la structure HTML d'une fenêtre contextuelle vous pouvez utiliser l'interface de configuration permettant de choisir les champs de la couche d'entités et les propriétés d'affichage associés. Dans cette interface, vous utiliserez le bouton "Source" pour éditer la source HTML de votre fenêtre contextuelle et définir les différentes parties <div> et leur positionnement à l'aide des propriétés CSS évoquées dans cet article.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online,
cliquez sur ce lien.
0 comments :
Enregistrer un commentaire