Skip to main content

Sélections de la rédaction

Comment créer des séries de cartes à l’aide d’ArcGIS Experience Builder

Published Date

Avec le retrait de Story Map Series, vous vous demandez peut-être comment recréer un modèle similaire. Voici ArcGIS Experience Builder, un outil flexible qui vous permet de concevoir facilement des pages dynamiques et interactives. En combinant des pages, des boutons et des éléments de texte, vous créez une expérience attrayante qui guide les utilisateurs de manière harmonieuse à travers vos cartes et vos données, tout comme Map Series, mais avec encore plus de personnalisation au bout des doigts.

Dans ce billet de blogue, nous allons montrer comment configurer deux cartes interactives avec un texte descriptif dans ArcGIS Experience Builder afin d’améliorer l’interaction et la clarté pour vos utilisateurs.

1.      Configurer la page 1 (page d’accueil) :

Commencez par créer une nouvelle application Experience Builder. Sur la page d’accueil, créez un volet de barre latérale et ajoutez deux widgets de bouton sur la gauche. Nommez le premier bouton « Carte 1 » et le second « Carte 2 ».

Interface d’ArcGIS Experience Builder montrant deux widgets de bouton intitulés « Carte 1 » et « Carte 2 » dans une barre latérale gauche, séparée par un curseur de menu latéral d’une zone grise vide sur la droite

Création de deux boutons des cartes 1 et 2 sur la page d’accueil

Cliquez sur l’onglet Page à gauche, dupliquez la page d’accueil deux fois, créant ainsi trois pages au total. Renommez la page d’accueil « Page 1 ».

Interface d’ArcGIS Experience Builder montrant le volet « Page » avec trois pages affichées : « Page 1 », « Page 2 » et « Page 3 ». La « Page 1 » est surlignée en bleu et comporte une icône de maison. Un menu contextuel est ouvert à côté de l’icône d’accueil, affichant les options : Rename (renommer), Set icon (régler icône), Duplicate (dupliquer) et Delete (supprimer).

Création de trois pages fondées sur la page d’accueil

2.      Configurer les boutons à la page 1 :

Dans le volet de configuration de bouton de la « Carte 1 », cliquez sur Set Link (régler le lien) et liez le bouton à la page 2. Sélectionnez Open (ouvrir) in App window (fenêtre d’application).

Répétez cette opération pour le deuxième bouton « Carte 2 » et reliez-le à la page 3.

Interface d’ArcGIS Experience Builder montrant le volet de paramètres « Carte 2 » à droite et le volet « Set link » (régler le lien) à gauche, qui s’ouvre après avoir sélectionné « Set link » (régler le lien) dans le volet « Carte 2 ». Dans le volet « Carte 2 », sous l’onglet « Content » (contenu), les options comprennent la connexion aux données, la définition d’un lien, l’ajout d’une infobulle, d’un texte personnalisé (par défaut « Carte 2 »), la sélection d’une icône, etc. Dans le volet « Set link » (régler le lien), l’utilisateur peut créer un lien vers « Page », sélectionner « Page 2 » avec des options d’ouverture dans « App window » (fenêtre d’application), « Top window » (fenêtre supérieure) ou « New window » (nouvelle fenêtre).

Définir le lien du bouton vers la page 2

3.      Configurer la page 2 :

Passez à la page 2, insérez votre première carte sur le côté droit et ajoutez un texte entre les boutons « Carte 1 » et « Carte 2 » pour fournir une description de la première carte.

Interface cartographique dans Experience Builder affichant un fond de carte Esri comme première carte. Le volet de gauche comprend des boutons intitulés « Carte 1 » et « Carte 2 », ainsi qu’une section de description de la « Carte 1 » située juste en dessous du bouton « Carte 1 ».

Configuration de la page 2 avec la première carte et sa description

 

Configurez le bouton « Carte 1 » pour qu’il renvoie à la page actuelle et le bouton « Carte 2 » pour qu’il renvoie à la page 3. Ajoutez un bouton « Go Back to Overview Page » (revenir à la page d’accueil) en bas à gauche, qui renvoie à la page 1.

Comme dans l’image précédente, l’interface cartographique d’Experience Builder affiche un fond de carte Esri comme première carte. Le volet de gauche comprend des boutons intitulés « Carte 1 » et « Carte 2 », ainsi qu’une section de description de la « Carte 1 » située juste en dessous du bouton « Carte 1 ». En outre, un bouton « Go Back to Overview » (revenir à la page d’accueil) se trouve en bas du volet de gauche.

Configuration de la page 2 et ajout du lien vers la page Overview (page d’accueil)

4.      Configurer la page 3 :

Passez à la page 3, insérez votre deuxième carte sur le côté droit et ajoutez une zone de texte sous le bouton « Carte 2 » pour la description de la carte.

Configurez le bouton « Carte 1 » pour qu’il renvoie à la page 2 et le bouton « Carte 2 » pour qu’il renvoie à la page actuelle.

Ajoutez un bouton « Go Back to Overview Page » (revenir à la page d’accueil) en bas à gauche, qui renvoie à la page 1.

Comme dans l’image précédente, cette interface cartographique dans Experience Builder affiche un fond de carte Esri, qui montre la deuxième carte. Le volet de gauche comprend des boutons intitulés « Carte 1 » et « Carte 2 », avec une section de description pour la « Carte 2 » située sous le bouton « Carte 2 ». En outre, un bouton « Go Back to Overview » (revenir à la page d’accueil) se trouve en bas du volet de gauche.

Configuration de la page 3 et ajout du lien vers la page Overview (page d’accueil)

5.      Résultat final :

La vidéo montre l’interface d’Experience Builder avec deux boutons intitulés « Carte 1 » et « Carte 2 » sur le côté gauche. Lorsque l’on clique sur « Carte 1 », une carte s’affiche sur le côté droit de l’écran. De même, lorsque l’on clique sur « Carte 2 », le contenu du côté droit est mis à jour pour afficher une autre carte. L’interaction met en évidence le changement dynamique des vues de carte en fonction des réglages de l’utilisateur.

Vidéo démontrant le résultat dans Experience Builder

Plus de renseignements :

Ajouter et connecter des widgets dans Experience Builder.

Autre solution : mettez à niveau vos classeurs classiques Map Series en utilisant la nouvelle application Portfolio.

Je remercie tout particulièrement Yalan Yang de l’assistance technique, qui a participé à la rédaction de ce billet de blogue. 

Ce billet a été écrit en anglais par Cocoa Ding et peut être consulté ici.