La carto web devient encore plus simple avec les Composants du SDK JavaScript d'ArcGIS

Le SDK d'ArcGIS pour JavaScript vous permet de créer des applications cartographiques pour le web, en 2D et en 3D, et en intégrant tout le savoir faire d'Esri en terme d'intelligence géographique. Très puissant, ce SDK présente une prise en main relativement facile, à condition d'avoir des connaissances basiques en JavaScript. 

Cependant, avec la dernière mise à jour sortie en octobre dernier (4.28), ce prérequis n'est même plus nécessaire, avec l'introduction des Composants Maps SDK (pour l'instant en bêta). Que sont ces composants, comment s'en servir et quels avantages offrent-ils? C'est ce que nous allons voir dans cet article.

Qu'est-ce qu'un composant web ?

Les composants web, ce sont des éléments réutilisables vous permettant de construire des pages web, chaque élément encapsulant une fonctionnalité ou un élément d'interface spécifique. Ces composants peuvent inclure du code HTML, CSS et JavaScript, et leur but est de favoriser la réutilisation du code : plutôt que de réécrire le même code pour des fonctionnalités similaires sur différentes parties d'un site web, l'idée est de créer un composant réutilisable et l'utiliser à plusieurs endroits. En utilisant les composants du SDK JavaScript d'ArcGIS, vous pourrez ainsi utiliser des composants déjà préconfigurés, et les intégrer en quelques lignes très simple d'HTML uniquement.

Pour faire un parallèle assez simple avec une technologie dont nous avons déjà parlé quelques fois sur ce blog, la logique des composants du SDK JavaScript d'ArcGIS est identique à celui des composants de Calcite, le design system d'Esri, dont j'avais parlé plus en détail ici.

Quels types de composants sont disponibles avec le SDK d'ArcGIS ?

Pour l'instant, le SDK JavaScript d'ArcGIS propose trois packages de composants permettant d'étendre le SDK en éléments HTML réutilisables :

• Les composants carte contiennent la carte ou la scène, ainsi que tous les widgets pouvant y être associés ;
• Les composants code ont sont destinés à soutenir l'activité de codage. Pour l'instant, le composant d'édition d'Arcade est la principale fonctionnalité ;
• Les composants communs peuvent être utilisés avec les autres packages pour fournir des fonctionnalités supplémentaires (comme par exemple des clés d'API).
  

Comment se servir d'un composant pour son application?

Intégrer une carte à son site web devient extrêmement simple : directement au sein du HTML, il vous suffit d'utiliser la balise <arcgis-map> puis de renseigner l'identifiant de la carte publiée sur votre portail ArcGIS :  

<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"/>

Comme évoqué dans l'article d'octobre, il est également possible d'ajouter différent widgets à cette carte, tous les widgets disponibles avec le SDK JavaScript étant accessibles sous forme de composants également : 

<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
    <arcgis-search position="top-right" />
    <arcgis-legend position="bottom-left" expandable/>
    <arcgis-basemap-toggle position="bottom-right" /> 
</arcgis-map> 

Pourquoi les développeurs d'Esri favorisent-ils les composants?

Chez Esri, les composants web ont une histoire assez riche. Leurs équipes de développement ont adopté les composants comme éléments fondamentaux de leur processus de développement, ce qui leur a permis de créer une large gamme d'éléments HTML réutilisables et agnostiques, c'est-à-dire qu'ils ne sont pas liés à un framework spécifique (React, Angular, Vue...). Comme évoqué plutôt, c'est aussi cette logique qui est utilisée pour Calcite, leur design system. Cette adoption des composants web permet à Esri d'unifier le développement et de garantir des expériences utilisateur cohérente entre les différentes solutions de la gamme ArcGIS.

 

En termes de paradigmes de programmation, les composants du SDK JavaScript offrent une approche déclarative, alors que le SDK JavaScript a lui traditionnellement suivi une approche essentiellement impérative/procédurale. 

Avec les composants, les développeurs peuvent s'appuyer sur des expériences ArcGIS préconstruites qui réduisent le besoin de code gabarit et se concentrent sur l'utilisation de balises HTML pour accomplir la plupart, voire la totalité, des tâches requises. Cela simplifie le processus d'intégration des fonctionnalités ArcGIS dans votre application. 

De son côté, le SDK JavaScript offre un contrôle étendu sur l'état de l'application et le flux d'exécution en permettant aux développeurs d'écrire des instructions détaillées.

Comment les composants impactent-ils le code de vos applications?

Pour mieux comprendre comment vous pourriez créer une carte web basique en utilisant l'approche impérative avec le SDK JavaScript, vous pouvez voir l'exemple dans ce Codepen. JavaScript est utilisé pour manipuler l'élément de conteneur <div id="viewDiv"></div>, qui est chargé d'afficher la carte et ses widgets.

Dans ce second Codepen, nous pouvons voir comment recréer la même carte web, mais cette fois-ci en utilisant les composants. Comme vous pouvez le voir, il n'est plus nécessaire d'utiliser JavaScript pour intégrer la carte et ses widgets. Cela élimine le besoin du conteneur viewDiv. Cela supprime  la nécessité d'initialiser séparément la WebMap et la MapView.

Notez que même si l'exemple a été réalisé uniquement avec des composants web, l'API sous-jacente est toujours disponible, ce qui crée un équilibre entre les paradigmes de programmation impérative et déclarative. Cette flexibilité vous permet de bénéficier des avantages des deux approches.