Créer une expérience Web avec deux cartes
Créer une nouvelle expérience
Dans ArcGIS, vous pouvez créer des applications Web avec ArcGIS Dashboards, ArcGIS Instant Apps ou ArcGIS StoryMaps. Pour ce projet, vous allez choisir ArcGIS Experience Builder pour générer votre application car il permet un meilleur contrôle et une meilleure personnalisation de la mise en page.
Remarque :
Pour savoir quel générateur d’applications utiliser selon le cas, lisez l’article Which App Builder Do I Choose?
Les applications Web générées avec Experience Builder sont également appelées expériences Web. Vous allez commencer par créer une nouvelle expérience à l’aide du modèle plein écran vide.
- Ouvrez ArcGIS Online ou votre portail ArcGIS Enterprise.
- Connectez-vous à votre compte ArcGIS.
Remarque :
Si vous ne disposez pas d’un compte ArcGIS, consultez les options d’accès aux logiciels.
- En haut de la page, à côté de votre nom d’utilisateur, cliquez sur le bouton du lanceur d’applications.
- Cliquez sur Experience Builder.
ArcGIS Experience Builder apparaît dans un nouvel onglet.
- Cliquez sur le bouton Create new (Créer).
La page Select a template to start (Sélectionner un modèle pour démarrer) contient la liste des modèles que vous pouvez utiliser pour créer des conceptions de mise en page communes. Pour ce didacticiel, vous allez démarrer avec un modèle vide, mais vous devrez tout de même choisir un type de page : plein écran, grille ou défilement. Vous allez choisir l’option plein écran car elle est adaptée aux applications dans lesquelles la carte est l’élément central et car elle offre un meilleur contrôle de la mise en page et une plus grande liberté. Elle vous permet de positionner des widgets n’importe où dans la zone d’affichage, même s’ils se superposent.
- Sur la fiche Blank fullscreen (Plein écran vide), cliquez sur Create (Créer).
Remarque :
Si une fenêtre Getting started (Prise en main) s’ouvre, cliquez sur Skip the tour (Ignorer la visite).
La zone d’affichage, dans laquelle vous pouvez générer votre application Web, apparaît.
- Dans la barre d’outils du générateur en haut de la page, cliquez sur Untitled experience (Expérience sans titre). Effacez le texte existant et entrez American River Marine Estuary (Estuaire de l’American River).
La fenêtre Insert widget (Insérer un widget) s’ouvre à côté de la zone d’affichage. Elle répertorie tous les éléments, appelés widgets, que vous pouvez ajouter à votre mise en page.
- Faites défiler la fenêtre Insert widget (Insérer un widget) jusqu’en bas et localisez la section Layout (Mise en page).
Les widgets de mise en page sont des conteneurs qui permettent de mieux organiser les autres widgets sur la zone d’affichage. Ils permettent de créer une mise en page soignée et de la conserver quelle que soit la taille de l’écran. La méthode la plus simple pour concevoir une mise en page consiste à ajouter des widgets et à les organiser.
- Depuis la fenêtre Insert widget (Insérer un widget), faites glisser le widget Row (Ligne) sur la zone d’affichage.
- Dans la zone d’affichage, dans la barre d’outils du widget Row (Ligne), cliquez sur le bouton Align (Aligner), puis sur Full size (Taille réelle).
Le widget Row (Ligne) occupe alors la totalité de la zone d’affichage.
Ajouter un widget Map (Carte) contenant deux cartes
Vous avez déjà créé deux cartes de l’estuaire, que vous devez maintenant présenter dans l’expérience. Vous allez maintenant ajouter un widget Map (Carte) et le configurer avec les deux cartes.
- Retournez en haut de la fenêtre Insert widget (Insérer un widget) en la faisant défiler et cliquez sur le widget Map (Carte). Faites-le glisser et déposez-le sur la zone d’affichage, dans le widget Row (Ligne).
Une carte par défaut apparaît dans la zone d’affichage.
- Faites glisser le bord gauche ou droit du widget Map (Carte).
Des lignes verticales en pointillé apparaissent. Les widgets Row (Ligne) organisent le contenu côte à côte, dans douze espaces égaux.
- Faites glisser les bords de la carte pour occuper tous les espaces de la ligne, sauf les deux plus à gauche.
Vous garderez les deux espaces de gauche pour une légende et d’autres widgets.
De l’autre côté de la zone d’affichage, la fenêtre Map (Carte) est visible et présente les propriétés du widget sélectionné. À présent, vous allez ajouter au widget Map (Carte) les deux cartes que vous avez créées précédemment pour ce projet.
- Dans la fenêtre Map (Carte), cliquez sur Select map (Sélectionner une carte).
- Au bas de la fenêtre Select data (Sélectionner des données), cliquez sur Add new data (Ajouter de nouvelles données).
- Dans la fenêtre Add data (Ajouter des données), cliquez sur l’onglet ArcGIS Online. Dans la barre de recherche, entrez American River owner:Learn_ArcGIS.
- Dans les résultats de recherche, cliquez sur les fiches Tidal class (Classe de marée) et Cover type (Type de couverture).
Des coches apparaissent sur les cartes sélectionnées.
- Cliquez sur Done (Terminé).
Les deux cartes sont ajoutées dans la fenêtre Select data (Sélectionner des données).
- Dans la fenêtre Select data (Sélectionner des données), cliquez sur Cover type (Type de couverture) et Tidal class (Classe de marée).
Les deux cartes sont ajoutées dans la fenêtre Map (Carte). Dans la zone d’affichage, le widget Map (Carte) présente l’une des cartes de l’estuaire à la place de la carte du monde par défaut qui était affichée précédemment. L’échelle est trop petite : l’estuaire est minuscule au centre de la zone d’affichage. Vous allez changer l’étendue par défaut pour le widget Map (Carte).
- Dans la fenêtre Map (Carte), sous Initial view (Vue initiale), cliquez sur Custom (Personnalisé). Cliquez sur Modify (Modifier).
- Dans la fenêtre Modify initial view (Modifier la vue initiale), effectuez un déplacement et un zoom pour centrer l’estuaire dans la vue.
- Cliquez sur OK.
Dans la zone d’affichage, un zoom est effectué sur la carte en fonction de l’échelle et de la position que vous avez définies.
Examiner les cartes
À présent, vous allez examiner les deux cartes et tester le passage de l’une à l’autre.
- Dans la barre d’outils du générateur, cliquez sur le bouton Live view (Vue dynamique).
Dans la vue dynamique, vous pouvez interagir avec la zone d’affichage comme le ferait un utilisateur, au lieu de sélectionner des widgets.
- Dans le coin inférieur gauche du widget Map (Carte), cliquez sur le bouton Switch map (Changer de carte) pour afficher l’autre carte.
- Si nécessaire, cliquez à nouveau sur le bouton Switch map (Changer de carte) jusqu’à ce que la carte Tidal class (Classe de marée) (avec imagerie) soit visible.
Cette carte définit les zones de marée intertidales, supratidales et d’échouage de l’estuaire. Les estuaires sont une sorte de zone humide. Il s’agit d’étendues d’eau côtières où se mélangent généralement de l’eau douce provenant d’un fleuve et de l’eau salée provenant de l’océan. Ce mélange produit de nombreux nutriments, qui génèrent une grande biodiversité.
Cet estuaire, appelé American River, se situe sur l’île Kangourou en Australie-Méridionale. Il s’agit d’un site exceptionnel pour les oiseaux de rivage, les oiseaux de mer et les poissons, qui héberge le parc de conservation Pelican Lagoon. Cependant, il est menacé par un développement, un tourisme et une charge en nutriments toujours plus élevés.
Remarque :
Pour en savoir plus sur l’American River et d’autres estuaires de l’île Kangourou, lisez le rapport intitulé Kangaroo Island Natural Resources Management Region: Estuaries Information Package publié par le ministère de l’environnement et du patrimoine du gouvernement d’Australie-Méridionale.
- Cliquez de nouveau sur le bouton Switch map (Changer de carte) pour affcher la carte Cover type (Type de couverture).
Cette carte présente le type principal de végétation ou de sédiment recouvrant chaque zone de l’estuaire. Vous auriez pu inclure cette information sur la première carte ; toutefois, elle sera plus facile à lire sur une carte distincte. Plus vous ajoutez d’informations sur une carte unique, plus ces informations sont difficiles à interpréter. Souvent, il est judicieux de créer une deuxième carte.
- Effectuez un zoom et un déplacement sur la carte.
- Dans l’angle supérieur gauche de la carte, cliquez sur le bouton Default map view (Vue par défaut de la carte).
La vue initiale de la carte que vous avez configurée s’affiche à nouveau.
Remarque :
Si vous ne voyez pas l’intégralité de la mise en page sur votre écran, dans le coin inférieur droit de Experience Builder, cliquez sur le bouton Fit width to current window (Ajuster la largeur à la fenêtre actuelle).
Configurer les outils cartographiques
Le bouton Default map view (Vue cartographique par défaut) est un exemple d’outil cartographique. Vous allez maintenant configurer d’autres outils, qui apparaîtront en haut du widget Map (Carte). Réfléchissez à ceux dont vous aurez besoin pour votre application. N’ajoutez pas d’éléments à votre mise en page juste parce que vous le pouvez : vous devriez toujours être en mesure d’expliquer pourquoi l’ajout est nécessaire. Des éléments inutiles ne feraient que détourner l’attention du message de votre carte et pourraient même déconcerter le lecteur de la carte.
- Dans la fenêtre Map (Carte), sous Tools (Outils), désactivez l’outil Rechercher.
Le bouton Search (Rechercher) n’apparaît plus sur la carte. L’estuaire ne comporte pas de villes ni de rues. Par conséquent, la barre de recherche n’est pas nécessaire.
L’outil Boussole est une flèche d’orientation vers le nord. Les cartes ne nécessitent pas toutes une flèche d’orientation vers le nord et les cartes Web sont moins susceptibles d’en requérir que les cartes statiques car les utilisateurs peuvent effectuer un zoom arrière jusqu’à ce qu’ils reconnaissent la géographie. Toutefois, cette application sera utilisée principalement sur des appareils à écran tactile et il est donc plus probable que les utilisateurs fassent pivoter les cartes par inadvertance. Pour qu’ils puissent réorienter les cartes facilement, ajoutez une flèche d’orientation vers le nord.
- Sous Tools (Outils), activez l’outil Boussole.
Le bouton Compass (Boussole) apparaît sur la carte sous le bouton Default map view (Vue cartographique par défaut).
Les outils Couches et Fond de carte permettent aux utilisateurs de changer les couches qui sont visibles et le fond de carte qui est utilisé. Ces options sont utiles lorsque l’utilisateur doit avoir un contrôle maximal sur son exploration afin de prendre des décisions. En l’occurrence, vous essayez de raconter une histoire contrôlée sur l’estuaire. L’introduction de moyens permettant à l’utilisateur de changer la carte vous prive d’une partie de votre contrôle et peut détourner l’attention de votre message. Vous n’inclurez pas l’outil Couches ou Fond de carte.
Vos utilisateurs n’ont pas besoin de calculer de surface ni de distance. Par conséquent, vous n’allez pas non plus inclure l’outil Mesurer. En revanche, ils comprendraient mieux l’estuaire s’ils comprenaient mieux sa taille. Les cartes comportent relativement peu d’indicateurs visuels permettant aux utilisateurs de déterminer l’échelle intuitivement. Par conséquent, vous allez ajouter une barre d’échelle.
- Activez l’outil Barre d’échelle.
Une barre d’échelle apparaît au bas de la carte.
Remarque :
Pour en savoir plus sur les outils cartographiques, reportez-vous à la page d’aide Widget cartographique.
- Dans la barre d’outils du générateur, désactivez Live view (Vue dynamique).
L’ajout d’outils à une carte ne répond à aucune règle. Vous devez vous demander pour chaque outil si celui-ci est nécessaire en fonction de l’objectif, du public et du message de la carte, ainsi que de la façon dont celle-ci sera utilisée.
Ajouter un en-tête avec un titre
L’affichage d’une carte dans une application Web présente entre autres l’avantage suivant : il est possible de personnaliser un titre de carte principal. Vous allez créer un en-tête pour votre mise en page et ajouter un widget Text (Texte) pour le titre. Vous pouvez activer les en-têtes et les pieds de page dans la fenêtre Page.
- Dans la barre d’outils latérale, cliquez sur le bouton Page. Dans la fenêtre qui apparaît, cliquez sur l’élément Page mis en surbrillance.
La fenêtre Page s’ouvre de l’autre côté de la zone d’affichage et contient les propriétés de la page.
- Dans la fenêtre Page, activez le bouton bascule Header (En-tête).
Un en-tête bleu apparaît dans la partie supérieure de la zone d’affichage. Le widget Row (Ligne) descend pour libérer de l’espace. Le bleu par défaut de l’en-tête n’est présent dans aucune de vos cartes. Pour que la mise en page soit cohérente et homogène, limitez la palette de couleurs, par exemple en réutilisant des couleurs utilisées sur les cartes.
Vos deux cartes sont toutes les deux très colorées et vous voulez qu’elles se démarquent. L’utilisation de couleurs neutres telles que le noir, le blanc et le gris pour les éléments non cartographiques de votre mise en page permettront de faire ressortir les cartes. Le noir est une couleur neutre qui est également utilisée dans les cartes. Il s’agit donc d’une couleur idéale pour votre en-tête.
- Dans la fenêtre Page, à côté de Fill (Remplissage), cliquez sur le carré bleu. Sous Standard colors (Couleurs standards), cliquez sur le carré noir.
La couleur de l’en-tête est mise à jour. Vous allez maintenant ajouter un widget Text (Texte) pour le titre.
- Dans la zone d’affichage, pointez sur l’en-tête. Cliquez sur Edit header (Mettre à jour l’en-tête).
- Dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer).
La fenêtre Insert widget (Insérer un widget) s’ouvre.
- Dans la fenêtre Insert widget (Insérer un widget), cliquez sur la flèche en regard de Map centric (Cartographique) pour réduire cette section.
- Réduisez également la section Data centric (Données).
- Sous Page elements (Éléments de page), cliquez sur le widget Text (Texte). Faites-le glisser sur la zone d’affichage et déposez-le sur l’en-tête.
Un widget Text (Texte) apparaît dans la zone d’affichage et la fenêtre Text (Texte) s’ouvre. Par défaut, le texte est en noir et est invisible sur l’arrière-plan noir de l’en-tête. Ainsi, avant de saisir du texte, vous allez changer sa couleur et choisir le blanc.
- Dans la fenêtre Text (Texte), sous Text format (Format du texte), cliquez sur le bouton Font color (Couleur de police). Sous Standard colors (Couleurs standards), cliquez sur le carré blanc.
- Cliquez sur le bouton Bold (Gras).
- Dans la zone d’affichage, double-cliquez sur le widget Text (Texte) et entrez Estuaire de l’American River. Appuyez sur Entrée et saisissez Île Kangourou, Australie-Mériodionale.
À présent, vous allez agrandir la première ligne de texte.
- Double-cliquez sur la première ligne de texte pour la sélectionner. Dans la barre d’outils qui apparaît, définissez la taille de police 25 et appuyez sur Entrée.
Maintenant, le widget Text (Texte) n’est plus assez grand pour afficher le titre entier. Vous allez l’agrandir en fonction de l’en-tête.
- Dans la fenêtre Text (Texte), cliquez sur l’onglet Style.
- Cliquez sur le bouton des options qui se trouve immédiatement sous l’onglet Style, puis cliquez sur Full size (Taille réelle).
Lorsque la taille du widget Text (Texte) correspond à la taille réelle de l’en-tête, l’espace maximal possible est toujours disponible pour afficher le texte du titre. Ceci est encore plus important lorsque l’application est affichée sur de petits écrans.
- Cliquez sur la partie vierge du widget Row (Ligne) à côté de la carte pour arrêter l’édition de l’en-tête.
- Dans la barre d’outils du générateur, cliquez sur le bouton Save (Enregistrer).
Dans ce didacticiel, vous avez créé une application Web avec ArcGIS Experience Builder. Celle-ci comporte un en-tête avec un titre et un widget Row (Ligne) contenant un widget Map (Carte) avec deux cartes et plusieurs outils cartographiques. Vous avez découvert des principes importants pour la conception de mises en page d’application Web, par exemple comment choisir des couleurs pour les éléments non cartographiques et comment déterminer les outils à inclure. Essayez le didacticiel suivant de cette série intitulé Organiser une mise en page d’application Web avec plusieurs widgets pour apprendre à ajouter des widgets Legend (Légende), Bookmark (Géosignet) et Swipe (Balayer) à l’expérience American River Marine Estuary (Estuaire de l’American River).
