Exploitez des données libres (GeoJSON, CSV) dans vos Web apps cartographiques

Pour répondre aux exigences des utilisateurs et être la plus polyvalente possible, l'ArcGIS API for JavaScript est capable de lire de plus en plus de type de données, y compris pour les développeurs qui ne sont pas clients Esri. Le format GeoJSON a été ajouté dans l’API lors de la mise à jour de Mars.

Nous allons voir dans cet article quel est ce format, pourquoi il est utile et comment l'ajouter à une application web en jouant sur sa symbologie. Nous verrons également qu'on peut utiliser le format CSV, format également très répandu.

Le format GeoJSON

Le format GeoJSON a été introduit en 2008 par une communauté de développeurs. Il vient de l'anglais Geographic JSON et permet de décrire selon le formalisme JSON des données géométriques de type point, ligne, chaîne de caractères, polygone, ainsi que des ensembles et sous-ensembles de ces types de données et d'y ajouter des attributs d'informations qui ne sont pas spatiales des entités d'une couche.

Vous pouvez consulter le tableau ci-dessous pour connaître les objets de géométrie pris en charge par le GeoJSON et leurs types de géométrie correspondants:

GeoJSON Geometry Object	API Geometry Type
Point	Point
MultiPoint	Multipoint
LineString/MultiLineString	Polyligne
Polygon/MultiPolygon	Polygone

Objets 

Type	Exemples
Point		{ "type": "Point", "coordinates": [30, 10] }
Segments		{ "type": "LineString", "coordinates": [ [30, 10], [10, 30], [40, 40] ] }
Polygones		{ "type": "Polygon", "coordinates": [ [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]] ] }
		{ "type": "Polygon", "coordinates": [ [[35, 10], [45, 45], [15, 40], [10, 20], [35, 10]], [[20, 30], [35, 35], [30, 20], [20, 30]] ] }

Ce format est devenu un standard de fait, bien qu'il ne soit pas un standard officiel, en permettant à de nombreux développeurs d'étendre leurs APIs et leurs services avec des capacités géographiques. 

Pour en savoir plus sur le format GeoJSON : https://tools.ietf.org/html/rfc7946

Avantage du GeoJSON

L'avantage de ce format c'est que tout est dans un seul fichier et il est lisible par un humain avec un éditeur de texte par exemple.

Il standardise cette façon de transmettre l'information. Plusieurs fournisseurs l'adoptent et nous obtenons ainsi des API sur le Web qui fonctionnent de la même manière.

Le JSON présente l'avantage d'être peu verbeux, en opposition au XML, ce qui est un avantage dans la mesure ou les données géographiques sont souvent très denses et demanderaient alors beaucoup de balise pour être représentées en XML

De manière plus claire, le GeoJSON est une manière de représenter des données géolocalisées, que ce soit des points, des traces ou des zones. Ces données peuvent être par exemple des parcelles agricoles ou urbaines. Une fois ces données en votre possession il ne vous restent plus qu'à les associer à un fond de carte pour obtenir une carte complète.

Son gros avantage est donc d'être un format ouvert, et donc gratuit et compatible avec de très nombreuses ressources et logiciels.

Utilisation dans l'ArcGIS API for JavaScript

La classe GeoJSONLayer est utilisée pour créer une couche basée sur le format GeoJSON, on la charge donc dans le require. Les données GeoJSON doivent être conformes à la spécification RFC 7946 qui stipule que les coordonnées sont en SpatialReference.WGS84.

GeoJSONLayer vous permet d'ajouter des fonctionnalités à partir d'un fichier GeoJSON (.geojson). Le fichier est référencé en tant que fichier hébergé sur le Web. Pour cette raison, le fichier doit être accessible au public.

Cet exemple montre comment ajouter une instance de GeoJSONLayer à une carte dans un MapView. Les entités ponctuelles résultantes peuvent être interrogées via l'API, puis utilisées comme entrée pour d'autres opérations. Si les fichiers GeoJSON ne se trouvent pas sur le même domaine que votre site Web, un serveur compatible CORS est requis (ou un proxy).

Pour utiliser ce type de données, comme d’habitude on importe la classe dans le require et on définit l’instance dans la fonction qui suit. On peut alors créer un objet GeoJSONLayer et définir les propriétés dans son constructeur. Pour les connaitre on va sur le site développeur. Il est nécessaire d'utiliser la propriété url du fichier GeoJSON.

Dans cet exemple spécifique, l'URL du flux en direct des tremblements de terre USGS est ajouté.

var geojsonLayer = new GeoJSONLayer({

  url: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson,

});

Les Popups pour transmettre de l'information

Les fenêtres contextuelles améliorent les applications Web en fournissant aux utilisateurs un moyen simple d'interagir avec les attributs d'une couche et de les afficher. Ils jouent un rôle important dans la transmission d'informations à l'utilisateur, ce qui améliore les capacités de narration de l'application.

Les couches CSVLayer, GeoJSONLayer, ImageryLayer et FeatureLayer possèdent une propriété popupTemplate pour configurer la popup.

On configure alors les propriétés comme un objet JSON :

        const template = {
          title: "Info séisme",
          content: "Magnitude {mag} {type} a frappé {place} le {time}",
          fieldInfos: [
            {
              fieldName: "time",
              format: {
                dateFormat: "short-date-short-time"
              }
            }
          ]
        };

Faisons varier la taille des points dans le Renderer

On l'a vu dans l'article précédent, pour éditer la symbologie, il faut configurer la propriété renderer qui sera affectée à notre couche GeoJSON. On souhaite que la taille des épicentres représentés sur la carte dépendent de la magnitude du séisme. Pour qu'un attribut dépend de la taille, d'après la documentation, je peux choisir SimpleRenderer ou UniqueValueRenderer. Il suffira d'indiquer simple ou unique-value sans charger des modules via le require grâce à l'autocasting.

layer.renderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
}

On définit ensuite qu'on souhaite une variation de taille et les bornes de pixels pour la taille des éléments grâce à la propriété visualVariables de renderer où on y définit :

- le type de symbologie qui sera ici size

- pour quel champ du geojson on l'applique : mag

- les stops correspondant aux bornes

Le code est disponible sur mon github.

Le format CSVLayer

CSVLayer vous permet d'ajouter des fonctionnalités à partir d'un fichier texte (.csv) ou délimité (.txt) contenant des informations séparées par des virgules, comprenant des informations de latitude et de longitude. Le fichier est référencé en tant que fichier hébergé sur le Web. Pour cette raison, le fichier doit être accessible au public. Le fichier doit inclure au moins une paire de champs de coordonnées, ces derniers étant utilisés pour localiser les entités sur la carte. En règle générale, la coordonnée de latitude est la valeur Y et la coordonnée de longitude est la valeur X. Les fonctionnalités du fichier CSV sont accessibles via l'API afin que vous puissiez les interroger et les utiliser en tant qu'entrée pour les services de géométrie ou de géotraitement.

Si les fichiers CSV ne se trouvent pas sur le même domaine que votre site Web, un serveur compatible CORS ou un proxy est requis.

Le code suivant vous montre comment ajouter une nouvelle instance CSVLayer à une carte :

Il faut charger la classe CSVLayer dans le require et définir les propriétés dans son constructeur. Dans cet exemple spécifique, l'URL du fichier csv de tremblements de terre USGS est ajouté

var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
var csvLayer = new CSVLayer({
 url: url,
});
map.add(csvLayer);  // adds the layer to the map

Sur le même principe que précédemment, on peut créer une Scène 3D avec les séismes.

Le Renderer en 3D

Le principe est le même que en 2D, il suffit cette fois de spécifier des points en 3D. Il existe une classe PointSymbol3D() que nous n’avons pas besoin de charger dans le require (tout comme on n’a pas besoin de charger le SimpleRenderer()) grâce à l’autocasting :

   
     csvLayer.renderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "point-3d", // autocasts as new PointSymbol3D()
            symbolLayers: [
              {
                type: "icon", // autocasts as new IconSymbol3DLayer()
                material: { color: [238, 69, 0, 0.75] },
                outline: {
                  width: 0.5,
                  color: "white"
                },
                size: "12px"
              }
            ]
          }
        };

Le code est disponible sur mon github. 

Vous savez comment ajouter deux nouveaux types de données fortement utilisés par la communauté de développeurs, car accessible facilement sur internet : les couches GeoJSON et CSV.

Pour accéder directement à cette application, cliquez ici.

Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.