Saviez-vous que vous pouvez utiliser HTML dans votre projet Mergin Maps pour permettre aux utilisateurs sur le terrain d'accéder à des informations ou à d'autres documents liés à votre enquête ? Dans cet article, nous allons vous montrer quelques façons d'utiliser le HTML pour améliorer le déroulement de votre enquête. Vous pouvez même utiliser HTML hors ligne pour créer des liens vers d'autres fichiers stockés dans le dossier du projet. Poursuivez votre lecture pour en savoir plus !
Naviguer vers des points avec Google Maps
L'une des meilleures utilisations du HTML dans votre projet Mergin Maps consiste à créer un lien dans le formulaire du projet qui, lorsqu'il est cliqué, ouvre l'emplacement du point dans Google Maps. L'utilisateur peut alors choisir d'utiliser la fonction "Naviguer" de Google Maps pour trouver l'itinéraire jusqu'au point. Cette fonction peut s'avérer utile si les utilisateurs essaient de se rendre à différents points d'enquête éloignés les uns des autres, ou pour les aider à se rendre sur le site de l'enquête.
Pour créer le lien Google Maps dans votre formulaire :
1. Ouvrez les propriétés de la couche contenant les points vers lesquels les utilisateurs naviguent.
2. Allez dans l'onglet "Gestion des champs" et cliquez sur le bouton "Calculateur de champs".
3. Sélectionnez les options "Créer un nouveau champ" et "Créer un champ virtuel".
4. Donnez un nom au champ et définissez le paramètre "Output field type" (type de champ de sortie) sur "Text (string)" (texte (chaîne))
5. Placez le script HTML suivant dans la boîte d'expression et remplacez les valeurs EPSG en surbrillance par le CRS de votre projet :
'<a href="'||'https://www.google.co.uk/maps/place/' || to_string( y(transform( $geometry, 'EPSG:27700', 'EPSG:4326'))) || ',' || to_string( x( transform( $geometry, 'EPSG:27700', 'EPSG:4326'))) || '">Open Google Map</a>'
6. Cliquez sur "OK
7. Allez dans l'onglet Form Builder et placez le champ virtuel dans la mise en page du formulaire.
8. Utilisez les options suivantes pour le widget de champ :
- Définir le type de widget à Édition de texte
- Désactiver l'édition
- Activer le texte multiligne et le HTML
- Cliquez sur "OK" dans les propriétés de la couche, puis enregistrez et synchronisez votre projet.
Désormais, lorsque les utilisateurs ouvriront la fonctionnalité sur le formulaire d'enquête, ils verront un lien avec "Ouvrir Google Map" sur lequel ils pourront cliquer et qui ouvrira Google Maps sur leur appareil, ou dans le navigateur si Google Maps n'est pas installé, et ils pourront alors utiliser ce lien pour naviguer jusqu'à l'emplacement.
Fournir plus d'informations aux géomètres
Il peut arriver que des géomètres sur le terrain aient besoin d'identifier certains types d'éléments tels que des plantes, des formations géologiques ou des espèces animales. Il peut être utile aux géomètres d'avoir accès à des informations supplémentaires pour les aider à situer le contexte de ce qu'ils étudient.
Dans cet exemple d'enquête sur l'habitat des oiseaux, nous allons vous montrer comment fournir à l'enquêteur un lien vers plus d'informations sur une espèce d'oiseau en fonction de l'espèce qu'il a sélectionnée dans une liste. Le lien changera au fur et à mesure que l'enquêteur modifiera sa sélection, sans qu'il soit nécessaire d'enregistrer l'entrée. Cela lui permettra de consulter les informations pour confirmer sa sélection avant d'appuyer sur le bouton "Enregistrer" et contribuera à réduire le nombre d'erreurs dans l'enquête.
Préparer les données
Tout d'abord, nous devons nous assurer que les données de notre enquête sont configurées de manière à ce que la fonction de lien fonctionne. Nous aurons besoin d'une table de recherche avec les espèces d'oiseaux qui feront partie de l'enquête, ainsi que d'un lien vers plus d'informations sur chaque espèce. Dans notre exemple, nous avons un simple tableau CSV avec les champs suivants :
- id : un champ entier avec un numéro d'identification pour chaque ligne
- espèces : champ de texte contenant le nom commun de chaque espèce d'oiseau
- lien : champ contenant un lien vers une page du site web de la RSPB consacrée à l'espèce.
Voici un exemple des données du tableau :
Dans notre couche d'enquête, nous avons un champ de texte correspondant à l'espèce qui a la configuration suivante :
- Type de widget : Relation de valeur
- Couche : espèces (il s'agit de la couche de notre table de recherche)
- Colonne clé : nom
- Colonne de valeur : nom
Mise en place du champ virtuel
Maintenant que nous avons configuré nos tables de couches, nous allons créer un champ virtuel sur la couche d'enquête pour le lien externe. Suivez exactement les mêmes étapes pour créer le champ virtuel que dans l'exemple précédent, mais donnez à ce champ un nom différent et utilisez l'expression suivante pour créer le champ :
'<a href="'||attribute(get_feature('species','name',"species"),'link')||'">Species Information</a>'
Il ne vous reste plus qu'à ajouter le champ virtuel à la présentation de votre formulaire et l'utilisateur pourra cliquer sur le lien "Informations sur les espèces" dans le formulaire pour obtenir plus d'informations sur l'espèce sélectionnée.
Ouvrir les documents stockés dans le dossier du projet
Vous pouvez également utiliser HTML pour ouvrir des documents PDF ou autres stockés dans le dossier du projet. Cela peut également fonctionner sans connexion de données puisque les fichiers sont stockés dans le répertoire du projet et seront ensuite téléchargés sur l'appareil de l'utilisateur. Pour créer un lien vers n'importe quel fichier du répertoire du projet, vous pouvez utiliser des liens relatifs comme valeur par défaut pour un champ de texte avec l'option HTML activée en utilisant l'expression suivante :
project://<path_to_file_within_project>
Reprenons l'exemple précédent de l'enquête sur les oiseaux, afin que les enquêteurs puissent accéder aux informations sur les oiseaux lorsqu'ils travaillent hors ligne.
Pour configurer les documents dans le projet :
1. Créez un dossier dans le répertoire du projet pour les PDF, nous utiliserons '/species' dans notre exemple de projet.
2. Assurez-vous que les noms des fichiers PDF correspondent aux entrées de la colonne "nom" de la table de recherche des espèces.
3. Créez un champ virtuel en utilisant les mêmes paramètres que précédemment, en utilisant le nom "offline_id" et l'expression suivante :
'<a href="'||'project://species/' || "species" || '.pdf">Offline Info</a>'
4. Ajouter le champ virtuel "offline_id" à la présentation du formulaire
L'utilisateur peut maintenant accéder aux données hors ligne stockées dans le projet en cliquant sur le lien "Informations hors ligne", ce qui ouvrira le PDF correspondant.
Continuer à apprendre
Si ce tutoriel vous a été utile, vous pouvez également consulter notre documentation pour découvrir d'autres utilisations de HTML dans votre projet d'enquête, telles que la personnalisation du panneau de prévisualisation et la fourniture d'instructions ou de conseils aux utilisateurs sur le terrain. Nous vous remercions d'avoir utilisé Mergin Maps et nous vous invitons à consulter nos prochains articles contenant des conseils et des bonnes pratiques.