Utilisez les services géospatiaux ArcGIS avec Mapbox GL JS

Les services géospatiaux d'ArcGIS Platform sont utilisables avec l'API ArcGIS JS pour réaliser de belles applications cartocentriques, vous pouvez dans cet article voir comment utiliser les services géospatiaux de fonds de cartes avec les API keys en 5 minutes.

Et comme expliqué dans cet article présentant l'offre à destination des développeurs ArcGIS Platform, les services géospatiaux d'ArcGIS Platform sont compatibles avec les APIs de mapping principales comme Leaflet, OpenLayers et Mapbox GL JS. Dans cet article, nous allons voir comment au sein d'une application réalisée avec Mapbox GL JS utiliser des services géospatiaux ArcGIS Platform.

Mapbox GL JS est une bibliothèque JavaScript qui utilise WebGL pour rendre des cartes interactives à partir de tuiles vectorielles. Je vais ici vous aider à commencer à travailler avec Mapbox GL JS et les services géospatiaux ArcGIS pour créer différents types d'applications cartographiques.

Cet article vous a montré qu'ArcGIS Platform prend en charge l'authentification standard de l'industrie via l'utilisation des API key. Pour rappel, une API key est un identifiant unique utilisé pour authentifier un utilisateur, un développeur ou un programme appelant auprès d'une API. Cependant, ils sont généralement utilisés pour authentifier un projet avec l'API plutôt qu'avec un utilisateur humain.

Et comme nous l'avons vu, pour accéder aux services géospatiaux, vous avez besoin d'un compte de développeur ArcGIS gratuit et d'une API key accessible depuis votre tableau de bord.

Découvrez comment afficher une carte avec une couche de fond de carte à l'aide de Mapbox GL JS.

Vous pouvez afficher une carte dans Mapbox GL JS en utilisant une couche de fond de carte de tuiles vectorielles à partir des services de couche de fond de carte. Une couche de fond de carte de tuiles vectorielles est un style Mapbox GL contenant une source, des couches, des glyphes de police et des icônes pour rendre les couches.

Ici, vous affichez une carte des montagnes de Paris à l'aide de la couche de fond de carte des rues du service de couche de fond de carte. Retrouvez tout le code ici.

Prérequis

Dans CodePen, ajoutez du HTML et du CSS pour créer une page avec un élément div appelé map.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Mapbox GL JS Tutorials: Display a map</title> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> </head> <body> <div id="map"></div> </body></html>

Dans la balise <head>, ajoutez des références à la bibliothèque JS et CSS Mapbox GL JS.

Créer une carte

Utilisez une Map pour ajouter une carte à votre div avec le fond de carte que vous spécifiez.

La classe Map utilise l'élément HTML map pour afficher le contenu de la carte et pour fournir une interface utilisateur avec laquelle interagir. Il prend en charge le clic, le zoom, le panoramique, la rotation et l'inclinaison de la perspective de la carte. Il vous permet également d'interagir et de découvrir des informations sur les données cartographiques, telles que la recherche d'entités sur lesquelles l'utilisateur clique sur la souris. Vous pouvez également l'utiliser pour modifier les données affichées, en ajoutant de nouvelles sources ou en modifiant les propriétés des calques.

Pour plus d'informations, consultez la documentation de Mapbox GL JS.

1/ Ajoutez une section <script> ... </script> à la fin de la section <body> ... </body>.

2/ Créez une variable apiKey pour stocker votre clé API. Remplacez YOUR-API-KEY par la clé API que vous avez précédemment copiée à partir du tableau de bord du développeur. Vous devrez l'inclure dans l'URL de chaque service ArcGIS auquel vous accédez. Vous n'avez pas besoin de définir mapboxgl.accessToken. Créez une variable basemapEnum pour stocker l'identificateur de fond de carte, ArcGIS: Streets.

const apiKey = "YOUR-API-KEY"; const basemapEnum = "ArcGIS:Streets";

3/ Créez une Map avec des options pour contrôler son affichage et son comportement. Définissez la propriété du conteneur sur l'ID de carte du div que vous avez créé. La propriété style fait référence à l'emplacement du service de couche de fond de carte et contient l'identificateur de fond de carte et votre clé API.

const map = new mapboxgl.Map({ container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`, zoom: 12, // starting zoom center: [2.3522,48.8566] // starting location [longitude, latitude] });

Exécutez l'application

Dans CodePen, exécutez votre code pour afficher la carte.

La carte doit afficher la couche de fond de carte topographique pour Paris.

Afficher une couche de tuile vectorielle

Une couche de fond de carte fournit le contexte visuel d'une carte. Vous pouvez utiliser les styles de couche de fond de carte par défaut fournis par le service de couche de fond de carte ou vous pouvez créer vos propres styles personnalisés avec ArcGIS Vector Tile Style Editor.

Vous pouvez ajouter une basemap avec les fonds de cartes ArcIGS Platform comme par exemple le fond de carte Streets.

const basemapEnum = "ArcGIS:Streets"

Vous pouvez également accéder à une couche de fond de carte en référençant son ID d'élément. Vous pouvez trouver l'ID d'élément d'une couche en y accédant dans ArcGIS Online ou dans ArcGIS Vector Tile Style Editor. Puis remplacez le basemapId d'ArcGIS: Streets par votre propre ID d'élément.

const basemapEnum = "6976148c11bd497d8624206f9ee03e30"; // Custom vector tile style

Si vous souhaitez utiliser votre propre couche de tuiles vectorielles ou style de couche de fond de carte dans votre application, et si vous disposez d'un compte développeur, vous pouvez utiliser une clé API pour y accéder. Utilisez le tableau de bord développeur pour configurer votre clé API afin de prendre en charge l'accès aux couches de fond de carte et au contenu et aux éléments. Si vous disposez d'une couche et que vous disposez d'un compte ArcGIS Online ou Enterprise, vous ne pouvez pas utiliser de clés API pour accéder aux couches et éléments privés, et vous devez utiliser OAuth 2.0 pour y accéder. Cependant, tous les comptes peuvent accéder aux couches publiques. En savoir plus dans S écurité et authentification - OAuth2.0.

Pour aller plus loin, retrouvez tous les tutoriels pour utiliser les autres services géospatiaux d'ArcGIS dans Mapbox GL JS ici.

Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web d'applications cartographiques et découvrir comment notre API est une superbe alternative à Google Maps !

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.