Conseils & Astuces ArcGIS Online - N°169
N° 169 - Utiliser Arcade et une API tiers pour ajouter un QR Code dans
vos fenêtres contextuelles
Si vous avez besoin de présenter une URL dans vos fenêtres contextuelles pour
permettre accès à une ressource web, vous pouvez simplement utiliser la notion
de lien HTML. Une option intéressante consiste à proposer, en plus, un QR
Code. Cela permet, par exemple, de pouvoir le scanner avec son téléphone en
restant dans la carte qui s'affiche sur votre écran d'ordinateur.
Dans cet exemple, nous disposons d'une couche d'entités sur les campings sur
l'Ile de Ré dans laquelle un attribut contient l'url d'une photo ainsi que
l'url du site web. L'objectif est de présenter la photo, le QR Code du site
ainsi qu'un lien HTML classique dans la fenêtre contextuelle de notre
couche. Etant donné que les QR Codes ne sont pas des éléments disponibles en
standard dans les fenêtres contextuelles ArcGIS, nous utiliserons donc une
API tiers pour les générer. Voici donc comment nous allons procéder :
-
Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrez la
carte web contenant la couche d'entités. Par défaut, la fenêtre
contextuelle présente la liste des différents attributs. Si certaines
valeurs sont des url web correctement formatées, un lien permet d'ouvrir
cette url.
-
Dans la zone de configuration des fenêtres contextuelles la couche, vous
pouvez supprimer l'élément "Liste de champs" proposé par défaut puis
ajouter un élément de contenu Arcade. Ce dernier nous permettra de
réaliser les calculs statistiques nécessaires et configurer un rendu
personnalisé (en HTML) de nos informations.
-
Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes
par l'expression Arcade ci-dessous :
On notera l'usage de l'API QuickChart qui permet de générer différents types de diagrammes à partir d'une url et une série de paramètres. Celle-ci est basée sur des librairies Open Source que vous pouvez installer sur votre propose serveur ou utiliser en ligne de manière gratuite (avec une limite sur le nombre de requêtes). Une version payante permet un accès illimité.// On précise les attributs dont on a besoin dans l'expression Arcade Expects($feature, ["Photo","Site_Web"]) // Récupération de l'url du site web var url_site = $feature.Site_Web // Construction de l'url sur l'API QuickChart pour la génération du QR Code // On se base sur l'exemple de diagramme suivant : https://tinyurl.com/43zjzkuf var url_QRCode = "https://quickchart.io/qr?text=" + url_site // Récupération de l'url de la photo var url_photo = $feature.Photo // On construit la chaîne HTML à l'aide d'un élément HTML <table> var HTML = `<table> <tr> <td width='70%'><img src='${url_photo}'/></td> <td width='30%' style='text-align: center'> <img src='${url_QRCode}'/><br/> <a style='font-size: 7pt' href='${url_site}'>Accéder au site</a> </td> </tr> </table>` // On renvoie la chaîne HTML pour le contenu de notre fenêtre contextuelle return { type : 'text', text : HTML }
On notera également l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée.
-
Vous pouvez maintenant cliquer sur le bouton "Terminé" pour
valider l'expression.
-
La fenêtre contextuelle s'affiche désormais avec la photo, le QR Code et
le lien d'accès au site en-dessus.
J'espère que cet exemple vous inspirera et que vous pourrez l'adapter à
vos cas d'usage.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS
Online, cliquez sur ce lien
0 comments :
Enregistrer un commentaire