arcOrama: Le blog consacré à ArcGIS et aux technologies Esri

Home Résultats de recherche pour Conseils & Astuces ArcGIS Online

Affichage des articles triés par date pour la requête Conseils & Astuces ArcGIS Online. Trier par pertinence Afficher tous les articles

Conseils & Astuces ArcGIS Online - N°197

N° 197 - Utiliser des Grilles CSS pour améliorer l'aspect de vos fenêtres contextuelles

Dans ce précédent article, je vous ai présenté le support de nouvelles options CSS dans les fenêtres contextuelles de vos cartes et scènes web sur ArcGIS Online. Depuis la dernière mise à jour de décembre 2024, il est en effet possible d'utiliser les mécanismes de positionnement en Flexbox et en Grid proposés par les styles CSS. Après ce premier exemple concret utilisant les boîtes flottantes CSS (Flexbox), je vous propose de voir cette fois-ci un exemple concret utilisant les grilles CSS (Grids) pour personnaliser et améliorer le positionnement des informations dans la fenêtre contextuelle.

Cet exemple est issu d'une carte réalisée par la Communauté d'Agglomération de Plaine Vallée (🙏 Vincent Tannière) qui présente des informations sur les parcelles cadastrales. L'idée est de diviser la fenêtre contextuelle en différentes parties :

une première partie "en-tête" pour afficher le logo de la commune, le nom de la commune et l'identifiant de la parcelle.
une seconde partie pour présenter la contenance cadastrale, la surface géométrique
une troisième partie pour présenter l'adresse de la parcelle.
une dernière partie "pied de page" pour indiquer la source de l'information.

En utilisant une expression Arcade pour générer les quelques lignes d'HTML et CSS, nous allons construire cette fenêtre contextuelle personnalisée pour la couche des parcelles.

Tout d'abord, nous commençons par ajouter un élément de type "Arcade" dans votre fenêtre contextuelle :

Ensuite, nous allons utiliser l'expression Arcade suivante (les explications se trouvent en commentaire) :

// Définition des variables et récupération des valeurs des attributs de la parcelle
var CODE_INSEE = $feature.CODE_INSEE
var alias_INSEE = DomainName($feature, "CODE_INSEE") // Récupérer l'alias du champ CODE_INSEE
var CODE_POSTAL = $feature.CODE_POSTAL
var NUMERO = $feature.NUMERO
var NVOIRIE = $feature.NVOIRIE
var REP = $feature.REP
var SECTION = $feature.SECTION
var Shape__Area = Round(Number($feature.Shape__Area)) // Arrondir et convertir en nombre
var SUPF = Round(Number($feature.SUPF)) // Arrondir et convertir en nombre
var TYPE_VOIE = $feature.TYPE_VOIE
var VOIE = $feature.VOIE

// Appliquer les séparateurs de milliers
var SUPF_formatted = Text(SUPF, "#,###")
var Shape__Area_formatted = Text(Shape__Area, "#,###")

// Préparer l'URL du logo de la commune en fonction du CODE_INSEE, ces logos ont été ajoutés 
// en tant que contenus sur le portail ArcGIS et partagés de manière publique
var logoURL = When(
    CODE_INSEE == "95014", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/ef6aee2a723c42f880f9433067a9fcbf/data",
    CODE_INSEE == "95028", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/ef68be52457c431a9e25fc29e3cf3d84/data",
    CODE_INSEE == "95091", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/ce2122731f2e4dc7bce8be6bfcae178e/data",
    CODE_INSEE == "95197", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/e3ca32e5dbba48b0956a5250e1aa0988/data",
    CODE_INSEE == "95199", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/38089696d7f34bcea95d57f881dd66af/data",
    CODE_INSEE == "95210", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/569274c6058b43d8aac11a7c0e93ac95/data",
    CODE_INSEE == "95229", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/53382ebe5ede4d8bb8efa118af8cf91a/data",
    CODE_INSEE == "95288", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/c57ca510967146eba21176a8b7c4abb1/data",
    CODE_INSEE == "95369", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/67911858980a475783188e9339587ea8/data",
    CODE_INSEE == "95409", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/695adebf0a1147ae83e76f53165de187/data",
    CODE_INSEE == "95426", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/992c4f9f51114a2db24c0a568489fe8c/data",
    CODE_INSEE == "95427", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/e03762bafa33447ab7877340bc84f0b2/data",
    CODE_INSEE == "95428", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/815af3ec66474712a964d2d15774e189/data",
    CODE_INSEE == "95489", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/e0c23725fa78442591024d317fd111ea/data",
    CODE_INSEE == "95539", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/f197904d7b1e40bdb57e6df8d4922c1d/data",
    CODE_INSEE == "95555", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/f98c736064e64e668612132436b054f4/data",
    CODE_INSEE == "95574", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/5d228b281489463f9dcab13b70a30e56/data",
    CODE_INSEE == "95598", "https://agglo-plainevallee.maps.arcgis.com/sharing/rest/content/
                            items/55f9e1023c9b44848accb5a75f121efa/data",
    "https://www.agglo-plainevallee.fr/" // URL par défaut si le CODE_INSEE n'est pas défini
);

// Style de la 1ère ligne (en-tête), on utilise le positionnement par "grille"
var header = `<div style="display: grid; grid-template-columns: 1fr 2fr; 
                          background-color: #FFCB32; gap: 5px;">

    <div style="display: flex; align-items: center; justify-content: center;">
        <img src="${logoURL}" style="max-width: 90%; height: auto; margin: 5%;" />
    </div>

    <div style="padding: 10px; display: flex; flex-direction: column; justify-content: center; 
                align-items: center;">
    <div style="font-size: 16px;">${alias_INSEE}</div>
    <div style="font-size: 20px; font-weight: bold; margin-top: 10px;">${SECTION} ${NUMERO}
    </div>
</div>

</div>`

// Ligne avec les superficies, on utilise le positionnement par "grille"
var superficies = `<div style="grid-column: 1 / -1; background-color: #FFF0C0; 
                               padding: 10px;">
    Contenance cadastrale : <strong>${SUPF_formatted} m²</strong><br>
    <span style="font-size: 0.9em; font-style: italic;">(Superficie géométrique : <strong>
    ${Shape__Area_formatted} m²</strong>)</span>
</div>`;

// Ligne avec l'adresse, on utilise le positionnement par "grille"
var adresse = `<div style="grid-column: 1 / -1; background-color: #FFF0C0; padding: 10px;">
    Adresse :<br>
    <strong>${NVOIRIE}${REP} ${TYPE_VOIE} ${VOIE}</strong><br>
    <strong>${CODE_POSTAL} ${Upper(alias_INSEE)}</strong>
</div>`

// Ligne de pied de page, on utilise le positionnement par "grille"
var footer = `<div style="grid-column: 1 / -1; background-color: #FFE085; padding: 10px; 
                          text-align: center;">
    <em>Source : <a href="https://cadastre.gouv.fr" target="_blank">
    cadastre.gouv.fr</em></a>
</div>`;

// Combiner toutes les sections avec les espacements
var html = `<div style="display: grid; grid-template-rows: auto auto auto auto; row-gap: 5px; 
                        padding: 10px; background-color: #98C3DA;">
    ${header}
    ${superficies}
    ${adresse}
    ${footer}
</div>`

// On retourne l'ensemble du code HTML en tant que texte
return {
    type: "text",
    text: html
}

La fenêtre contextuelle de notre couche ressemblera alors à ceci :

En espérant que cet exemple vous inspire et vous permettre une adaptation à vos propres cas d'usage. Si vous souhaitez tester en live cet exemple, vous pouvez ouvrir la carte web depuis ce lien.

Bonne route sur ArcGIS Online !

Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien.

Conseils & Astuces ArcGIS Online - N°196

N° 196 - Utiliser des Flexbox CSS pour améliorer l'aspect de vos fenêtres contextuelles

Dans ce précédent article, je vous ai présenté le support de nouvelles options CSS dans les fenêtres contextuelles de vos cartes et scènes web sur ArcGIS Online. Depuis la dernière mise à jour de décembre 2024, il est possible d'utiliser les mécanismes de positionnement en Flexbox et en Grid proposés par les styles CSS. Cela permet un positionnement plus souple et plus créatif de différents éléments à l'intérieur de votre fenêtre contextuel. Dans cet article, je vous propose un exemple concret de fenêtre contextuel en mixant le positionnement via des boîtes flottantes (Flexbox) et des expressions dynamiques avec Arcade.

L'objectif est de présenter les informations issues de stations de mesure de pollution aux particules fines. Celles-ci contiennent notamment des valeurs mesurées (PM2.5) et des informations relatives à la localisation de la station que nous afficherons de manière classique dans un bloc principal. Au-dessus de ce bloc, nous souhaitons afficher une jauge graphique pour représenter la qualité de l'air (bon, moyen, mauvais, ...) et en-dessous de ce blog un pied de page indiquant la source de la donnée et l'instrument effectuant la mesure. Pour ces deux parties, nous allons utiliser le positionnement par boîtes flottantes (Flexbox).

Pour l'en-tête de la fenêtre contextuelle

L'idée est ici d'utiliser des boîtes flottantes (<div style="display: flex; flex-direction: row">) pour afficher les cases de la jauge et de colorier les cases en fonction de la catégorie de qualité de l'air :

Nous allons donc créer un bloc basé sur l'expression Arcade suivante :

// Préparation d'une jauge à 5 cases pour la catégorie "Bon"
var bon = `<div style="display: flex; flex-direction: row; max-width: 500px; 
                          margin: 5px; height: 20px">
  <div style="background-color: #a6f7d0; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Moyen"
var moyen = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                            margin: 5px;height: 20px">
  <div style="background-color: #a5eb3d; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #a5eb3d; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Mauvais"
var mauvais = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                              margin: 5px;height: 20px">
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Très mauvais"
var tres_mauvais = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                                   margin: 5px;height: 15px">
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>  
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie "Dangereux"
var dangereux = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                                margin: 5px;height: 15px">
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>  
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
</div>`

// Selon la valeur de PM25 trouvée dans le champs "value"
// on récupère le code HTML de la catégorie correspondante
var value = $feature.value;
var vals = When(value <= 25, bon,
                value <= 37.5, moyen,
                value <= 75, mauvais,
                value <= 150, tres_mauvais,
                dangereux);

// On retourne le code HTML de la jauge
return { 
	type : 'text', 
	text : vals
}

Pour le pied de page de la fenêtre contextuelle

L'idée est de diviser la ligne en trois compartiments pour afficher le type d'instrument, le lien vers la page décrivant la station de mesure et un lien vers l'organisation responsable de cette station. Comme pour l'en-tête, nous allons utiliser des boîtes flottantes (<div style="display: flex; flex-direction: row">) pour diviser notre ligne en trois sections.

Comme pour l'en-tête, nous allons utiliser un bloc basé sur l'expression Arcade suivante :

// Vérification que le nom d'instrument et l'url de la station n'est pas vide
var instr = IIf(!IsEmpty($feature.instrument_name), 
                         $feature.instrument_name, 
                         'Pas d\'information')

var stn = IIf(!IsEmpty($feature.url), 'Station', 'Pas de station trouvée')

// Préparation du code HTML du pied de page
var html = `<div style="background-color:#eeeeee;display:flex;flex-direction:row;
                           justify-content:space-around;">
    <div>
        Instrument: <span>${instr}</span>
    </div>
    <div>
        |
    </div>
    <div>
        <a href="{url}">${stn}</a>
    </div>
    <div>
        |
    </div>
    <div>
        Source: <a target="_blank"  href="https://openaq.org/">OpenAQ</a>
    </div>
</div>`

return { 
	type : 'text', 
	text : html
}

Je ne détaille pas la conception du bloc central de la fenêtre contextuelle mais il s'agit d'un bloc de texte référençant différents champs de la couche d'entités.

La fenêtre contextuelle finale ressemblera alors à ceci :

Vous pouvez accéder à cet exemple en live ici.

Bonne route sur ArcGIS Online !

Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien.

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>