Utilisez les services géospatiaux ArcGIS avec Esri Leaflet
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.
Esri Leaflet est un ensemble léger d'outils JavaScript permettant d'accéder
aux services de localisation ArcGIS. Cet article va vous apprendre à
développer des applications de cartographie et de localisation avec Esri
Leaflet et les services géospatiaux ArcGIS.
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 Leaflet.
Vous pouvez afficher une carte avec Esri Leaflet 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
contient les styles, les couches, les glyphes de police et les icônes
pour rendre les couches.
Nous allons voir ici comment afficher une carte 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
Créez une page HTML avec des références à Leaflet, Esri
Leaflet. Ceux-ci sont nécessaires pour accéder et afficher les
couches de fond de carte de tuiles vectorielles.
- Dans le <head>, ajoutez des éléments <script>
pour faire référence aux bibliothèques.
- Dans le <head>, ajoutez un élément <style> pour
donner un style à la page et à la carte.
- Dans le <body>, ajoutez un élément <div> pour la
carte.
Créez une page HTML avec des références à Leaflet, Esri
Leaflet. Ceux-ci sont nécessaires pour accéder et afficher les
couches de fond de carte de tuiles vectorielles.
- Dans le <head>, ajoutez des éléments <script>
pour faire référence aux bibliothèques.
- Dans le <head>, ajoutez un élément <style> pour
donner un style à la page et à la carte.
- Dans le <body>, ajoutez un élément <div> pour la
carte.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Esri Leaflet</title>
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>
<style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232;
} </style>
</head>
<body>
<div id="map"></div>
</body>
</html>
Créer une carte
1/ Dans l'élément <body>, ajoutez l'élément <script> avec du
code pour créer une carte.
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. Créez une variable basemapEnum pour stocker
l'identificateur de fond de carte, "ArcGIS: Streets".
3/ Passer la variable basemapEnum contenant votre basemap dans
l'objet L.esri.Vector.vectorBasemapLayer
<script>
const apiKey = "YOUR-API-KEY"; const basemapEnum = "ArcGIS:Streets";
const map = L.map('map', { minZoom: 2
}).setView([48.8566,2.3522], 11);
L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey
}).addTo(map);
</script>
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.
Pour aller plus loin nous allons ajouter un outil de recherche d'adresse :
4/ On importe le module Esri Leaflet Geocoder à partir du CDN.
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.css">
<script src="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.js"></script>
5/ Le géocodage fait parti des services géospatiaux d'ArcGIS Platform, il
faut donc pour l'utiliser référencer notre API Key.
Ajouter dans le script à la suite de l'ajout de la basemap à la
carte le code suivant :
const
searchControl = L.esri.Geocoding.geosearch({
position: "topright", placeholder: "Enter an address or place e.g. 1 York St", useMapBounds: false, providers: [L.esri.Geocoding.arcgisOnlineProvider({
apikey: apiKey, nearby: { lat: -33.8688, lng: 151.2093
},
})]
}).addTo(map);
const
results = L.layerGroup().addTo(map);
searchControl.on("results", (data) => {
results.clearLayers(); for (let i = data.results.length - 1; i >= 0; i--) { const lngLatString = `${Math.round(data.results[i].latlng.lng * 100000)/100000}, ${Math.round(data.results[i].latlng.lat * 100000)/100000}`; const
marker = L.marker(data.results[i].latlng);
marker.bindPopup(`<b>${lngLatString}</b><p>${data.results[i].properties.LongLabel}</p>`)
results.addLayer(marker);
marker.openPopup();
}
});
6/ Dans CodePen, exécutez votre code pour afficher la carte.
Cliquez sur le contrôle du géocodeur et entrez une adresse ou un lieu
comme "Starbucks". Lorsque vous sélectionnez un résultat, la carte
effectue un zoom sur son emplacement.
Pour aller plus loin, retrouvez tous les tutoriels pour utiliser les
autres services géospatiaux d'ArcGIS Platform dans Esri Leaflet 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.
Aucun commentaire:
Enregistrer un commentaire