Ajoutez des données GeoJSON à votre carte web

La semaine dernière, nous avons vu ensemble comment configurer un projet et afficher une carte dans une scène 3D pour le web dans le premier épisode de la série consacrée à la prise en main de l'API JavaScript d'ArcGIS.

Aujourd'hui, il est temps de rajouter une couche de données à notre carte web. L'API prend en charge de nombreux types de couches de données pour vos applications : des données issues de portails ArcGIS Enterprise ou ArcGIS Online, des services webs ou flux OGC (WFS, WMS, WCS, WMTS), des services issus d'API tierces (OpenStreetMap, Microsoft Bing), et des formats de données ouverts tels que GeoJSON ou CSV.

La donnée que nous voulons mettre en avant via cette application est une donnée issue du portail Open Data de la ville de Paris, Paris | Data, et présente les arbres remarquables de la capitale. La donnée est disponible dans différents formats ; nous allons ici utiliser son format GeoJSON, format très populaire chez les développeurs et facilement exploitable par l'API.

Voici le résultat que nous allons obtenir à la fin du tutoriel d'ajourd'hui :

Les points oranges représentent les arbres remarquables issus du fichier GeoJSON. Voyons comment implémenter cela. Comme la semaine dernière, vous pouvez suivre le tutoriel ci-dessous pas à pas, ou tester le code et ses paramètres en mode bac à sable sur ce CodePen.

Qu'est-ce que le format GeoJSON ?

GeoJSON est un format de données ouvert basé sur la syntaxe JSON (JavaScript Object Notation) et spécialisé pour représenter des informations géographiques. Il est permet de stocker des points, des lignes, des polygones et des collections de ces géométries, ainsi que leurs propriétés associées. Les données GeoJSON sont faciles à lire et à écrire pour les développeurs, et elles peuvent être utilisées dans de nombreux outils et bibliothèques cartographiques, dont l'API JavaScript d'ArcGIS.

Utiliser un GeoJSON avec l'API JavaScript d'ArcGIS

Chargement du module GeoJSON Layer

Avant de pouvoir créer notre couche basée sur le fichier GeoJSON, il faut importer le module de l'API nous permettant de faire cela, en complétant la directive require. Je rajoute donc le chemin d'accès vers le module GeoJSONLayer que nous allons utiliser :

require([
        "esri/Map",
        "esri/Basemap",
        "esri/views/SceneView",
        "esri/layers/GeoJSONLayer",      
      ], 
        
        (Map, Basemap, SceneView ,GeoJSONLayer) => {

Lorsque vous créez vos propres applications, c'est sur l'aide en ligne que vous retrouverez comment compléter la directive lorsque vous souhaitez utiliser un nouveau module :

L'API JavaScript d'ArcGIS vous laisse le choixentre le format AMD (Asynchronous Module Definition) et ESM (ES Modules) pour importer les modules. Pour cette série, j'ai utilisé le format AMD. 

 

Utilisation de la méthode view.when()

Dans l'API JavaScript d'ArcGIS, la méthode view.when() nous permet d'attendre que l'instance de la vue se charge avant d'exécuter les actions suivantes. Nous allons l'ajouter au script à la suite de la création de la vue, et à partir de maintenant, la suite du code que nous écrirons

Cela nous évitera des problèmes de chargement, notamment lorsque nous voudrons modifier la symbologie et les popups de la couche lors des prochaines étapes de cette série.

const view = new SceneView({
    container: "viewDiv",
    map: map,
    camera: {
      position: {
        longitude: 2.340861136194503,
        latitude: 48.88276594605576,
        z: 178.8139155479148
       },
        heading: 29.620133897254565,
        tilt: 65.59724234196116
       } 
     });
          
view.when(() => {
            
    //Nous écrirons ici la suite du code
    
});

Création de l'instance GeoJSONLayer : paramétrage des propriétés

A l'intérieur du view.when(), nous allons maintenant pouvoir créer une instance GeoJSONLayer qui nous permet de créer une couche basée sur un GeoJSON. Nous allons l'appeler arbresRemarquables et paramétrer quelques unes de ses propriétés :

const arbresRemarquables = new GeoJSONLayer({
    url: "https://raw.githubusercontent.com/JapaTests/treesInParis/main/app/arbresremarquablesparis.geojson",
    copyright: "Arbres remarquables - Open portail Paris Data"
});

La propriété la plus importante est l'url, qui va donner le chemin d'accès vers la donnée. L'API JavaScript d'ArcGIS offre différentes options pour utiliser des données GeoJSON. Vous pouvez charger les données à partir d'un fichier GeoJSON local ou les récupérer via une requête HTTP vers une URL distante. Pour notre application, nous utilisons une requête http vers une version du GeoJSON de la donnée disponible sur le portail  Paris | Data que j'héberge sur Github. [Notez que vous pouvez également utiliser un GeoJSON publié sur votre portail ArcGIS Online ou ArcGIS Enterprise, et qu'il faut dans ce cas se servir de la propriété portalItem]

Nous utiliserons ensuite une seconde propriété, copyright, qui pour sa part est optionnelle. Celle-ci nous permet de créditer l'émetteur de la donnée, ici le portail open data de Paris | Data. Cela aura pour effet de rajouter son nom dans le bandeau inférieur présent par défaut dans notre vue cartographique :

Avec ces quelques paramétrages, la couche GeoJSON est prête à être ajoutée dans notre application. Cependant, il existe plein d'autres paramètres sur lesquels vous pouvez agir pour personnaliser davantage le comportement de votre donnée. N'hésitez pas à aller les consulter sur l'aide en ligne de l'API.

Ajout de la couche GeoJSON à la carte

La dernière étape de ce tutoriel consiste à ajouter la couche à la carte. Pour cela, plusieurs possibilité s'offrent à vous : renseigner la propriété layers de l'instance de la carte, utiliser la méthode .add() de la  carte pour ajouter une couche ou encore utiliser la méthode .addMany() de la carte pour ajouter plusieurs couches à la fois. J'ai opté pour la deuxième option, en rajoutant le code suivant après la création de l'instance GeoJSONLayer :

map.add(arbresRemarquables);

J'applique la méthode à ma carte "map" créée dans le dernier tutoriel. En paramètre, je renseigne le nom de la couche à ajouter. Vous devriez maintenant voir apparaître la donnée dans votre application.

Une fois que vous avez importé vos données GeoJSON dans l'API JavaScript d'ArcGIS, vous pouvez les personnaliser pour les rendre plus expressives et informatives, en en modifiant par exemple les symboles, les fenêtres contextuelles ou encore les étiquettes. Chacun de ces points feront l'objet d'un tutoriel dédié dans les semaines à venir.

En attendant, vous pouvez retrouver sur Github ce à quoi devrait ressembler votre code JavaScipt complet à l'issue de ce premier tutoriel, ou le retrouver sur CodePen pour modifier interactivement ses paramètres.

Rendez-vous la semaine prochaine, où nous modifierons la symbologie de la couche fraîchement ajoutée pour lui donner un style plus parlant et plus esthétique. N'hésitez pas à retrouver les autres épisodes de cette série si vous les avez manqués.