Rechercher dans le blog

Un mardi, une appli #21 : les Sept Sommets



Bonjour à tous !

Comme promis dans l’article de la semaine dernière sur les nouveautés de la version 4.25 de l’ArcGIS API for JavaScript, je vous propose aujourd’hui un nouveau numéro de la série Un mardi, une appli.

J’ai découvert cette très belle application permettant d’explorer le point le plus profond de chaque océan, « The Five Deeps », développée par Raluca Nicola d’Esri dont je vous conseille fortement de découvrir le travail (et dont certaines applications ont déjà été examinées sur ce blog, par exemple ici).

Nous allons nous inspirer de cette application pour créer ensemble son homologue présentant les points culminants de chacun des continents, que nous nommerons  « Les Sept Sommets».


L'appli

Les Septs Sommets (Seven Summits) sont un challenge mythique de l’alpinisme consistant à gravir le sommet de chacun des sept continents : le Mont Vinson (Antarctique), le Kilimandjaro (Afrique), l’Aconcagua (Amérique du Sud), l’Everest (Asie), le Denali aussi appelé McKinley (Amérique du Nord), l’Elbrouz (Europe) et le Puncak Jaya aussi connu sous le nom de Pyramide de Carstensz (Océanie).  

En 3D, l’application permet de parcourir chacun de ces points culminants sous la forme de points d’intérêt interrogeables.

 

Le code

L’application se base sur l’API JavaScript d’ArcGIS, et vous pouvez en retrouver le code commenté sur mon Github.

 

Configuration de la carte et de la scène 3D

Nous commençons par créer la carte, qui utilisera en tant que fond de carte deux couches de tuile qui seront mélangées avec le mode de fusion produit (multiply). Vous pouvez bien sûr utiliser n’importe quelle autre fond de carte de votre choix.

Cette carte est appelée dans une vue 3D (scène), dont nous choisissons l’échelle et le point central d’affichage. Notez que c’est également à cette étape que nous commençons à configurer les popups qui apparaîtront lorsque nous interrogerons les points, pour que celles-ci soient ancrées en bas à droite de l’écran et non flottantes.

 

Configuration et ajout des couches à la carte

Il est maintenant temps de référencer les différentes couches. Commençons par la couche d’élévation, qui est ici une couche exagérée verticalement d’un facteur 3,5 pour accentuer les points culminants. Celle-ci est ajoutée à la carte en tante que couche de configuration du sol.

Nous allons ensuite ajouter des nuages, pour l'esthétisme de ce globe. Nous utilisons pour cela un MediaLayer, nouvelle fonctionnalité de la version 4.24 de l’API permettant de superposer des images à notre carte.

 

Maintenant, nous allons nous occuper de la couche d'entités contenant les sommets. Celle-ci est hébergée sur une organisation ArcGIS Online et est donc exposée grâce à l’API REST, vous pouvez retrouver toutes les informations sur cette couche ici.

Sur cette couche, nous commençons donc par configurer les fenêtres contextuelles (popups) qui apparaîtront lorsque nous cliquerons sur un point.

Nous modifions ensuite la symbologie qui s’affichera pour les points. Tous les points s’afficheront de la même manière, nous utiliserons donc un rendu simple.

Enfin, nous pouvons référencer la couche et configurer les labels qui apparaîtront à côté de chacun des points, pour que l'utilisateur puisse voir le nom des sommets sans avoir à cliquer dessus. 

 

Notez qu'au fur et à mesure, nous avons ajouté individuellement les couches après leur référencement avec la méthode add() appliquée à la carte. Sachez qu'il est possible de les ajouter toutes en une seule fois dans un tableau grâce avec la méthode addMany() ou directement dans le constructeur de la carte avec la propriété layers.


Ajustements esthétiques

Nous allons enfin ajouter les fonctions permettant de faire tourner la planète et de rendre les nuages plus transparents lors du zoom pour éviter qu’ils ne gênent.

La toute dernière étape consiste à supprimer les widgets automatiquement ajoutés par l’API (NavigationToggle, Zoom et Compass), pour épurer l’interface.


Mot de la fin

Et voilà, le code JavaScript de l’application est terminé ! N’hésitez pas à aller jeter un coup d’œil au code de l’application « The Five Deeps », également disponible sur Github. Vous verrez que nous en avons repris les éléments essentiels en les simplifiant pour cet article, mais le code original vous permettra de voir comment l’API Javascript d'ArcGIS peut être intégrée au sein d’un code plus poussé, avec un important travail sur le style.

A bientôt pour un nouvel article, qui devrait cette fois-ci parler de l'ArcGIS API for Python !

 


 

Aucun commentaire:

Enregistrer un commentaire