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

Affichage des articles dont le libellé est Arcade. 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°191

N° 191 - Utiliser les hexagones H3 pour vos workflows d'analyse spatiale

Depuis la version de juin 2023 d'ArcGIS Online vous pouvez, comme avec ArcGIS Pro, utiliser l'outil "Générer des tessellations" pour générer des hexagones H3, un système d'indexation spatiale hiérarchique open source créé par Uber en 2018.

Pourquoi utiliser des hexagones ?

Les hexagones sont l'une des formes les plus optimales pour l'analyse spatiale en raison de leur motif de tessellation complètement équidistant de tous leurs voisins (une caractéristique non partagée par d'autres types de tessellation courants, tels que les géométries triangulaires ou carrées). Le fait que les polygones voisins soient équidistants permet de réduire les biais d'échantillonnage qui pourraient être observés avec d'autres types de formes. Les hexagones sont également moins sujets aux effets de distorsion causés par la courbure de la Terre en raison de leurs nombreux côtés et de leurs angles obtus. Pour en savoir plus sur la puissance de la tessellation hexagonale dans vos workflows d'analyse, vous pouvez consulter la rubrique ArcGIS Pro suivante.

Pourquoi utiliser le modèle d'hexagones H3 ?

Les hexagones H3 sont un index de mosaïque hiérarchique open source qui génère des hexagones à des emplacements prédéterminés sur le globe en fonction de l'une des seize résolutions différentes. Les hexagones hiérarchiques sont dimensionnés de telle sorte que chaque polygone plus grand est divisé en sept hexagones plus petits de taille égale qui ont tous une distance égale au centre de leurs voisins, comme le montre l'image ci-dessous.

Les plus grands hexagones pouvant être créés à partir de cet outil ont la résolution "0" avec une superficie moyenne de 4 357 449,42 km². La résolution la plus élevée est "15", elle produit les plus petits hexagones avec une taille de 0,895 m², comme défini par les résolutions de la page de documentation de la bibliothèque H3.

Vous souhaitez en savoir plus sur la hierarchie des hexagones H3 vous pouvez consulter ces ressources sur l'index spatial hiérarchique hexagonal d'Uber et les outils ArcGIS Pro qui proposent déjà des hexagones H3 : Générer des quadrillages et des hexagones et Générer une tessellation.

L'un des avantages des hexagones H3 est que les tessellations s'alignent toujours. Les hexagones H3 sont générés à des emplacements prédéterminés en fonction de la résolution de leur bin. Par conséquent, les tessellations de la même résolution ne se chevaucheront jamais. Chaque tessellation possède un champ GRID_ID représentant son emplacement qui est commun à tous les logiciels de génération H3.

Utilisation des hexagones H3 dans l'outil "Générer des tessellations"

Pour créer une tessellation hexagonale H3 dans ArcGIS Online :

Ouvrir l'application Map Viewer et accédez au volet "Analyse".
Rechercher l'outil : "Générer des Tessellations".
Utilisez le menu déroulant pour sélectionner "Hexagone H3" comme type de forme des groupes.
Une fois que vous avez sélectionné l'hexagone H3, un nouveau paramètre apparaît appelé résolution de groupe H3 où vous pouvez choisir une valeur de résolution de 0, les groupes les plus grands, à 15, les groupes les plus petits.

Lorsque vous générez des tessellations, vous devez définir une couche d'étendue. Vous pouvez le faire en utilisant l'une des deux options suivantes :

Définir une étendue à l'aide du paramètre de couche d'étendue. Lorsque vous sélectionnez cette option, vous pouvez choisir de créer uniquement des tessellations qui intersectent des entités dans la couche d'étendue.
Définir une étendue de traitement dans les paramètres d'environnement. L'étendue de traitement peut être définie par un ensemble de coordonnées, l'étendue d'affichage ou une couche.

Il est important de noter que les hexagones H3 sont toujours générés à l'aide de la référence spatiale World Geodetic System 1984 (WGS84) (wkid : 4326). Il existe deux cas dans lesquels vous pouvez recevoir un message d'avertissement concernant votre référence spatiale :

Si un système de coordonnées de sortie est défini via les paramètres d'environnement et n'est pas WGS84, un avertissement s'affiche vous indiquant que votre système de coordonnées de sortie ne sera pas utilisé.
Si votre ensemble de données d'entrée se trouve dans une référence spatiale différente de WGS84, un avertissement s'affichera indiquant que WGS84 a été appliqué.

Dans les deux cas, l'analyse s'exécutera en WGS84 et vous n'aurez pas besoin d'effectuer la moindre modification.

Exemple de carte H3 représentant la longueur des tronçons de voies dans chaque hexagone

A vous de jouer désormais et de voir les cas d'usages pour lesquels cette approche de fractionnement du territoire peut être pertinente.

Bonne route sur ArcGIS Online !

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

Conseils & Astuces ArcGIS Online - N°190

N° 190 - Utiliser Arcade pour afficher dans une fenêtre contextuelle les entités à proximité

Dans mon précédent article de Conseils & Astuces ArcGIS Online n°189, je vous ai montré comment vous pouviez utiliser une expression Arcade pour interroger, dans une fenêtre contextuelle, les entités adjacentes au polygone cliqué par l'utilisateur. Le langage Arcade permet ainsi d'adresser différents cas de figure où vous aurez besoin de réaliser des recherches géographiques autour de l'entité courante pour obtenir des informations sur d'autres entités de la même couche (ou d'une autre couche de la carte). Par exemple, vous disposez d'une couche des pharmacies et vous souhaitez afficher le nom des 3 pharmacies qui sont les plus proches de celle que l(utilisateur a cliqué sur la carte.

Je vous propose de prendre cet exemple des pharmacies pour vous expliquer comment faire ce type de recherche à l'aide d'une expression Arcade.

Après avoir ajouté la couche des pharmacies dans la carte, nous allons ajouter un bloc de contenu "Arcade" dans la fenêtre contextuelle de cette dernière.
Pour plus de clarté, nous donnons un titre explicite "Pharmacies à proximité" à cette nouvelle expression Arcade.

L'expression Arcade à saisir dans l'éditeur est alors la suivante :

Expects($feature,"*")

// Nom du champ qui contient le libellé des entités, ici il
// s'agit du champ contenant la raison sociale des pharmacies
var field_name = "rs"

// Nombre d'entités à proximité que l'on souhaite rexhercher
var count_feature = 3
// Distance minimum pour la recherche, choisir une valeur priche de la Distance
// moyenne séparant les entité de la couche
var searchDist = 200

// Cette fonction permet de trier le tableau de résultat par distance croissantes
function compareDistances(a,b){
  if (a['Distance']<b['Distance'])
    return -1;
  if (a['Distance']>b['Distance'])
    return 1;
  return 0;
}

// récupération de la géométrie ponctuelle de l'entité
var pt = Geometry($feature)
// On recherche d'un premier rayon minimum autour du point
var result_featureset = Intersects($layer,Buffer(pt, searchDist,"meters"))
// On compte le nombre de points trouvés
var cnt = Count(result_featureset)

// Tant que l'on a pas le nombre suffisant de résultats 
// avec l'entité elle-même en plus de count_feature
while(cnt<=(count_feature+1)){
    searchDist = searchDist*2
    result_featureset =Intersects($layer,Buffer(pt, searchDist,"meters"))
    cnt = Count(result_featureset)
}

// Création d'un tableau avec les résultats de la recherche pour pouvoir
// les trier par ordre de distances croissantes
var result_array = []
for (var feat in result_featureset){
  // On exclut l'entité elle-même des résultats finaux  
  if(Text(feat[field_name])!=Text($feature[field_name])){
    var result_dict={}
    // On construit un dictionnaire "Nom","Distance" pour la fonction de tri
    result_dict[field_name]=feat[field_name]
    result_dict["Distance"]=Distance(pt, Geometry(feat), "kilometers") 
    Push(result_array,result_dict)
  }
}

// On récupère un tableau trié sur les distances
result_array = Sort(result_array, compareDistances)

// On construit la chaîne HTML à renvoyer
var str_HTML = "Les " + Text(count_feature) +
               " phamarcies les plus proches sont les suivantes :<br/>"

// On démarre une liste HTML               
str_HTML += "<ul>"

// On boucle uniquement sur le nombre "count_feature" d'entités à retourner
var i=0
while (i<count_feature){
    str_HTML += "<li>" + Text(result_array[i][field_name]) + 
    " (" + Text(result_array[i]["Distance"],"0.0")  + " km)</li><br/>"
    i+=1
  }
// On termine la liste HTML
str_HTML += "</ul>"

// On renvoie la chaîne HTML
return { 
  type : 'text', 
  text : str_HTML 
}

La fenêtre contextuelle de notre couche des pharmacies affiche désormais la liste des 3 pharmacies les plus proches (à vol d'oiseau).
Il ne vous reste plus qu'à personnaliser cette expression pour l'adapter à vos données et à vos besoins.

Bonne route sur ArcGIS Online !

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

Conseils & Astuces ArcGIS Online - N°189

N° 189 - Utiliser Arcade pour afficher les entités adjacentes dans vos fenêtres contextuelles

Dans la majorité des cas, vous configurer des fenêtres contextuelles pour afficher les informations de l'entité cliquée sur la carte. Cependant, avec le langage d'expression Arcade, vous pouvez aller plus loin en interrogeant les autres entités de votre couche (ou même d'autres couches de la carte). Cette capacité permet par exemple de réaliser des recherches géographiques pour obtenir des informations issues d'autres entités de la même couche ou d'une autre couche de la carte. Par exemple, vous cliquez sur une commune et vous souhaitez afficher la liste des communes limitrophes.

Dans cet article je vous propose de prendre cet exemple pour vous expliquer comment afficher la liste des communes adjacentes (et les valeurs de population associées) à l'aide d'une expression Arcade.

Après avoir ajouté la couche des communes dans la carte, nous allons ajouter un bloc de contenu "Arcade" dans la fenêtre contextuelle de cette dernière.
Pour plus de clarté, nous donnons un titre explicite "Communes limitrophes et population" à cette nouvelle expression Arcade.

L'expression Arcade à saisir dans l'éditeur est alors la suivante :

Expects($feature,"*")

// Nom du champ contenant le nom des entités
var field_name = "NOM"
// Nom du champ contenant la valeur supplémentaire souhaitée
var field_value = "POPULATION"

// Récupération de la géométrie surfacique de l'entité
var my_polygon = Geometry($feature)
// On recherche les entités qui intersectent cette géométrie
var result_featureset = Intersects($layer,my_polygon)

// On commence à construire la chaîne HTML pour le contenu 
// de la fenêtre contextuelle
var str_HTML = "Les communes limitrophes de <b>" + 
               Text($feature[field_name]) + 
               " (" + Text($feature[field_value]) + 
               " hab.)</b> sont les suivantes :<br/>"

// On démarre une liste à puces HTML
str_HTML += "<ul>"

//On boucle sur chaque entité limitrophe
for (var feat in result_featureset){
  // On retire l'entité elle-même de la liste
  if(Text(feat[field_name]) != Text($feature[field_name])){
    // On ajoute la ligne pour chaque entité limitrophe
    str_HTML += "<li>" + Text(feat[field_name]) + 
                " (" + Text(feat[field_value]) + 
                " hab.)</li><br/>"
  }
}

// On termine la liste à puces HTML
str_HTML += "</ul>"

// On renvoie la chaîne HTML
return { 
	type : 'text', 
	text : str_HTML 
}

Notre couche de communes affiche désormais le nom et la population de la commune cliquée ainsi que le nom et la population des communes adjacentes.
Il ne vous reste plus qu'à personnaliser cette expression pour l'adapter à vos données et à vos besoins.

Pour aller plus loin...

En bonus, vous pourrez modifier l'expression Arcade en intégrant un tableau et une fonction de tri afin de lister les communes par ordre croissant de population :

Expects($feature,"*")

// Fonction de tri de tableau par ordre croissant
function compareValeurs(a,b){
  if (a[field_value]<b[field_value])
    return -1;
  if (a[field_value]>b[field_value])
    return 1;
  return 0;
}

// Nom du champ contenant le nom des entités
var field_name = "NOM"
// Nom du champ contenant la valeur supplémentaire souhaitée
var field_value = "POPULATION"

// Récupération de la géométrie surfacique de l'entité
var my_polygon = Geometry($feature)
// On recherche les entités qui intersectent cette géométrie
var result_featureset = Intersects($layer,my_polygon)

// On boucle sur chaque entité limitrophe pour construire un tableau
// afin de pouvoir ensuite faire un tri
var result_array = []
for (var feat in result_featureset){
  // On retire l'entité elle-même de la liste
  if(Text(feat[field_name]) != Text($feature[field_name])){
    // On ajoute la ligne au tableau
    var d = {}
    d[field_name] = feat[field_name] 
    d[field_value] = feat[field_value]
    Push(result_array,d)
  }
}

// On trie le tableau par ordre croissant sur la population
result_array = Sort(result_array,compareValeurs)

// On commence à construire la chaîne HTML pour le contenu 
// de la fenêtre contextuelle
var str_HTML = "Les communes limitrophes de <b>" + 
               Text($feature[field_name]) + 
               " (" + Text($feature[field_value]) + 
               " hab.)</b> sont les suivantes :<br/>"


// On démarre une liste à puces HTML
str_HTML += "<ul>"

//On boucle sur chaque entité limitrophe
for (var i in result_array){
  // On ajoute la ligne pour chaque entité limitrophe
  str_HTML += "<li>" + Text(result_array[i][field_name]) + 
              " (" + Text(result_array[i][field_value]) + 
              " hab.)</li><br/>"
  }

// On termine la liste à puces HTML
str_HTML += "</ul>"

// On renvoie la chaîne HTML
return { 
  type : 'text', 
  text : str_HTML 
}

La fenêtre contextuelle affiche maintenant la liste des communes adjacentes par ordre croissant de population :

Bonne route sur ArcGIS Online !

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

Conseils & Astuces ArcGIS Online - N°187

N°187 - Afficher une barre graphique de statistiques de l'ensemble des entités de la couche dans des fenêtres contextuelles avec Arcade

Dans mon article précédent, je vous donnais un exemple d'expression Arcade pour afficher un tableau de statiques et permettre ainsi à l'utilisateur de comparer la valeur de l'entité courante à l'ensemble des valeurs des entités de la couche. La présentation en tableau est simple à comprendre pour un large public mais on peut envisager une représentation plus scientifique et plus graphique en intégrant notamment les informations liées à l'écart type de la série de valeurs de l'ensemble du jeu de données. Dans cet article, je vous propose une expression Arcade qui affiche une barre graphique reprenant la valeur de l'entité courante ainsi que les indicateurs statistiques : min, max, moyenne et écart-type, sur l'ensemble du jeu de données.

Reprenons l'exemple d'une couche d'enseignes de jardinage sur le département de la Manche qui contient des champs avec les chiffres d'affaire 2022 pour chaque magasin. Nous souhaitons pouvoir consulter le chiffre d'affaire de chaque magasin mais également pouvoir le comparer avec le chiffres d'affaire total de l'ensemble des magasins.

Voici comment vous pouvez utiliser Arcade pour afficher les statistiques souhaitées (min, max, moyenne, total, ...), dans la fenêtre contextuelle, en utilisant un tableau.

Après avoir ajouté la couche des jardineries dans la carte, vous afficherez l'interface de définition des fenêtres contextuelles. Vous supprimerez la liste des champs proposée par défaut et vous ajouterez une expression Arcade.
Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Comparaison du chiffre d'affaire 2022".

Vous saisirez ensuite l'expression Arcade suivante :

Expects($feature, "*")

// Nom du champ contenant les valeurs
var nom_champ = "CA2022"
// Récupération de la valeur de l'entités courante
var valeur = $feature[nom_champ]
// Largeur de la barre graphique
var largeur_barre = 400
// Titre du graphique
var titre = "Chiffre d'affaire 2022 :"
// Unités des valeurs présentées
var unite = "€"
// Couleur principale de la barre graphique
var couleur_barre ="#EBF5FB"
// Couleur pour la zone de l'intervalle d'un ecart-type autour de la moyenne
var couleur_zone_ecart_type ="#AED6F1"

// Calcul des statistiques
var valeur_min = Min($layer,nom_champ)
var valeur_max = Max($layer,nom_champ)
var valeur_moy = Mean($layer,nom_champ)
var valeur_std = Stdev($layer,nom_champ)

// Calcul des largeurs (en pixels) des différentes zones de la barre graphique
var plage = valeur_max - valeur_min
var plage_valeur1 = ((valeur-valeur_min)/plage) * largeur_barre
var plage_valeur2 = ((valeur_max-valeur)/plage) * largeur_barre
var plage_std1 = ((valeur_moy-valeur_std-valeur_min)/plage) * largeur_barre
var plage_std2 = ((valeur_max-(valeur_moy+valeur_std))/plage) * largeur_barre
var plage_std = largeur_barre-plage_std1-plage_std2


// Construction de la chaîne HTML qui présentera les informations
var strHTML = "<span style='font-family: arial;font-size: 10pt;'>"
strHTML += Titre
strHTML +=  "</span><br/><br/>"

// Premier tableau HTML contenant min, moyenne et max
strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>"
strHTML += "<tr style='height:10px'><td style='width:"+Text(plage_std1+40) + 
           "px;text-align: left;font-family: arial;font-size: 8pt;'>Min:<br/>" +
           Text(valeur_min) + " " + Text(unite) + "</td>"
strHTML += "<td colspan='2' style='width:"+Text((plage_std)-80) + 
           "px;text-align: center;font-family: arial;font-size: 8pt;'>Moy:<br/>" +
           Text(valeur_moy,'#')+ " " + Text(unite) + "</td>"
strHTML += "<td style='width:"+Text(plage_std2+40) +
           "px;text-align: right;font-family: arial;font-size: 8pt;'>Max:<br/>" +
           Text(valeur_max)+ " " + Text(unite) + "</td>"
strHTML += "</tr>"
strHTML +="</table>"

// Second tableau HTML contenant la barre du graphique
strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>"
strHTML += "<tr style='height:20px'>"
strHTML += "<td style='border-left: 1px solid #000;width:"+ Text(plage_std1)+"px;background-color: " + couleur_barre + "'/>"
strHTML += "<td style='width:"+Text(plage_std/2) + 
           "px;text-align: center;font-family: arial;font-size: 8pt;background-color: " + couleur_zone_ecart_type + ";" +
           "border-right: 1px solid #000;'>-&#x3C3;</td>"
strHTML += "<td style='width:"+Text(plage_std/2) + 
           "px;text-align: center;font-family: arial;font-size: 8pt;background-color: " + couleur_zone_ecart_type + "'>" + 
           "+&#x3C3;</td>"
strHTML += "<td style='border-right: 1px solid #000;width:"+Text(plage_std2)+"px;background-color: " + couleur_barre + "'/>"
strHTML += "</tr>"
strHTML +="</table>"

// Troisième tableau HTML pour afficher le curseur de la valeur courante
var alignement_fleche_valeur ="center"
if(plage_valeur1==0){alignement_fleche_valeur ="left"}
if(plage_valeur2==0){alignement_fleche_valeur ="right"}
strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>"
strHTML += "<tr style='height:10px'>"
if(plage_valeur1>0){
  strHTML += "<td style='width:"+Text(plage_valeur1-1)+"px'/>"
  }
strHTML += "<td style='width:2px;text-align: " + alignement_fleche_valeur + 
            ";font-family: arial;font-size: 12pt;'><b>&#10072;</b></td>" //&#8593;
if(plage_valeur2>0){
  strHTML += "<td style='width:"+Text(plage_valeur2-1)+"px'/>"
  }

strHTML += "</tr>"
strHTML +="</table>"

// Quatrième tableau pour afficher la valeur courante
var alignement_texte_valeur ="center"
if(plage_valeur1<50){alignement_texte_valeur ="left"}
if(plage_valeur2<50){alignement_texte_valeur ="right"}
strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>"
strHTML += "<tr style='height:10px'>"
if(plage_valeur1>50){
  strHTML += "<td style='width:"+Text(plage_valeur1-50)+"px'/>"
  }
strHTML += "<td style='width:100px;text-align: " + alignement_texte_valeur + 
            ";font-family: arial;font-size: 8pt;'><b>" +
            Text(valeur,'#.##')+ " " + Text(unite) + "</b></td>"
if(plage_valeur2>50){
  strHTML += "<td style='width:"+Text(plage_valeur2-50)+"px'/>"
  }
strHTML += "</tr>"
strHTML +="</table>"

// On renvoie la chaîne HTML pour remplir la fenêtre contextuelle
return { 
	type : 'text', 
	text : strHTML
}

Votre carte affiche désormais un tableau avec l'information sur la valeur du chiffre d'affaire du magasin mais également le chiffre d'affaire minimum, maximum, moyen et total de l'ensemble du jeu de données. Le tableau intègre aussi le nombre total d'entités et la part du chiffre d'affaire par rapport au total. On notera que si la couche possède un ensemble de définition, les statistiques ne seront calculées que sur les entités filtrées.
Vous pouvez maintenant modifier le nom du champ, le titre, les couleurs, ... et même le code HTML pour personnaliser l'aspect de cette barre graphique de statistiques.

Représenter plusieurs attributs:

Si vous souhaitez afficher cette barre de statistiques pour plusieurs champs de votre couche, plutôt que de rédiger une expression Arcade unique, je vous recommande d'insérer plusieurs blocs Arcade en dupliquant celui que vous venez de réaliser.

Après avoir modifié le nom du champ, le titre et les couleurs, vous pourrez obtenir ce type de rendu pour votre fenêtre contextuelle :

Bonne route sur ArcGIS Online !

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

Conseils & Astuces ArcGIS Online - N°186

N° 186 - Afficher des informations statistiques sur l'ensemble des entités de la couche dans des fenêtres contextuelles avec Arcade

Les fenêtres contextuelles permettent le plus souvent d'afficher les valeurs des attributs de votre entités. Cependant, dans certains cas, il est également pertinent de comparer certaines de ces valeurs aux valeurs des autres entités de la couche. Vous pouvez avoir besoin, par exemple, de comparer le nombre d'élèves d'une école avec le total (ou la moyenne) des autres écoles du département. Autre exemple, vous disposez d'une couche contenant le nombre de pharmacies pour chaque quartier et vous souhaitez comparer ce nombre au nombre total de pharmacie sur votre territoire. Pour calculer et afficher ce type de statistique, il est possible d'utiliser une expression Arcade calculant ces indicateurs (minimum, maximum, moyenne, ...) sur l'ensemble de la couche et de générer la chaîne HTML qui présentera ces statistiques.

Prenons l'exemple d'une couche d'enseignes de jardinage sur le département de la Manche qui contient des champs avec les chiffres d'affaire 2022 pour chaque magasin. Nous souhaitons pouvoir consulter le chiffre d'affaire de chaque magasin mais également pouvoir le comparer avec le chiffres d'affaire total de l'ensemble des magasins.

Voici comment vous pouvez utiliser Arcade pour afficher les statistiques souhaitées (min, max, moyenne, total, ...), dans la fenêtre contextuelle, en utilisant un tableau.

Après avoir ajouté la couche des jardineries dans la carte, vous afficherez l'interface de définition des fenêtres contextuelles. Vous supprimerez la liste des champs proposée par défaut et vous ajouterez une expression Arcade.
Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Comparaison du chiffre d'affaire 2022".

Vous saisirez ensuite l'expression Arcade suivante :

Expects($feature, "*")

// Nom du champ à représenter
var nom_champ = "CA2022"
// Récupération de la valeur de l'entité courante
var valeur = $feature[nom_champ]

// Paramètre de représentation du tableau
var titre = "Chiffre d'affaire 2022"
var couleur_fond_titre = "#0B680C"
var couleur_texte_titre = "#ffffff"
var couleur_fond_valeur = "#9DC59D"
var couleur_texte_valeur = "#000000"
var unite = "€"
var largeur_tableau=250

// Récupération des statistiques sur l'ensemble de la couche
var valeur_min = Min($layer,nom_champ)
var valeur_max = Max($layer,nom_champ)
var valeur_moy = Mean($layer,nom_champ)
var valeur_count = Count($layer)
var valeur_sum = Sum($layer,nom_champ)

// Construction de la chaîne HTML
var strHTML = ""
strHTML += "<table style='width: "+Text(largeur_tableau) +
           "px;border-collapse: collapse;font-family: arial;font-size: 10pt;'>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_titre+"'><td colspan='2' style='color: " +
           couleur_texte_titre+"'><b>"+titre+"</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_valeur+";color: " +
           couleur_texte_valeur+"'><td><b>Valeur : </b></td><td><b>" + 
           Text(valeur) + " " + unite + "</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Minimum : </td><td>" + 
           Text(valeur_min) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Maximum : </td><td>" + 
           Text(valeur_max) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Nombre d'entités : </td><td>" + 
           Text(valeur_count) + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Moyenne : </td><td>" + 
           Text(valeur_moy,"#.##") + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Total : </td><td>" + 
           Text(valeur_sum) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Part du total : </td><td>" +
           Text(100*valeur/valeur_sum,"#.##") + "%</td></tr>"
strHTML +="</table>"

// On renvoie la chaîne HTML pour remplir la fenêtre contextuelle
return { 	type : 'text', 
	text : strHTML
}

Votre carte affiche désormais un tableau avec l'information sur la valeur du chiffre d'affaire du magasin mais également le chiffre d'affaire minimum, maximum, moyen et total de l'ensemble du jeu de données. Le tableau intègre aussi le nombre total d'entités et la part du chiffre d'affaire par rapport au total. On notera que si la couche possède un ensemble de définition, les statistiques ne seront calculées que sur les entités filtrées.
Vous pouvez maintenant modifier le nom du champ, le titre, les couleurs, ... et même le code HTML pour personnaliser l'aspect de ce tableau de statistiques.

En bonus:

Dans certains cas, peut-être aurez-vous besoin de comparer la valeur de votre entité à un nombre restreint d'entités recherchées dans un rayon donné. Imaginez que vous gérez une couche des établissements hoteliers et que vous souhaitez connaitre ce que représente la capacité de chaque hotel par rapport à tous ceux se trouvant dans un rayon de 5 km, l'expression Arcade évoluera alors comme ceci :

Expects($feature, "*")

// Nom du champ à représenter
var nom_champ = "Capacite_Chambres"
// Rayon de recherche en kilomètres
var rayon_recherche = 5
// Récupération de la valeur de l'entité courante
var valeur = $feature[nom_champ]

// Paramètre de représentation du tableau
var titre = "Capacité hotelière 2021"
var couleur_fond_titre = "#521d80"
var couleur_texte_titre = "#ffffff"
var couleur_fond_valeur = "#bf8deb"
var couleur_texte_valeur = "#000000"
var unite = "chambres"
var largeur_tableau=300

// Calcul de la géométrie de la zone tampon pour réaliser la recherche 
var zone_tampon = Buffer($feature, rayon_recherche, 'kilometer')

// Sélection des entités qui intersectent la zone tampon
var selection = Intersects($layer, zone_tampon)

// Récupération des statistiques sur la sélection
var valeur_min = Min(selection,nom_champ)
var valeur_max = Max(selection,nom_champ)
var valeur_moy = Mean(selection,nom_champ)
var valeur_count = Count(selection)
var valeur_sum = Sum(selection,nom_champ)

// Construction de la chaîne HTML
var strHTML = ""
strHTML += "<table style='width: "+Text(largeur_tableau) +
           "px;border-collapse: collapse;font-family: arial;font-size: 10pt;'>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_titre+"'><td colspan='2' style='color: " +
           couleur_texte_titre+"'><b>"+titre+"</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_valeur+";color: " +
           couleur_texte_valeur+"'><td><b>Valeur : </b></td><td><b>" + 
           Text(valeur) + " " + unite + "</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Minimum : </td><td>" + 
           Text(valeur_min) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Maximum : </td><td>" + 
           Text(valeur_max) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Nombre d'entités dans" +
           "<br/>un rayon de " +Text(rayon_recherche)+" km. : </td><td>" + 
           Text(valeur_count) + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Moyenne : </td><td>" + 
           Text(valeur_moy,"#.##") + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Total : </td><td>" + 
           Text(valeur_sum) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Part du total : </td><td>" +
           Text(100*valeur/valeur_sum,"#.##") + "%</td></tr>"
strHTML +="</table>"

// On renvoie la chaîne HTML pour remplir la fenêtre contextuelle
return { 
	type : 'text', 
	text : strHTML
}

La fenêtre contextuelle de la couche de mes hotels ressemblera alors à ceci :

Bonne route sur ArcGIS Online !

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

Inscription à : Articles ( Atom )

Conseils & Astuces ArcGIS Online - N°197

Conseils & Astuces ArcGIS Online - N°196

Conseils & Astuces ArcGIS Online - N°191

Conseils & Astuces ArcGIS Online - N°190

Conseils & Astuces ArcGIS Online - N°189

Conseils & Astuces ArcGIS Online - N°187

Conseils & Astuces ArcGIS Online - N°186

Archives du blog

Articles les plus consultés

HTML_arcorama_2

Visiteurs actuellement connectés

Suivre arcOrama - RSS et email

Suivre arcOrama par email :

Qui êtes-vous ?