Transformer une carte Web en une application Web
Votre équipe estime qu’une application orientée sur une carte constitue le meilleur moyen de communiquer votre récit. Vous allez rechercher et modifier une carte Web, créer une application Web à partir de la carte et configurer la structure de la mise en page élémentaire de cette carte.
Rechercher une carte comportant des données de logement
Au lieu de commencer à partir d’une carte Web vierge, vous allez modifier une carte existante. ArcGIS Living Atlas of the World est un ensemble organisé de données géographiques et de cartes. Il comprend Esri Maps for Public Policy, un site ayant pour but d’améliorer les compétences spatiales et en matière de données dans les politiques publiques. Sur ce site, vous allez rechercher les données et les cartes associées à la politique en matière de logement.
- Accédez au site Esri Maps for Public Policy.
Sur ce site, vous pouvez effectuer des recherches dans des ressources de données liées à une variété de thèmes spécifiques aux politiques publiques. Dans ce didacticiel, vous recherchez une carte Web relative au logement.
- Cliquez sur l’onglet Issues (Problèmes).
- Cliquez sur l’onglet Economic Opportunity (Opportunité économique). Dans la barre de recherche, entrez vacant housing (logements vacants) et appuyez sur Entrée.
- Dans les résultats de recherche, cliquez sur le titre de la carte Web nommée Owned, Rented, or Vacant Housing Units (Logements occupés par leur propriétaire, loués ou vacants), appartenant à lisa_ berry.
La page des éléments de la carte s’affiche avec des informations sur la carte et les données qu’elle contient. Cette carte indique à quels endroits les logements occupés par leur propriétaire, par un locataire ou vacants prévalents. Les données de cette carte sont issues de l’ACS (American Community Survey), une enquête menée par le bureau du recensement américain. Cette carte constitue un bon point de départ pour votre application.
Remarque :
Les estimations sur cinq ans de l’ACS sont généralement utilisées dans les décisions en matière de politiques publiques et couvrent une grande variété de thèmes tels que la pauvreté, le revenu, le logement et davantage. Pour en savoir plus sur les couches ACS disponibles dans ArcGIS Living Atlas, consultez la rubrique Découvrez votre communauté utilisant des couches de recensement ACS dans Living Atlas.
Cette carte étant destinée à s’utiliser dans une application Web orientée vers le public, avant de continuer, vous allez vérifier s’il existe des restrictions ou des limitations spécifiques par rapport à l’utilisation du contenu.
- Faites défiler l’affichage jusqu’au bas de la page des éléments et localisez la section Terms of Use (Conditions d’utilisation).
La carte Web est concédée sous licence dans le cadre des conditions d’utilisation de services Web et d’API d’Esri. Pour en savoir plus sur ces conditions, cliquez sur View Summary (Afficher le résumé) ou View Terms of Use (Afficher les conditions d’utilisation). Le résumé indique que n’importe qui peut utiliser cette carte Web à des fins internes et externes à condition de mentionner Esri et ses fournisseurs de données.
- Faites défiler l’affichage vers le haut et localisez la section Credits (Attribution) (Crédits (Attribution)).
Il s’agit des informations dont vous avez besoin pour mentionner correctement les fournisseurs de données. Vous utiliserez ces informations par la suite.
Configurer la carte Web
À ce stade, vous avez trouvé une carte Web sur l’occupation des logements que vous pouvez utiliser comme contenu principal de votre application Web, et avez vérifié que vous êtes autorisé à utiliser cette carte dans votre projet spécifique. Vous allez maintenant enregistrer une copie de la carte Web et reconfigurer les couches de la carte afin de mieux répondre à l’objectif de votre application Web.
- Faites défiler l’affichage jusqu’en haut de la page des éléments et cliquez sur Sign in (Se connecter). Connectez-vous à votre compte d’organisation ArcGIS.
Remarque :
Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.
- En haut de la page des éléments, cliquez sur le bouton Open in Map Viewer (Ouvrir dans Map Viewer).
Remarque :
Si le bouton Open in Map Viewer (Ouvrir dans Map Viewer) n’est pas visible, cliquez sur la flèche en regard de Open in Map Viewer Classic (Ouvrir dans Map Viewer Classic) et sélectionnez Open in Map Viewer (Ouvrir dans Map Viewer).
La carte s’affiche.
- Dans la barre d’outils Contents (Contenu) (foncée), cliquez sur le bouton Layers (Couches).
Conseil :
Si la barre d’outils Contents (Contenu) n’est pas visible, cliquez sur Open in new Map Viewer (Ouvrir dans le nouveau Map Viewer) en haut de la page.
La fenêtre Layers (Couches) apparaît. Trois couches sont répertoriées, contenant des données de logement au niveau de l’État, du comté et du secteur de recensement. Chaque couche étant configurée pour s’afficher à différentes échelles, seule la couche Tract (Secteur) est actuellement visible.
Votre groupe de défense se concentrant sur les problèmes de logement au niveau local, vous ne vous intéressez qu'aux données spécifiques au secteur de recensement. Vous allez enregistrer une copie de la carte Web avec la couche Tract (Secteur) seule.
- Dans la fenêtre Layers (Couches), dans la couche State (État), cliquez sur le bouton Options. Cliquez sur Supprimer.
- Supprimez également la couche County (Comté).
Seules les données spécifiques à votre application Web demeurent. Vous allez ensuite vous assurer que la couche est visible à toutes les échelles.
- Cliquez sur la couche Tract (Secteur).
Une fenêtre Properties (Propriétés) apparaît sur l’autre côté de la carte.
Conseil :
Si la fenêtre Properties (Propriétés) n’est pas visible, sur la barre d’outils Settings (Paramètres) (claire), cliquez sur le bouton Properties (Propriétés).
- Faites défiler la fenêtre Properties (Propriétés) vers le bas. Ajustez le curseur Visible range (Plage de visibilité) jusqu’à ce qu’il s’étende de World (Monde) à Room (Pièce).
- Dans la barre d’outils Contents (Contenu), cliquez sur le bouton Save and open (Enregistrer et ouvrir), puis cliquez sur Save as (Enregistrer sous).
- Dans la fenêtre Save (Enregistrer), pour Title (Titre), saisissez Housing map (Carte des logements). Dans la zone Summary (Résumé), remplacez le texte existant par ce qui suit :
This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23 (Cette carte indique si les logements occupés par leur propriétaire, par un locataire ou vacants prévalents à un endroit. Ces données nationales proviennent des dernières estimations de secteurs de recensement de l’enquête communautaire américaine (American Community Survey, ACS). Il s’agit d’une copie de la carte Web trouvée ici : https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23)
- Cliquez sur Save map (Enregistrer la carte).
Créer une application web
Vous disposez à présent d’une carte Web configurée selon vos besoins. Vous allez créer une application Web à partir de cette carte avec ArcGIS Experience Builder. Vous allez concevoir la mise en page de l’application avec une carte et une colonne.
- Sur la barre d’outils Contents (Contenu), cliquez sur le bouton Create app (Créer une application).
Une liste d’options apparaît. Plusieurs produits ArcGIS vous permettent de créer des applications Web à partir de cartes Web. Chacun offre différents outils et convient à différentes situations. Dans ce projet, vous souhaitez exercer un contrôle important sur l’apparence de l’application, afin que cette dernière puisse correspondre à la carte Web et au style de votre organisation. Vous allez choisir ArcGIS Experience Builder car il offre le plus de contrôle en termes de personnalisation.
- Cliquez sur Experience Builder.
Une bibliothèque de modèles apparaît. Pour les projets futurs, ces modèles pourront vous faire gagner du temps en préconfigurant la mise en page mais, dans ce didacticiel, vous allez commencer par une zone d’affichage vierge pour apprendre de manière plus directe à structurer une mise en page.
- Sur la fiche Blank fullscreen (Plein écran vide), cliquez sur Create (Créer).
- Si une fenêtre Getting started (Prise en main) s’affiche, cliquez sur Skip (Ignorer).
ArcGIS Experience Builder apparaît, affichant la carte au centre de la zone d’affichage. Vous allez renommer votre expérience en lui attribuant un titre plus significatif.
- Sur le ruban supérieur, cliquez sur Untitled experience (Expérience sans titre) et saisissez Housing Availability (Disponibilité des logements).
Vous allez maintenant vérifier que la zone d’affichage est entièrement visible.
- Dans le coin inférieur droit de l’écran, cliquez sur le bouton Fit width to current window (Ajuster la largeur à la fenêtre actuelle).
- Si la fenêtre Insert widget (Insérer un widget) n’est pas déjà visible, dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer).
- Faites défiler l’affichage jusqu’au bas de la fenêtre du widget Insert (Insérer) et localisez la section Layout (Mise en page).
Les widgets Layout (Mise en page) vous permettent d’organiser des groupes de widgets dans votre application. Il est souvent plus facile de dimensionner et de positionner les widgets de manière claire lorsque ceux-ci se trouvent à l’intérieur d’un widget de mise en page.
- Faites glisser le widget Column (Colonne) sur la zone d’affichage.
- Sur la barre d’outils du widget Column (Colonne), cliquez sur le bouton de positionnement, puis sur Full height (Hauteur réelle).
- Cliquez de nouveau sur le bouton de positionnement, puis cliquez sur Snap to left (Ancrer sur la gauche).
Maintenant que la colonne est en place, vous allez redimensionner la carte. Comme l’un des objectifs de votre projet est que la carte soit la principale finalité de l’application, vous allez faire en sorte qu’elle remplisse entièrement la zone d’affichage.
- Cliquez sur le widget Map (Carte) pour le sélectionner. Sur la barre d’outils de la carte, cliquez sur le bouton de positionnement puis sur Full size (Taille réelle).
La carte est étendue pour remplir l’intégralité de la zone d’affichage, avec une de ses parties masquée par la colonne. Vous allez ensuite définir l’étendue par défaut de la carte dans les paramètres de propriété de la carte.
- Dans la fenêtre Map (Carte), sous Initial view (Vue initiale), cliquez sur Custom (Personnalisé) et sur Modify (Modifier).
La fenêtre Modify initial view (Modifier la vue initiale) apparaît.
- Effectuez un zoom sur votre communauté ou un autre endroit des États-Unis qui vous intéresse (par exemple, l’île de Manhattan à New York).
- Cliquez sur OK.
Vous allez effectuer quelques configurations supplémentaires dans le widget Map (Carte).
- Dans la fenêtre Map (Carte), sous Tools (Outils), désactivez l’option Search (Rechercher).
Vous allez par la suite ajouter un widget Search (Rechercher) sur lequel vous avez plus de contrôle.
- Vers le bas de la fenêtre Map (Carte), sous Tools layout (Mise en page des outils), sous Large and medium size (Grande taille et taille moyenne), sélectionnez la deuxième option.
Les contrôles de navigation de la carte sont déplacés vers l’angle inférieur droit de la carte. Ils étaient précédemment masqués par la colonne.
Pour finir, vous allez désactiver les fenêtres contextuelles. Ultérieurement dans ce didacticiel, vous allez ajouter des widgets pour afficher des informations sur le nombre de logements de chaque type dans chaque secteur. Du fait de ces informations, les fenêtres contextuelles seront inutiles.
- En bas de la fenêtre Map (Carte), sous Options, désactivez l’option Enable pop-up (Activer la fenêtre contextuelle).
- Dans la barre d’outils du générateur, cliquez sur le bouton Save (Enregistrer).
- Fermez l’onglet du navigateur Map Viewer et celui du navigateur Esri Maps for Public Policy.
À ce stade du didacticiel, vous avez trouvé une carte Web, l’avez modifiée en fonction de vos besoins et l’avez convertie en une application Web dans ArcGIS Experience Builder.
Ajouter et configurer des widgets
Maintenant que vous avez configuré la carte, il est temps d’ajouter quelques widgets pour aider les utilisateurs à comprendre et à explorer les données. Vous allez ajouter les widgets Chart (Diagramme), Text (Texte), Search (Rechercher) et Menu.
Ajouter un widget Chart (Diagramme)
Vous allez ajouter un diagramme à secteurs à la colonne vide. Vous allez collecter le diagramme aux données de la carte afin qu’il affiche la composition de logements du secteur de recensement sélectionné.
- Si nécessaire, rouvrez votre application Housing Availability (Disponibilité des logements) dans ArcGIS Experience Builder.
- Dans la fenêtre Insert widget (Insérer un widget), cliquez sur le bouton Search (Rechercher) et saisissez chart (diagramme).
- Dans les résultats de la recherche, faites glisser le widget Chart (Diagramme) vers la colonne.
Un widget Chart (Diagramme) vierge apparaît dans la colonne. Le reste de la colonne est transparent car, par défaut, la colonne est dépourvue de couleur d’arrière-plan.
Vous allez maintenant configurer le diagramme de sorte qu’il affiche les informations relatives aux logements issues de la carte.
- Dans la fenêtre Chart (Diagramme), cliquez sur Select data (Sélectionner des données).
- Dans la fenêtre Select data (Sélectionner des données), développez Housing map (Carte des logements) et cliquez sur Tract (Secteur).
- Dans la fenêtre Chart (Diagramme), sous Tract (Secteur), cliquez sur Default (Par défaut) et sélectionnez Selected features (Entités sélectionnées).
- Sous Chart type (Type de diagramme), cliquez sur Select chart (Sélectionner un diagramme) et, dans la fenêtre Chart type (Type de diagramme), choisissez Pie chart (Diagramme à secteurs).
Un diagramme à secteurs convient à ces données car celles-ci sont divisées en trois catégories (occupés par leur propriétaire, occupés par le locataire et libres), qui ensemble totalisent 100 % des logements.
- Dans la fenêtre Chart (Diagramme), sous Data (Données), définissez les paramètres suivants :
- Pour Category type (Type de catégorie), choisissez By field (Par champ).
- Pour Statistics (Statistiques), choisissez Sum (Somme).
- Pour Number Fields (Champs numériques), cochez les cases Vacant Housing Units (Logements vacants), Owner-Occupied Housing Units (Logements occupés par leur propriétaire) et Renter-Occupied Housing Units (Logements occupés par le locataire).
- Pour Sort by (Trier par), choisissez Category axis (Axe de catégorie).
Le diagramme affiche l’avertissement No data found (Aucune donnée trouvée). Cet avertissement apparaît parce que vous avez choisi d’afficher les entités sélectionnées dans le diagramme mais qu’aucune entité n’est actuellement sélectionnée.
- Dans la barre d’outils du générateur, cliquez sur le bouton Live view (Vue dynamique).
Dans le mode Vue dynamique, vous pouvez interagir avec votre application Web comme le ferait un utilisateur. Vous ne pouvez pas sélectionner de widgets et les déplacer.
- Sur la carte, cliquez sur un secteur de recensement.
Une fois le secteur de recensement sélectionné, le diagramme à secteurs devient bleu et l’avertissement disparaît. Vous allez quitter le mode de vue dynamique pour pouvoir continuer à configurer le widget Chart (Diagramme).
- Désactivez Live view (Voir en direct). Cliquez sur le widget Chart (Diagramme).
La fenêtre Chart (Diagramme) s’affiche à nouveau. Vous allez ajouter une légende au diagramme pour expliquer les trois catégories.
- Dans la fenêtre Chart (Diagramme), en regard de General (Général), cliquez sur la flèche pour développer cette section.
- Activez Legend (Légende). Pour Legend position (Position de la légende), choisissez Bottom (Bas).
Vous allez maintenant ajouter de la couleur au diagramme afin qu’il corresponde aux couleurs de la carte.
- Développez la section Slices (Tranches). Sous Color mode (Mode de couleur), choisissez By category (Par catégorie) et cliquez sur le bouton des paramètres.
- Dans la fenêtre Slice color (Couleur de tranche), cliquez sur la couleur à côté de B25002_003E (logements vacants) puis sur More (Plus).
- Pour Hex, saisissez #aa7b7b et appuyez sur Entrée.
La couleur est mise à jour vers une couleur rouge discrète.
- Redéfinissez la couleur de B25003_002E (logements occupés par leur propriétaire) sur #d3c268, une couleur jaune. Redéfinissez la couleur de B25003_003E (logements occupés par un locataire) sur #6b99b5, une couleur bleue.
Le diagramme et sa légende correspondent à présent aux couleurs de la carte. Si votre secteur de recensement sélectionné est jaune, la tranche la plus grande dans le diagramme à secteurs est également jaune.
Configurer le diagramme en fonction des couleurs de la carte en facilite la lecture et permet également de le doubler en tant que légende de la carte.
- Activez l’option Live view (Vue dynamique) et cliquez sur différents secteurs pour observer les changements survenant dans le diagramme.
Remarque :
Quelques secteurs de recensement n’affichent qu’une ou deux tranches car ils ne présentent qu’un ou deux types de logement.
Configurer une vue pour les sélections vierges
Le widget Chart (Diagramme) affiche encore l’avertissement No data found (Aucune donnée trouvée) dans certaines situations. Vous allez choisir un secteur de recensement allant faire office d’entité par défaut. À la première ouverture de l’application web, le diagramme affiche des données pour l’entité par défaut.
- Sur la carte, cliquez sur un emplacement dépourvu de secteur de recensement (par exemple, Central Park ou un plan d’eau).
Le diagramme renvoie la vue No data found (Aucune donnée trouvée). Le diagramme apparaît également ainsi à la première ouverture de l’application Web. Vous pouvez résoudre ce problème en configurant une vue pour les sélections vides.
- Sur la barre d’outils latérale, cliquez sur le bouton Data (Données). Dans la fenêtre Data (Données), cliquez sur la fiche Housing map (Carte des logements).
- Sous In use (Utilisé), cliquez sur la fiche Tract (Secteur).
- En bas de la fenêtre, cochez la case View for empty selection (Vue en cas de sélection vide).
Le widget Chart (Diagramme) est rempli avec des tranches rouges, bleues et jaunes. Avec ce paramètre, le diagramme n’est pas vide lorsqu’aucune entité n’est sélectionnée.
- Cliquez sur le bouton Settings (Paramètres) situé à côté de la case à cocher.
La fenêtre View for empty selection (Vue en cas de sélection vide) apparaît. Vous allez ici choisir le secteur de recensement qui apparaîtra lorsqu’aucun secteur n’est sélectionné sur la carte. Dans les étapes suivantes, vous allez choisir le secteur de recensement 94 à New York, dans le comté de New York. Si vous choisissez de centrer votre carte sur une autre ville, choisissez un secteur de cette zone à la place.
- Dans l’onglet Filter (Filtre), cliquez sur Add (Ajouter) puis sur Clause set (Jeu de clauses).
Deux clauses vides apparaissent.
- Cliquez sur Add (Ajouter) de nouveau, puis sur Clause.
Trois clauses sont maintenant présentes. Vous allez utiliser la première clause pour affiner les données par État.
- Pour la première clause, cliquez sur OBJECTID et choisissez State (État). Pour le second menu, choisissez is (est).
- À côté du troisième menu, cliquez sur le bouton Select source type (Sélectionner un type de source) et choisissez Unique.
Vous pouvez maintenant effectuer un choix dans une liste de toutes les valeurs uniques dans le champ State (État).
- Cliquez sur le troisième menu. Dans la barre de recherche, saisissez new (nouveau) et choisissez New York ou l’État qui vous intéresse.
- Configurez la deuxième clause de sorte qu’elle indique County is New York County (Le comté est le comté de New York) ou le comté qui vous intéresse. Si le comté ne figure pas dans le troisième menu, cliquez sur Search more (Rechercher encore) pour afficher plus de résultats de recherche.
Conseil :
N’oubliez pas de redéfinir le type de source sur Unique.
- Configurez la troisième clause de sorte qu’elle indique NAME is Census Tract 94 (Le NOM est secteur de recensement 94) ou un secteur de recensement situé dans votre zone d’intérêt.
- Assurez-vous que le contrôle situé au-dessus des clauses est défini sur And (Et).
Lorsque And (Et) est choisi, une entité doit satisfaire l’ensemble des trois clauses. La table affiche une ligne pour l’entité sélectionnée par les trois clauses. Le diagramme à barres affiche les résultats de ce secteur de recensement lorsqu’aucune entité n’est sélectionnée sur la carte.
- Cliquez sur Apply changes (Appliquer les modifications).
Remarque :
La vue du diagramme par défaut apparaît à la première ouverture de l’application web. La vue sans données reste affichée tant qu’une partie vierge de la carte est sélectionnée.
Modifier l’apparence du diagramme
Vous allez terminer le widget Chart (Diagramme) en ajustant certaines de ses propriétés d’apparence. Vous allez commencer par supprimer les boutons du haut du widget. Ces boutons fournissent des fonctions dont votre application n’a pas besoin. Vous allez les supprimer afin qu’ils ne détournent pas l’attention du message de la carte.
- Désactivez l’option Live view (Vue dynamique) et sélectionnez le widget Chart (Diagramme).
- Dans la fenêtre Chart (Diagramme), développez la section Tools (Outils). Désactivez Selection (Sélection).
Deux des boutons disparaissent du widget Chart (Diagramme).
- Cliquez sur l’onglet Action puis sur l’onglet Data action (Action Données). Désactivez Enable data action (Activer l’action Données).
Le troisième bouton disparaît du diagramme. Vous allez ensuite changer la couleur d’arrière-plan du widget Chart (Diagramme).
- Cliquez sur l’onglet Content (Contenu) et développez la section Appearance (Apparence). Cliquez sur la couleur d’arrière-plan, puis sur More (Plus).
- Pour Hex, saisissez #000000. Pour A, saisissez 75.
A signifie Alpha et détermine l’opacité de la couleur. La carte est maintenant partiellement visible derrière le widget Chart (Diagramme). Toutefois, le texte est presque invisible. Vous allez le redéfinir sur le blanc.
- À côté de Text elements (Éléments de texte), cliquez sur le bouton des paramètres.
- Dans la fenêtre Text elements (Éléments de texte), à côté de Legend label (Légende), cliquez sur le bouton Edit (Mettre à jour).
- Cliquez sur le carré noir. Sous Standard colors (Couleurs standards), choisissez le blanc.
- Dans la fenêtre Chart (Diagramme), développez la section Slices (Tranches). Redéfinissez Outline (Contour) sur le noir.
Le widget Chart (Diagramme) terminé présente du texte en blanc sur un arrière-plan foncé.
Ajouter un widget Text (Texte)
Vous allez ensuite ajouter du texte pour apporter un contexte à la carte, y compris un titre et un accusé de réception des données. Vous allez formater différentes parties du texte afin que ce dernier soit plus lisible et ajouter des liens permettant aux utilisateurs de votre application de trouver plus d’informations sur les données affichées sur la carte.
- Dans la barre d’outils latérale, cliquez sur le bouton Insert (Insérer). Dans la fenêtre Insert widget (Insérer un widget), effacez la recherche. Recherchez le widget Text (Texte) et faites-le glisser vers la colonne en dessous du diagramme.
Le widget Text (Texte) se place automatiquement sous le widget Chart (Diagramme) avec un faible écart entre les deux.
- Double-cliquez sur le widget Text (Texte), puis copiez et collez le texte suivant :
Owned, Rented, or Vacant? (Occupé par le propriétaire, en location ou vacant ?)
Cliquez sur un secteur de recensement pour afficher des informations de logement correspondant à cette zone.
Logements dans le secteur, le comté, l’État. Le loyer médian est $Rent. La valeur médiane du logement est $Value.
Carte par Lisa Berry, Esri. Données de l’estimation sur 5 ans de l’American Community Survey (ACS) 2015-2019, Table B25002.
Comprend les espaces entre les lignes du texte. La troisième ligne de texte aura plus de sens par la suite, lorsque vous ajouterez des éléments dynamiques.
Conseil :
Utilisez la combinaison de touches Ctrl+Maj+V ou Commande+Maj+V pour coller le texte sans sa mise en forme.
Vous allez maintenant changer la hauteur du widget Text (Texte).
- Dans la fenêtre Text (Texte), cliquez sur l’onglet Style. À côté de Height (Hauteur), cliquez sur le bouton fléché et choisissez Auto.
Avec ce paramètre, le widget Text (Texte) présente toujours une hauteur suffisante et jamais excessive pour afficher tout son contenu.
Vous allez ensuite choisir les mêmes couleurs de texte et d’arrière-plan que le widget Chart (Diagramme).
- Dans la fenêtre Text (Texte), sous Background (Arrière-plan), cliquez sur Custom (Personnalisé), puis sur la couleur Fill (Remplissage). Sous Recent colors (Couleurs récentes), choisissez le noir semi-transparent que vous avez créé pour l’arrière-plan du diagramme à secteurs.
- Cliquez sur l’onglet Contenu. Sous Text format (Format du texte), cliquez sur le bouton Font color (Couleur de police). Sous Standard colors (Couleurs standards), choisissez le blanc.
- Sous Text format (Format du texte), cliquez sur le bouton Center (Centre).
Le texte du diagramme est à présent en blanc et aligné au centre. Vous allez maintenant formater la première ligne de texte (le titre de votre application) pour l’agrandir et lui appliquer plus de gras.
- Mettez en surbrillance la première ligne de texte. Dans la barre d’outils du texte, cliquez sur le bouton Bold (Gras) et redéfinissez la taille sur 25 px.
Conseil :
Si la barre d’outils de texte n’est pas visible, modifiez les propriétés de police sur l’onglet Content (Contenu) de la fenêtre Text (Texte).
Vous allez ensuite inclure un lien vers une ressource du bureau du recensement américain pour les lecteurs ne sachant pas nécessairement ce qu’est un secteur de recensement.
- Sur la deuxième ligne de texte, mettez en surbrillance les termes Census Tract (Secteur de recensement). Dans la fenêtre Text (Texte), sur l’onglet Content (Contenu), sous Text format (Format de texte), cliquez sur le bouton Link (Lien).
- Dans la fenêtre Set link (Définir un lien), pour Link to (Lien vers), sélectionnez URL. Pour URL, copiez et collez https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf.
- Pour Open in (Ouvrir dans), choisissez New window (Nouvelle fenêtre). Cliquez sur OK.
- Mettez en gras le texte Census Tract (Secteur de recensement).
Vous allez également établir un lien vers d’autres informations concernant l’enquête communautaire américaine. La visualisation de vos données sera considérée comme plus fiable si elle fournit des informations sur la manière dont les données ont été collectées, et par qui.
- Sur la dernière ligne de texte, mettez en surbrillance le texte American Community Survey (ACS) (Enquête communautaire américaine (American Community Survey, ACS)) et reliez-le à l’URL suivante : https://www.census.gov/programs-surveys/acs/about.html.
- Mettez en gras le texte American Community Survey (ACS) (Enquête communautaire américaine (American Community Survey, ACS)).
Puisque le widget Text (Texte) contient le titre de la carte, vous allez le placer en haut de la colonne.
- Faites glisser le widget Chart (Diagramme) en dessous du widget Text (Texte).
Vous allez également supprimer l’écart séparant les éléments de la colonne.
- Cliquez sur la partie inférieure vide de la colonne ou sur l’écart situé entre les widgets Text (Texte) et Chart (Diagramme) pour sélectionner la colonne.
- Dans la fenêtre Column (Colonne), pour Gap (Écart), saisissez 0 px.
Les widgets Text (Texte) et Chart (Diagramme) forment à présent un seul et même élément.
Ajouter du texte dynamique
Pour la troisième ligne de texte, vous allez inclure des informations sur les logements qui sont mises à jour selon les sélections effectuées sur la carte, de la même manière que le diagramme. Vous avez vu les champs disponibles dans les données lorsque vous avez configuré le diagramme à secteurs. Vous allez afficher certains de ces champs dans le widget Text (Texte).
- Sélectionnez le widget Text (Texte). Dans la fenêtre Text (Texte), activez l’option Connect to data (Connexion aux données). Cliquez sur Select data (Sélectionner des données).
- Dans la fenêtre Select data (Sélectionner des données), développez Housing map (Carte des logements) et cliquez sur Tract (Secteur).
Le widget Text (Texte) a désormais accès aux données de logement sur la carte.
- Dans le widget Text (Texte), mettez en surbrillance le terme Tract (Secteur).
Vous allez remplacer ce texte par un contenu dynamique.
- Dans la barre d’outils du widget Text (Texte), cliquez sur le bouton Dynamic content (Contenu dynamique).
- Dans la fenêtre Dynamic content (Contenu dynamique), cliquez sur le champ NAME (Nom).
Dans le widget Text (Texte), le texte mis en surbrillance est remplacé par {NAME} (Nom). Un espace supplémentaire a également été ajouté entre le champ et la virgule.
- Supprimez cet espace supplémentaire.
- Remplacez les termes suivants par les champs suivants :
- Remplacez le terme County (Comté) par le champ County (Comté).
- Remplacez le terme State (État) par le champ State (État).
- Remplacez le terme Rent (Location) par le champ Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent) (Loyer médian (loyer contractuel pour les logements occupés par un locataire qui paie son loyer en espèces)).
- Remplacez le terme Value (Valeur) par le champ Median Home Value (for Owner-Occupied Housing Units) (Valeur médiane du logement (pour les logements occupés par leur propriétaire)).
Conseil :
Pour afficher le nom complet d’un champ, pointez sur le champ.
- Supprimez les espaces supplémentaires.
- Mettez en gras tous les champs dynamiques.
- Activez l’option Live view (Vue dynamique) et cliquez sur différents secteurs de recensement sur la carte.
Le texte dynamique est mis à jour pour refléter les informations de logement spécifiques au secteur sélectionné.
Ajouter un widget Search (Rechercher)
Vous avez précédemment supprimé la barre de recherche du widget Map (Carte). Vous allez maintenant remplacer ce widget par le widget Search (Rechercher). Ce widget offre un plus grand contrôle sur la personnalisation que l’outil intégré. Par exemple, vous pouvez le placer n’importe où et en modifier l’apparence.
- Désactivez Live view (Voir en direct). Dans la fenêtre Insert widget (Insérer un widget), cliquez sur le widget Search (Rechercher) et faites-le glisser sur la carte.
- Placez le widget Search (Rechercher) dans le coin supérieur droit de la carte.
L’astuce textuelle par défaut du widget Search (Rechercher) est Find address or place (Rechercher une adresse ou un lieu). Vous allez reformuler ce texte.
- Dans la fenêtre Search (Rechercher), cliquez sur New search source (Nouvelle source de recherche) et sélectionnez Locator source (Source du localisateur).
La fenêtre Set locator source (Définir une source du localisateur) apparaît.
- Dans la fenêtre Set locator source (Définir une source du localisateur), cliquez sur Select utility (Sélectionner un service).
- Dans la fenêtre Select utility (Sélectionner un service), dans l’onglet Organization (Organisation), sous Geocoding (Géocodage), sélectionnez ArcGIS World Geocoding Service.
- Dans la fenêtre Set locator source (Définir une source du localisateur), sous Search options (Options de recherche), pour Hint (Astuce), saisissez Search for your area (Recherchez votre zone).
L’astuce textuelle dans le widget Search (Rechercher) change.
Vous allez ensuite connecter le widget Search (Rechercher) au widget Map (Carte) avec une action.
- Dans la fenêtre Search (Rechercher), cliquez sur l’onglet Action. Cliquez sur Add a trigger (Ajouter un déclencheur).
- Dans la fenêtre Select a trigger (Sélectionner un déclencheur), cliquez sur Record selection changes (Modifications de sélection d’enregistrements).
- Sous Widgets, cliquez sur Map (Carte). Sous Select an action (Sélectionner une action), cliquez sur Pan to (Se déplacer vers).
- Fermez la fenêtre Action settings (Paramètres de l’action).
Vous allez tester la recherche pour vérifier que l’action a été correctement configurée.
- Activez l’option Live view (Vue dynamique). Dans le widget Search (Rechercher), saisissez un nom de lieu. Dans les résultats de recherche, cliquez sur l’un des noms de lieu.
La carte effectue un zoom sur la localisation sélectionnée.
- Sur la carte, à côté des contrôles de zoom, cliquez sur le bouton Home (Accueil).
- Sur la barre d’outils du générateur, désactivez Live view (Vue dynamique) et cliquez sur Save (Enregistrer).
Ajouter une page
La visualisation de vos données est à présent terminée. Vous allez ensuite ajouter l’article associé que vos collègues ont écrit. Vous pourriez ajouter un lien vers le récit dans le widget Text (Texte), mais il serait préférable que le récit soit plus accessible et semble faire partie de l’application Web. Vous allez ajouter une deuxième page à l’application et y intégrer le récit.
- Dans la barre d’outils latérale, cliquez sur le bouton Page.
- Dans la fenêtre Page, cliquez sur le bouton Add page (Ajouter une page) puis sur l’option Blank fullscreen (Plein écran vide).
Une nouvelle zone d’affichage vierge apparaît.
- Dans la fenêtre Page, pointez sur Page 2 et cliquez sur le bouton More (Plus). Cliquez sur Renommer.
- Renommez Page 2 Story (Récit). Renommez Page en Carte.
- Dans la fenêtre Insert widget (Insérer un widget), ajoutez un widget Embed (Intégrer) à la zone d’affichage.
- Sur la barre d’outils du widget Embed (Intégrer), cliquez sur le bouton de positionnement, puis sur Full size (Taille réelle).
Pour ce didacticiel, vous allez intégrer le récit How the Age of Housing Impacts Affordability (Comment l’âge du logement affecte l’accessibilité), écrit par Steven Aviles de l’équipe Policy Maps d’Esri.
- Dans la fenêtre Embed (Intégrer), pour Embed by (Intégrer par), sélectionnez URL.
- Collez le code URL suivant : https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.
Le récit apparaît dans la zone d’affichage. Il a été créé avec ArcGIS StoryMaps.
Ajouter un widget Menu
Vous allez maintenant ajouter un widget Menu. Ce widget permettra aux utilisateurs de basculer entre les deux pages de votre application. Pour empêcher le menu de masquer des parties du récit, vous allez d’abord ajouter un en-tête à la page.
- Dans la barre d’outils latérale, cliquez sur le bouton Page. Dans la fenêtre Page, cliquez sur la page Story (Récit).
- Dans la fenêtre Story (Récit), activez Header (En-tête).
Une barre bleue apparaît en haut de la page.
- Pour Height (Hauteur), saisissez 60 px.
- Pointez sur l’en-tête et cliquez sur Edit header (Mettre à jour l’en-tête).
- Dans la fenêtre Insert widget (Insérer un widget), ajoutez un widget Menu à l’en-tête de page.
- Ancrez le widget Menu dans le coin supérieur droit.
- Dans la fenêtre Menu, sur l’onglet Content (Contenu), pour Style, sélectionnez Pills (Pilules).
La couleur bleue de l’en-tête et le widget Menu ne correspondent pas au reste de votre application. Au lieu de changer la couleur à plusieurs endroits, vous allez changer le thème de l’application.
- Dans la barre d’outils latérale, cliquez sur le bouton Theme (Thème). Dans la fenêtre Theme (Thème), cliquez sur Ink (Encre).
L’en-tête est colorié en blanc et le bouton de menu en gris foncé.
Le widget Menu permet aux utilisateurs de basculer du récit à la carte. Vous allez ajouter le même widget Menu à la page Map (Carte) afin qu’ils puissent également basculer vers le récit.
- Dans la fenêtre Page, cliquez sur la page Map (Carte).
Vous n’avez pas besoin d’ajouter d’en-tête à la page car les utilisateurs peuvent se déplacer sur la carte pour voir les zones masquées par des widgets.
- Dans la fenêtre Insert widget (Insérer un widget), ajoutez un widget Menu à la page. Ancrez ce widget dans le coin supérieur droit.
- Dans la fenêtre Menu 2, pour Style, choisissez Pills (Pilules).
- Déplacez le widget Search (Rechercher) et placez-le en dessous du widget Menu.
- Activez l’option Live view (Vue dynamique). Cliquez sur les boutons de menu pour tester le basculement entre les deux pages.
- Dans la fenêtre Page, vérifiez que le bouton Make homepage (Créer une page d’accueil) est visible à côté de la page Map (Carte).
Ce bouton indique quelle page est la page d’accueil. Il apparaît à la première ouverture de l’application.
- Cliquez sur Save (Enregistrer).
Vous avez créé une application Web comportant deux pages et contenant une carte et un récit. Vous avez configuré les widgets Map (Carte), Column (Colonne), Chart (Diagramme), Text (Texte), Search (Rechercher), Embed (Intégrer) et Menu. Vous avez connecté des widgets en utilisant des actions et du contenu dynamique pour aider les utilisateurs à examiner la disponibilité des logements.
Optimiser l’application pour les appareils mobiles
À ce stade, vous avez rempli quatre des objectifs de l’application Web :
- La carte doit être le thème central de l’application.
- L’application doit permettre aux utilisateurs de rechercher leur propre adresse ou leurs propres zones d’intérêt.
- L’application doit inclure du texte et des diagrammes dynamiques pour permettre aux utilisateurs d’explorer les données et d’interagir avec elles.
- La carte doit être associée à un récit journalistique.
Il reste un objectif : la carte doit fonctionner aussi bien sur un appareil mobile que sur un ordinateur de bureau.
Pour l’instant, votre application Web n’est bien affichée que sur un grand écran. Pour terminer le projet, vous allez ajuster des éléments jusqu’à ce que l’application soit bien affichée quelle que soit la taille de l’écran.
Optimiser la page de récit pour les appareils mobiles
Pour que la page de récit fonctionne avec différentes tailles d’écran, vous allez ajuster la taille du widget Menu en le faisant passer d’un dimensionnement relatif (défini en pourcentage) à un dimensionnement absolu (défini en pixels).
- Si nécessaire, rouvrez votre application Housing Availability (Disponibilité des logements) dans ArcGIS Experience Builder. Activez l’option Live view (Vue dynamique).
- Si nécessaire, dans le menu de l’application, cliquez sur le bouton Story (Récit) pour afficher la page Story (Récit).
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for small screen devices (Modifier votre page pour les périphériques petit écran) afin de passer au mode petit écran.
Cette vue émule la manière dont votre application apparaîtra sur un appareil mobile.
- Passez le récit en revue pour vérifier qu’aucun texte ou aucune carte ne sont coupés.
Les récits ArcGIS StoryMaps sont déjà configurés afin de se redimensionner pour les appareils mobiles. Cependant, le widget Menu de l’en-tête de page est trop petit pour être lu.
Vous pourriez créer une mise en page personnalisée pour les petits écrans, mais ici, vous pouvez résoudre le problème en changeant la manière dont le widget Menu est dimensionné dans toutes les tailles d’écran. Les solutions fonctionnant dans toutes les tailles d’écran sont préférables aux solutions personnalisées pour différentes tailles d’écran car elles permettent de mettre à jour et de gérer l’application plus facilement.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for large screen devices (Modifier votre page pour les périphériques grand écran).
Il est nécessaire de passer au mode grand écran pour reconfigurer les widgets.
- Désactivez Live view (Voir en direct). Cliquez sur Edit header (Mettre à jour l’en-tête), puis sur le widget Menu.
- Dans la fenêtre Menu, cliquez sur l’onglet Style. Recherchez la propriété Width (Largeur).
La propriété Width (Largeur) est définie en tant que pourcentage de la largeur de l’écran, ce qui devient trop petit pour les écrans étroits. Vous allez définir la largeur en pixels à la place afin de vous assurer qu’elle présente constamment la même taille, quelle que soit la taille d’écran.
- En regard de Width (Largeur), cliquez sur le bouton Change unit (Changer d’unité) et sélectionnez px.
- Définissez Width (Largeur) sur 250 px.
- Passez au mode petit écran.
Le menu est maintenant assez grand pour être lu sur un petit écran.
Optimiser la page de carte pour les appareils mobiles
Vous allez à présent ajuster la page de carte de sorte qu’elle fonctionne aussi avec toutes les tailles d’écran. Vous allez redéfinir certains éléments sur le dimensionnement absolu. Vous allez également configurer une mise en page personnalisée pour les appareils mobiles.
- Dans la fenêtre Page, cliquez sur la page Map (Carte).
Sur cette page, tous les widgets sont trop étroits. La plupart du texte ne peut pas être lu.
- Sur la barre d’outils du générateur, cliquez sur le bouton Edit your page for medium screen devices (Modifier votre page pour les périphériques moyen écran) afin de passer au mode moyen écran.
Cette vue émule la manière dont votre application apparaîtra sur une tablette. Elle se présente mieux, mais la légende du diagramme et le menu sont encore coupés. Vous allez redéfinir leur largeur sur le dimensionnement absolu.
- Passez au mode grand écran.
- Sélectionnez le widget Menu. Dans la fenêtre Menu 2, dans l’onglet Style, redéfinissez le paramètre Width (Largeur) sur 250 px.
- Sélectionnez le widget Search (Rechercher). Redéfinissez son paramètre Width (Largeur) sur 250 px.
- Cliquez sous le diagramme pour sélectionner le widget Column (Colonne). Définissez son paramètre Width (Largeur) sur 300 px.
- Passez au mode moyen écran.
Les modifications de la mise en page sont effectives dans cette taille d’écran.
- Passez au mode petit écran.
Les modifications ne sont pas effectives ici. La carte est presque entièrement masquée par les widgets Text (Texte) et Chart (Diagramme). Avec vos collègues, vous pensez que le diagramme n’est pas nécessaire à la version mobile de votre application Web. Vous allez le masquer sur la vue lorsque la taille d’écran est trop petite. À cette fin, vous devez créer une mise en page personnalisée pour les petits écrans.
- À côté de la zone d’affichage, cliquez sur Custom (Personnaliser).
- Dans la fenêtre contextuelle d’avertissement, cliquez sur OK.
Vous pouvez désormais apporter à la mise en page des modifications qui n’affecteront l’application que lorsque celle-ci est affichée sur un petit écran. Vous allez masquer le widget Chart (Diagramme) de sorte qu’il apparaisse sur un grand écran et disparaisse sur un petit écran.
- Cliquez sur le widget Chart (Diagramme). Sur sa barre d’outils, cliquez sur le bouton Move to the pending list (Déplacer dans la liste en attente).
Le widget Chart (Diagramme) disparaît.
Il est important de ne pas supprimer le widget Chart (Diagramme). Bien que vous soyez en mode personnalisation, si vous supprimez un widget, il est supprimé de toutes les versions de l’application. La liste en attente vous permet de supprimer des widgets de la vue sans les supprimer.
Conseil :
Si vous supprimez par accident le widget Chart (Diagramme), cliquez sur le bouton Undo (Annuler) de la barre d’outils du générateur. Si vous décidez d’ajouter le widget Chart (Diagramme) par la suite, vous le trouverez dans la fenêtre Insert widget (Insérer un widget), sur l’onglet Pending (En attente).
Vous allez maintenant changer la taille et la position du widget Text (Texte) de sorte qu’il ne masque plus les widgets Search (Rechercher) et Menu.
- Cliquez sur le widget Text (Texte). Faites-le glisser en dehors de la colonne et placez-le sur la carte.
- Déplacez le widget Column (Colonne) dans la liste en attente.
- Ancrez le widget Text (Texte) dans le coin inférieur gauche.
- Dans la fenêtre Text (Texte), cliquez sur l’onglet Style. Redéfinissez le paramètre Width (Largeur) sur 90 % et le paramètre Height (Hauteur) sur 30 %.
Cette taille empêche les contrôles de navigation de la carte de masquer du texte.
Remarque :
Dans le mode personnalisation, vous pouvez changer la taille et la position des widgets sans affecter les autres tailles d’écran. Toutefois, les modifications apportées aux autres propriétés seront visibles dans toutes les tailles d’écran. Par exemple, si vous choisissez une taille de police plus petite pour le widget Text (Texte), elle apparaîtra plus petite dans toutes les tailles d’écran. Si vous souhaitez une taille de police plus petite uniquement sur les petits écrans, vous devez dupliquer le widget Text (Texte), déplacer le widget original dans la liste en attente, puis changer la taille de police dans le nouveau widget.
Finaliser et publier
Pour terminer le projet, vous allez prévisualiser, publier et partager l’application Web.
- Dans la barre d’outils du générateur, cliquez sur le bouton Save (Enregistrer).
- Lorsque le message Saved successfully (Enregistrement réussi) apparaît, cliquez sur le bouton Preview (Aperçu).
Une nouvelle fenêtre de navigateur apparaît avec votre application.
- Testez l’application en explorant la carte, le diagramme et le récit.
- Redimensionnez la fenêtre du navigateur pour tester la mise en page de l’application dans différentes tailles d’écran.
- Retournez dans l’onglet de mise à jour Experience Builder. Dans la barre d’outils du générateur, cliquez sur Publish (Publier).
Vous allez également mettre à jour les paramètres de partage de l’application afin que celle-ci soit accessible au public.
- Cliquez sur le bouton More (Plus) puis sur Change share settings (Modifier les paramètres de partage).
La page des éléments s’affiche pour l’application Web.
- Cliquez sur Share (Partager).
- Cliquez sur Everyone (public) [Tout le monde (public)], puis sur Save (Enregistrer).
Dans ce didacticiel, vous avez créé une application Web à plusieurs pages qui comporte une carte et un récit sur l’occupation des logements aux États-Unis. Vous avez ajouté des widgets interactifs pour améliorer la compréhension que vos lecteurs se font des données. Enfin, vous avez modifié la mise en page pour vous assurer qu’elle fonctionne dans toutes les tailles d’écran.
Avec vos collègues, vous pouvez maintenant intégrer votre travail sur le site Web de votre groupe de défense pour le logement ou partager des liens vers l’application Web sur les réseaux sociaux.
Vous trouverez d’autres didacticiels dans la bibliothèque des didacticiels Learn ArcGIS.
