Ouvrir l’expérience
Pour commencer, vous allez ouvrir l’expérience créée dans le didacticiel précédent.
- Si vous avez terminé le didacticiel précédent, Créer une expérience Web avec deux cartes, rouvrez l’expérience Estuaire de l’American River et passez à la section suivante.
Remarque :
Si vous ne savez pas comment rechercher l’expérience, ouvrez ArcGIS Experience Builder et connectez-vous avec votre compte ArcGIS. Votre expérience figure sur la page Recent experiences (Expériences récentes).
- Si vous n’avez pas suivi le didacticiel précédent, ouvrez ArcGIS Experience Builder et connectez-vous avec votre compte ArcGIS
Remarque :
Si vous ne disposez pas d’un compte ArcGIS, consultez les options d’accès aux logiciels.
La page Recent experiences (Expériences récentes) apparaît.
- Cliquez sur le bouton Create new (Créer).
- Cliquez sur l’onglet ArcGIS Online.
- Dans la barre de recherche, saisissez estuary template 1.
- Sur la fiche American River Marine Estuary Template 1, cliquez sur le bouton Create (Créer).
La zone d’affichage apparaît avec l’expérience créée jusqu’ici. Elle comprend un widget Map (Carte) avec deux cartes, un en-tête et un titre et vous permet de passer d’une carte à l’autre.
- Dans la barre d’outils du générateur, cliquez sur le titre et renommez-le en Estuaire de l’American River.
Ajouter un widget Legend (Légende) et un widget Column (Colonne)
Toutes les cartes n’ont pas besoin de légendes. Par exemple, si tout ce qui est visible sur la carte est étiqueté ou évident, la légende est redondante. Toutefois, les deux cartes de cette application Web requièrent des légendes. Vous allez les ajouter à la mise en page à l’aide d’un widget Legend (Légende) pour que les utilisateurs puissent correctement interpréter la carte. Vous ajouterez également un autre widget de mise en page, dans le cas présent, une colonne.
- Si le volet Insert widget (Insérer un widget) n’est pas visible, cliquez sur le bouton Insert (Insérer) dans la barre d’outils.
- Dans le volet Insert widget (Insérer un widget), faites glisser le widget Legend (Légende) depuis la section Map centric (Cartographique) vers la partie vierge du widget Row (Ligne).
Le nouveau widget remplit la totalité de l’espace, ne laissant aucune place pour plus de widgets. Vous souhaitez empiler quelques widgets verticalement dans cet espace. Pour ce faire, vous devez d’abord ajouter un widget Column (Colonne).
- Dans la barre d’outils, cliquez sur le bouton Undo (Annuler).
- Dans la fenêtre Insert widget (Insérer un widget), cliquez sur le bouton Search (Rechercher). Saisissez colonne.
- Faites glisser le widget Column (Colonne) depuis le volet vers la partie vierge du widget Row (Ligne).
Les colonnes permettent d’organiser le contenu verticalement.
- Dans le volet Insert widget (Insérer un widget), effacez le contenu de la barre de recherche. Faites glisser le widget Legend (Légende) vers la colonne.
Le widget Legend (Légende) n’occupe plus tout l’espace.
- Dans le volet Legend (Légende), pour Select a Map widget (Sélectionner un widget Carte), sélectionnez Map (Carte).
Le widget est renseigné avec la légende qui correspond à la carte actuelle.
- Dans la barre d’outils du générateur, cliquez sur Live view (Vue dynamique) pour pouvoir interagir avec la carte et d’autres widgets.
- Dans le coin inférieur gauche de la carte, cliquez sur le bouton Switch map (Changer de carte).
La légende est mise à jour et affiche la légende de l’autre carte.
Ajouter un widget Bookmark (Géosignet)
Vous allez maintenant introduire davantage d’interactivité dans l’application Web grâce à un widget Bookmark (Géosignet). Ce widget permet aux utilisateurs d’effectuer un zoom sur chaque type de couverture sur les cartes.
- Dans la barre d’outils du générateur, désactivez Live view (Vue dynamique).
Vous ne pouvez pas ajouter de widgets en mode Live view (Vue dynamique).
- Dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer) pour rouvrir le volet Insert widget (Insérer un widget).
- Recherchez géosignet. Faites glisser le widget Bookmark (Géosignet) vers la zone d’affichage et déposez-le dans la colonne sous la légende.
- Dans le volet Bookmark (Géosignet), pour Select a template (Sélectionner un modèle), sous Simple, sélectionnez la quatrième option, Slide 1 (Diapositive 1) (pointez le curseur sur les modèles pour afficher leurs noms).
- Cliquez sur Démarrer.
- Pour Select a Map widget (Sélectionner un widget cartographique), choisissez Map (Carte).
L’option qui permet d’ajouter des géosignets s’affiche ensuite. Vous pouvez définir manuellement des géosignets pour n’importe quelle partie de la carte. Toutefois, les deux cartes disposent déjà d’un ensemble de géosignets définis, donc vous allez les utiliser.
- Cochez la case Display bookmarks from web map (Afficher les géosignets de la carte Web).
Le widget Bookmark (Géosignet) est renseigné avec le premier géosignet, Seagrass.
Vous allez modifier les paramètres Arrangement (Disposition) pour que les utilisateurs puissent faire défiler les géosignets.
- Dans le volet Bookmark (Géosignet), développez la section Arrangement (Disposition).
- Pour Paging style (Style de pagination), sélectionnez Scroll (Défilement). Pour Direction, sélectionnez Down (Bas).
Des flèches apparaissent sur le widget.
- Pour Item height(px) (Hauteur d’élément(px)), saisissez 200.
Vous allez maintenant modifier la couleur d’arrière-plan du widget afin qu’il soit blanc comme la légende. La cohérence est un aspect essentiel d’une conception de mise en page de qualité.
- Dans la partie supérieure du volet, cliquez sur l’onglet Style.
- En regard de Background (Arrière-plan), cliquez sur le bouton Quick Style (Style rapide ).
Le blanc ne fait pas partie des options du menu Quick Style (Style rapide).
- Cliquez sur Custom (Personnalisé).
Davantage d’options de style apparaissent dans la section Background (Arrière-plan).
- Cliquez sur le bouton Fill color (Couleur de remplissage). Sous Standard colors (Couleurs standards), cliquez sur la case blanche.
L’arrière-plan du widget Bookmark (Géosignet) correspond désormais au widget Legend (Légende).
Vous allez maintenant tester le widget Bookmark (Géosignet).
- Activez l’option Live view (Vue dynamique).
- Faites défile le widget Bookmark (Géosignet) et cliquez sur l’un des géosignets.
La carte effectue un zoom sur la localisation du géosignet.
- Cliquez sur le bouton Switch map (Changer de carte) pour afficher l’autre carte et effectuez un zoom sur un autre géosignet.
Les deux cartes Web ayant été configurées avec le même ensemble de géosignets, le widget fonctionne de la même manière pour chacune d’entre elles. Si une seule des cartes possédait des géosignets, le widget serait vide lorsque l’autre carte est sélectionnée.
Remarque :
Pour savoir comment configure des géosignets dans une carte Web, reportez-vous à la documentation.
Ajouter un widget Swipe (Balayer)
Actuellement, les utilisateurs peuvent passer d’une carte à l’autre. Toutefois, vous souhaitez afficher les deux cartes en même temps afin de mieux identifier le type d’occupation du sol sur le terrain. Pour ce faire, vous allez ajouter un widget Swipe (Balayer).
- Désactivez Live view (Voir en direct).
- Dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer). Dans le volet Insert widget (Insérer un widget), recherchez balayer.
Remarque :
Si vous utilisez ArcGIS Enterprise, le widget Swipe (Balayer) n’est peut-être pas disponible. Vous pouvez ignorer cette étape et passer à la section suivante.
- Faites glisser le widget Swipe (Balayer) vers la zone d’affichage et déposez-le dans la colonne, au-dessus de la légende.
- Dans le volet Swipe (Balayer), cliquez sur l’onglet Content (Contenu). Pour Select a template (Sélectionner un modèle), vérifiez que Horizontal Simple (Horizontal simple) est sélectionné.
- Cliquez sur Démarrer.
- Pour Select a Map widget (Sélectionner un widget cartographique), choisissez Map (Carte).
Dans la zone d’affichage, le widget Swipe (Balayer) contient un bouton bascule et deux sections développables.
Vous souhaitez que les utilisateurs puissent effectuer un balayage entre les deux cartes plutôt qu’entre des couches de carte.
- Dans le volet Swipe (Balayer), pour Swipe mode (Mode de balayage), sélectionnez Swipe between web maps or web scenes (Balayer entre les cartes Web ou les scènes Web).
- Sous General settings (Paramètres généraux), pour Slider initial position (Position initiale du curseur), saisissez 50.
La barre du curseur se positionne alors au milieu du widget. Vous êtes maintenant prêt à tester le widget Swipe (Balayer).
- Activez l’option Live view (Vue dynamique). Sur le widget Swipe (Balayer), cliquez sur le bouton bascule Swipe (Balayer).
- Effectuez un zoom sur la carte, déplacez-la et déplacez la barre de balayage pour tester la fonctionnalité.
Les deux cartes se déplacent de manière synchronisée, ce qui vous permet de les explorer en même temps. La légende est mise à jour pour indiquer la dernière carte sur laquelle vous avez cliqué.
- Faites défiler la colonne vers le bas et cliquez sur l’un des géosignets.
Les deux cartes effectuent un zoom sur la localisation marquée d’un géosignet. La fonctionnalité de balayage permet aux utilisateurs de voir plus facilement l’évolution graduelle des types d’occupation du sol dans le paysage, plutôt que les limites strictes suggérées par la carte Cover type seule.
Ajuster les paramètres de hauteur du widget
Vous allez maintenant ajuster la hauteur de chaque widget dans la colonne. Trois méthodes permettent de déterminer la taille d’un widget : méthode automatique, étirement et personnalisation. Vous allez employer une méthode différente pour chaque widget.
- Désactivez Live view (Voir en direct). Cliquez sur le widget Swipe (Balayer) pour le sélectionner.
Remarque :
Si vous n’avez pas de widget Swipe (Balayer), passez à l’étape 4.
Le widget Swipe (Balayer) prend davantage d’espace que nécessaire. Il affiche également plus d’informations que nécessaire. Une partie importante de la conception de mise en page consiste à déterminer ce qui doit être inclus et ce qui ne doit pas l’être. Le fait d’éliminer tout ce qui n’a pas besoin d’être inclus rend la mise en page plus claire et plus facile à comprendre pour le public. Vous allez diminuer la hauteur du widget Swipe (Balayer) de sorte que seul le bouton bascule soit visible et que les noms des cartes soient masqués.
- Dans le volet Swipe (Balayer), cliquez sur l’onglet Style. En regard de Height (Hauteur), cliquez sur le bouton représentant une flèche.
Trois options de hauteur sont disponibles :
- L’option Auto (Automatique) s’assure que le widget est assez grand pour renfermer son contenu, sans être plus grand.
- L’option Stretch (Étirer) ajuste la hauteur du widget pour qu’il remplisse l’espace disponible dans son conteneur.
- L’option Custom (Personnalisé) permet de définir une hauteur, en pixels ou en pourcentage de la hauteur du conteneur.
Vous souhaitez masquer une partie du widget Swipe (Balayer) en le réduisant. La seule option de hauteur qui permet d’avoir un widget plus petit que son contenu est Custom (Personnalisé). Cette option est déjà sélectionnée.
Vous pouvez ajuster des hauteurs personnalisées en saisissant un nombre ou en faisant glisser le widget.
- Dans la zone d’affichage, cliquez sur la poignée située en bas du widget et faites-la glisser pour diminuer la hauteur du widget. Faites-la glisser jusqu’à ce que les noms des cartes soient masqués et que seul le mot Swipe (Balayer) et le bouton bascule soient visibles.
Dans le volet Swipe (Balayer), le paramètre Height (Hauteur) est mis à jour sur approximativement 50 pixels. Vous allez maintenant définir la hauteur du widget Legend (Légende).
- Cliquez sur le widget Legend (Légende).
La hauteur de ce widget doit changer lorsque l’utilisateur passe d’une carte à l’autre car une des légendes est plus grande que l’autre.
- Dans le volet Legend (Légende), sur l’onglet Style, pour Height (Hauteur), sélectionnez Auto (Automatique).
Remarque :
Si le paramètre Height (Hauteur) est déjà défini sur Auto (Automatique), vérifiez que le bouton Keep aspect ratio (Conserver les proportions) est déverrouillé.
Le volet Legend (Légende) est réduit de sorte à être juste assez grand pour afficher la totalité de la légende.
- Cliquez sur le widget Bookmark (Géosignet). Dans le volet Bookmark (Géosignet), pour Height (Hauteur), sélectionnez Stretch (Étirer).
Le widget Bookmark (Géosignet) est étiré pour remplir la hauteur restante de la colonne.
- Activez l’option Live view (Vue dynamique).
- Cliquez sur les deux cartes ou passez de l’une à l’autre et observez la manière dont les widgets changent dans la colonne.
Le widget Swipe (Balayer) utilise la méthode de hauteur Custom (Personnalisé), donc il ne change pas : il conserve toujours la même hauteur. Le widget Legend (Légende) utilise la méthode Auto (Automatique), donc sa hauteur change en fonction de la taille de la légende active. Le widget Bookmark (Géosignet) utilise la méthode Stretch (Étirer), donc sa hauteur varie en fonction de l’espace disponible dans la colonne.
Vérifier le contour
Lorsque vous concevez une mise en page dans ArcGIS Experience Builder, il est conseillé de vérifier régulièrement la section Outline (Contour) pour comprendre la façon dont les widgets sont organisés et imbriqués. Puisque vous venez d’ajouter cinq widgets, il est temps de vérifier le contour et de vous assurer que la structure de l’expérience répond à vos attentes.
- Dans le volet Page, dans la section Outline (Contour), vérifiez que Body (Corps), Row (Ligne) et Column (Colonne) sont tous développés.
Conseil :
Si le volet Page n’est pas ouvert, cliquez sur le bouton Page dans la barre d’outils latérale.
La section Outline (Contour) répertorie tous les widgets présents dans la page et explique comment ils sont imbriqués les uns dans les autres. Cette page est composée d’un widget Row (Ligne). La ligne comprend un widget Column (Colonne) et un widget Map (Carte). La colonne comporte trois widgets : Swipe (Balayer), Legend (Légende) et Bookmark (Géosignet).
Vous pouvez également utiliser la section Outline (Contour) pour sélectionner des widgets et modifier leurs propriétés.
- Dans la section Outline (Contour), cliquez sur Row (Ligne).
La fenêtre Row (Ligne) s’affiche.
- Dans le volet Row (Ligne), cliquez sur l’onglet Content (Contenu).
- Pour Gap (Écart) et Padding (Marge intérieure), saisissez 0.
Dans la zone d’affichage, l’écart gris entre la colonne et la carte disparaît. C’es également le cas de la marge grise qui entoure tous les éléments sauf l’en-tête.
L’écart et la marge intérieure supplémentaires n’étaient pas nécessaires à la mise en page. Leur suppression a simplifié la conception en réduisant l’encombrement visuel inutile. Puisqu’il ne reste aucune partie visible du widget Row (Ligne), vous ne pouvez plus sélectionner la ligne dans la zone d’affichage, mais vous pouvez toujours la sélectionner dans la section Outline (Contour).
- Dans la barre d’outils du générateur, désactivez Live view (Vue dynamique) et cliquez sur le bouton Save (Enregistrer).
Dans ce didacticiel, vous avez ajouté cinq widgets à une application Web dans ArcGIS Experience Builder. Vous avez découvert les widgets de mise en page, les méthodes de dimensionnement et la section Outline (Contour). Essayez le didacticiel suivant de cette série intitulé Ajouter une fenêtre à une application Web pour apprendre à ajouter une fenêtre et un bouton et à les relier.
