Au cours de cette
série de tutoriels sur l'API JavaScript d'ArcGIS, nous avons
créé une scène 3D cartographique
au sein de laquelle nous avons
ajouté une couche de données issues d'un GeoJSON, dont nous avons
modifié la symbologie
et
configuré les popups
et les
labels. Nous avons ensuite
utilisé un widget préconfiguré pour faciliter la navigation de
l'utilisateur dans la scène, et enfin tiré parti de Calcite, le Design System d'Esri, pour
intégrer un composant web à l'application.
Aujourd'hui, dans l'ultime épisode de cette série, nous allons configurer
trois derniers détails de notre application : le premier sera un loader, qui
permet d'avertir l'utilisateur que l'application est en train de charger. Le
second est la couleur de sélection des entités de la carte, que nous
paramétrerons aux couleurs de notre charte graphique. Le troisième est une
contrainte des niveaux de zooms maximum et minimum pour la navigation dans la
scène. Après ces trois dernières courtes étapes, notre application sera
terminée !
Comme d'habitude, vous pouvez suivre ci-dessous le tutoriel pas à pas pour
réaliser ces deux étapes, ou vous pouvez vous rendre directement sur
ce CodePen
pour
tester interactivement le code.
Ajouter un loader
Lorsque votre application doit charger des données assez lourdes (à cause de
leur nombre, de leur gourmandise en rendu pour la 3D, etc.), il lui faut
quelques secondes pour s'afficher correctement. Il t être bien à ce moment de
prévenir l'utilisateur que l'application a un temps de chargement et qu'elle
n'est pas encore dans son état final. Pour cela, nous allons afficher un
loader à l'écran jusqu'à ce que l'application ait fini de charger.
Comme
dans le tutoriel de la semaine dernière, nous allons profiter des ressources à mises à disposition par le Design
System d'Esri, Calcite.
Nous utiliserons le composant Loader, dont nous allons modifier interactivement les paramètres dans
le sample de l'aide en ligne
avant de l'intégrer à notre code.
Dans la fonctionnalité "properties" à droite, changez l'échelle (scale) pour
large (l).
Dans la fonctionnalité "theming", utilisez le code couleur suivant :
- --calcite-ui-brand: #473B40;
- --calcite-ui-brand-hover: #7B656F;
- --calcite-ui-brand-press: #BF9DAA
Dans votre HTML, assurez vous que le design system est bien référencé dans le
<head> :
<script type="module" src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js"></script>
Récupérer l'extrait de code HTML que l'aide en ligne a créé pour vous et
ajoutez le dans votre <body> en l'intégrant dans une <div> dont
vous appellerez l'id "loader". Vous pouvez modifier manuellement le label pour
mettre "Chargement de la page" :
<div id="loader">
<calcite-loader label="Chargement de la page" scale="l"></calcite-loader>
</div>
Voici ce à quoi devrait ressembler le <body> final :
Récupérez maintenant le CSS indiqué dans l'aide en ligne et ajoutez-le à votre
propre fichier.
.custom-example-theme {
--calcite-ui-brand: #473b40;
--calcite-ui-brand-hover: #7b656f;
--calcite-ui-brand-press: #bf9daa;
}
Pour l'instant, le code apporte une modification pour les composants inclus
dans une balise de la classe "custom-example-theme". Dans notre HTML, nous
avons ajouté le composant au sein d'une balise <div> dont l'iest
"loader". Il suffit donc de modifier le sélecteur de la règle CSS en indiquant
l'id "loader" (notez ici que nous changeons le "." du sélecteur par un "#".
C'est parce que nous recherchons un id et non une classe) :
#loader {
--calcite-ui-brand: #473b40;
--calcite-ui-brand-hover: #7b656f;
--calcite-ui-brand-press: #bf9daa;
}
Afin que le loader s'affiche bien au centre de la page, nous allons ajouter
quelques déclarations supplémentaires dans cette règle CSS :
#loader {
position: absolute;
top: 40%;
left: 50%;
z-index: 100;
--calcite-ui-brand: #473B40;
--calcite-ui-brand-hover: #7B656F;
--calcite-ui-brand-press: #BF9DAA;
}
Maintenant, votre loader devrait s'afficher parfaitement bien. Un peu trop
bien peut-être...? En effet, nous ne lui avons pas indiqué à quel moment il
devait s'arrêter, et continue donc de tourner même lorsque la page est
chargée. Rendez-vous au sein du JavaScript de votre application, à l'intérieur
duquel nous ajoutons le code suivant :
view.watch("updating", function () {
loader.style.display = "none";
});
Nous ajoutons un écouteur (watch()) sur la propriété "updating" de notre vue
(view), c'est-à dire l'objet contenant la carte, les couches, les widgets etc.
L'écouteur va observer les changements de la propriété qu'il écoute, et
exécuter une fonction à chaque fois qu'un changement se produit. Ici, la
fonction a pour effet de modifier le style de l'élément dont l'identifiant est
"loader", et de définir sa propriété "display" sur "none", ce qui a pour effet
de le masquer. Une fois que tous les éléments de la page ont fini de charger,
la propriété "updating" de la vue passe de true à false, et le loader va de ce
fait disparaître.
Modifier le style de sélection des entités
Pour l'instant, lorsqu'un utilisateur clique sur un arbre pour apprendre plus
d'informations sur celui-ci grâce aux popups, l'arbre sélectionné se surligne
en bleu fluo. Nous allons modifier cette couleur de surlignage :
La modification de la couleur de sélection se fait dans
l'instance de la vue. Nous allons ajouter la propriété
highlightOptions, dont nous allons pouvoir choisir la couleur de remplissage (color),
l'opacité du remplissage (fillOpacity), la couleur du halo (haloColor) et
l'opacité du halo (haloOpacity) :
highlightOptions: { //style des entités sélectionnées
color: [251, 214, 230],
fillOpacity: 0.5,
haloColor: [251, 214, 230],
haloOpacity: 0.5,
},
Notez que si vous le souhaitez, vous pouvez jouer sur d'autres
propriétés du highlight
comme l'ombre par exemple.
Contraindre les niveaux de zoom dans la vue
A l'heure actuelle, l'utilisateur peut zoomer et dézoomer à sa guise dans la
vue de la scène, et obtenir ainsi des points de vue très peu pertinents, comme
par exemple ici :
Sachez que pour éviter cela, vous pouvez contraindre la navigation dans votre
vue avec la propriété
constraints
de votre vue. Toujours dans l'instance de la vue, nous définissons une
altitude maximale et minimale autorisée pour la caméra (donnée en mètres) :
constraints : {
altitude : {
max : 1500,
min : 50
}
},
Désormais, l'utilisateur ne pourra pas zoomer au-delà ou en-dessous d'un
certain seuil, garantissant ainsi une vue correcte sur la donnée.
Le mot de la fin
Et voilà, votre application est terminée ! Cette
série de tutoriels
nous aura permis de voir ensemble des notions socles de l'API JavaScript, mais
également quelques fonctionnalités facultatives permettant de personnaliser
votre application ou de simplifier son développement. Merci à vous d'avoir suivi cette série, et félicitations d'être arrivé jusque ici !
Tout au long des tutoriels, vous aurez vu de nombreuses références à la
documentation de l'API
si vous avez cliqué sur les différents liens parsemant les articles. Cette
documentation, et notamment l'API Reference, renseigne très bien ce que vous pouvez faire avec les différentes classes
de l'API, quelles sont leurs propriétés et comment les renseigner, à quelles
méthodes peut-on faire appel, etc. Je vous conseille donc de vous y référer
sans modération si vous souhaitez coder vos propres applications. Vous pouvez
notamment accéder aux
extraits de code, qui vous montreront comment les ingénieurs développant l'API proposent
d'implémenter telle ou telle fonctionnalité de l'API dans votre code avec des
exemples précis. Pour plus de tutoriels, je vous laisse explorer
l'onglet "Tutoriels"
fraîchement inauguré du blog.
En attendant le prochain article, n'hésitez pas à consulter les différents
billets du format "Un mardi, une appli" où je vous présente une application
cartographique et où je décortique le code JavaScript m'ayant permis de la
créer : nous avons par exemple discuté de l'utilisation de gros volumes de données dans des cartes web, fait une
application en l'honneur des 150 ans du du Tour du Monde en 80 Jours, ou encore
exploré les plus hauts sommets de chacun des continents du globe.
Aucun commentaire:
Enregistrer un commentaire