ArcGIS API for JavaScript : L'API de mapping la plus efficace et la plus facile à prendre en main pour créer une carte Web
Les tarifs de l'API Google Maps ayant fortement augmenté, les développeurs cherchent des alternatives fiables et crédibles et l'API ArcGIS for JavaScript répond à ces deux besoins. Dans la vidéo suivante, je vous explique comment créer un compte développeur pour développer et déployer des applications gratuitement et créer une carte, le tout en moins de 5 minutes !
Pour en savoir plus sur ArcGIS Online n'hésitez pas à consulter cette
page.
Il existe plusieurs manières pour écrire et tester son code. CodePen permet d'écrire du code et voir instantanément son rendu. Très
utile lorsqu'on veut tester rapidement une fonctionnalité.
Vous pouvez également enregistrer votre fichier html et l'ouvrir en
local, il lancera votre navigateur pour vous afficher votre carte web. Il
existe de nombreux IDE pour écrire votre code: Notepad++, Visual Studio
Code, Sublime Text que j'utiliserai et téléchargeable ici.
Par la suite on utilisera un web server avec node.js.
Squelette HTML de base et import de la librairie ArcGIS API for JavaScript
On va dans un premier temps créer le squelette HTML de base. Notez que dans
Sublime Text, en écrivant simplement <html> et en faisant tabulation,
tout le squelette se génère automatiquement.
On peut écrire notre première instruction, par tradition écrivons "Hello
World" dans la balise <body> et vérifions que tout va bien. On donne
le titre "Ma première carte web" à la balise <title>
</title>
Nous allons ajouter toutes les librairies les plus récentes nécessaires
pour importer les classes nécessaires à la création d'une carte web et
disponibles en ligne. On les importe au sein de la balise <script>.
Voici à quoi ressemble notre code jusqu'à présent :
<!DOCTYPE html>
<html>
<head>
<title>Ma première carte web</title>
<script src = 'https://js.arcgis.com/4.18'></script>
</head>
<body>
Hello World
</body>Import des classes nécessaires
On a tout ce qu'il faut pour créer une carte mais avant de faire cela il
faut importer les classes dont on a besoin. Tout ce qui est dans la
librairie ne va pas forcément nous intéresser, on utilise alors la fonction
"require". On peut l'utiliser parce qu'on a importé notre API en
ligne dans le code. Cette fonction prend trois arguments :
- un array/tableau qui contiendra les classes dont on a besoin venant de la
librairie
- une fonction qui prend elle aussi en argument les classes qu'on vient
d'importer pour les utiliser au sein de cette fonction. Ainsi les arguments
de la fonction sont les classes contenues dans le tableau défini en premier
argument, dans l'ordre. Comme ci-dessous :
require (["esri/config","esri/Map", "esri/views/MapView"],function(esriConfig, Map, MapView){}Avec cette instruction on importe les classes "esri/Map" et "esri/views/MapView" dans un tableau, puis pour pouvoir utiliser cette classe, le deuxième argument est une fonction qui crée des objets, dans l'ordre de définition des classes. Map est associé à la classe esri/Map et MapView associé à la classe esri/views/MapView. Notez qu'on aurait pu écrire autre chose dans la fonction, ce qui importe c'est l'ordre :
require (["esri/config","esri/Map", "esri/views/MapView"],function(Argument1,Argument2,Argument3){}Vous pouvez retrouver toutes les classes de l'API et leur documentation dans l'API reference. C'est un outil fondamental pour travailler avec notre API et on l'utilisera régulièrement. On s'en servira pour comprendre quelles sont les propriétés des classes qu'on a importé pour définir les objets.
Création de la carte
Définissons les trois classes que l'on vient d'importer :Ajout de l'API Key avec la classe config
Les clés d'API (API Key) sont nécessaires pour accéder aux services ArcGIS,
tels que les fonds de carte (basemap), le géocodage, le calcul
d'itinéraires, etc.
Dans le code, la classe
config permet de configurer les propriétés globales de la librairie. Elle
contient plusieurs propriétés dont apiKey qui consiste en une chaîne de caractère d'autorisation utilisée pour accéder à une
ressource ou un service ou
portalUrl pour référencer l'Url d'un portail ArcGIS Enterprise.
Comment créer une API Key ?
Pour en avoir une il suffit d'accéder à votre tableau de bord au sein de
votre compte Essentials ArcGIS for Developers et copiez votre clé API
par défaut ou créez en une. Vous pouvez ensuite l'inclure dans votre code
pour avoir accès aux services ArcGIS Platform (fonds de cartes, calcul
d'itinéraires, géocodage ...).
La classe Map
La classe
Map contient des propriétés et des méthodes pour stocker, gérer et superposer
des couches communes aux visualisations 2D (et 3D, on le verra plus tard).
Les calques peuvent être ajoutés et supprimés de la carte, mais ils sont
rendus via MapView (pour afficher des données en 2D). Ainsi, une
instance de carte est un simple conteneur qui contient les couches, tandis
que la Vue permet d'afficher et d'interagir avec les couches et le fond de
carte d'une carte ce que permet de faire MapView. Une seule carte
peut être référencée par plusieurs vues.
On crée un objet, donnez lui le nom que vous voulez, je vais l'appeler
map1, et comme dans la fonction j'ai créé une instance Map, je peux
créer un objet new Map. J'aurais aussi pu l'appeler New Argument1
si j'avais gardé le nom comme dans l'exemple précédent.
Je dois donner au minimum la propriété " basemap" (fond de carte) pour
voir un fond de carte. Parmi les nombreux fonds de cartes que nous
disposons, nous allons choisir "arcgis-topographic" qui est le fond de
carte par défaut.
Pour activer l'accès au service de couche de fond de carte, définissez la propriété apiKey () de la carte.
function(esriConfig,Map, MapView){esriConfig.apiKey = "YOUR-API-KEY"
map1 = new Map({basemap:"arcgis-topographic"}) // Basemap layer service
}Retrouvez tous les noms des fonds de cartes ici : https://developers.arcgis.com/javascript/latest/api-reference/esri-WebScene.html#basemap
Mais avant de pouvoir visualiser notre carte il faut créer une vue, ce
que nous venons de définir (map1) sera une propriété de cette vue.
La classe MapView
MapView affiche une vue 2D d'une instance de carte. Une instance de
MapView doit être créée pour rendre une carte (avec ses couches
opérationnelle et de base) en 2D. Pour qu'une carte soit visible par
l'utilisateur dans le DOM (Document Objet Model), un MapView doit
être créé et faire référence à un minimum de deux objets: une instance de carte et un élément DOM.
Chacun est défini dans les propriétés "map" et "container"
respectivement. Une instance de Map est un composant essentiel de
MapView.
Un objet Map doit donc être créé avant une vue pour pouvoir être
passé dans la propriété map de cette vue. On donne donc la valeur
map1 à la propriété "map".
Voici ce que ça donne :
function(esriConfig, Map, MapView) {esriConfig.apiKey = "YOUR-API-KEY"
let map1 = new Map({basemap:"arcgis-topographic"})
let mapview = new MapView({container: "carte", map: map1});
}On définit la propriété "container" pour savoir où on veut que la carte soit rendue. Pour cela il faut créer un div dans le <body> </body> et donner un id à ce div. Cet id sera la valeur donnée à la propriété "container". C'est également dans ce div qu'on définit la taille de notre carte.
<body>
<div id = 'carte' style = 'width:500px;height:500px'></div>
</body>
Votre carte devrait s'afficher maintenant ! N'hésitez pas à changer les
valeurs de width et de height pour changer la largeur et la
hauteur de la carte dans votre page, vous pouvez mettre un pourcentage
pour que la carte s'adapte à votre page web.
Pour la rentre plus jolie on va importer un fichier de style css :
<link rel = "stylesheet" href = "https://js.arcgis.com/4.18/esri/css/main.css">
La carte a maintenant un widget pour zoomer et dézoomer (au lieu du texte "Zoom avant" et "Zoom arrière" sous la carte) et la signature Esri !
Center et zoomer sur sa carte
La classe MapView doit contenir un minimum de deux propriétés pour
que la vue fonctionne, mais il est possible d'en ajouter de nombreuses.
Nous allons voir qu'on peut choisir où la carte est centrée et effectuer
un zoom.
Lancez votre fichier html. Une fois dans le navigateur, vous pouvez
ouvrir l'outil "dev tools" avec Ctrl + Maj + I en même temps. Dans
votre carte, naviguez où vous voulez, par exemple sur Paris et
rapprochez-vous de la ville. Nous allons chercher la latitude, la
longitude et le zoom directement dans l'outil de développement. En effet,
en naviguant sur la carte, vous actualisez en permanence ces propriétés.
Nous allons simplement les récupérer.
En tapant mapview.center vous aurez accès à toutes les propriétés du
center dont la latitude et longitude. Vous pouvez également faire
mapview.center.longitude et mapview.center.latitude.
Une fois que vous êtes satisfaits du niveau de zoom et de votre centre
alors nous pouvons les inclure dans les propriétés center et zoom de
mapview :
let mapview = new MapView({container: "carte", map: map1, center: [2.2505492158227987,48.82639566683736], zoom: 14})|
|
Le code complet est retrouvable sur mon github ! Pour visualiser l'application cliquez ici.
N'hésitez pas à me dire si vous avez des questions, j'y répondrais avec plaisir!
Dans le prochain article nous verrons comment enrichir votre carte avec
divers éléments : couches, fonctionnalités …
Pour en savoir plus sur l'offre développeur, regardez
mon article de février 2021
décrivant l'offre développeur, permettant d'utiliser des services d'ArcGIS
Platform utilisables avec Mapbox GL JS, Leaflet et OpenLayers, et un
business model efficace.
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.
Bonjour,
RépondreSupprimerPeux-t-on intégrer le widget Directions (calcul d'itinéraire) sur une page web afin d'avoir uniquement la distance et le temps de parcours ?
Bien à vous,
Bonjour,
RépondreSupprimerMerci pour votre intérêt et votre question !
Le widget "direction" qui permet de voir le temps de parcours et la distance est forcément ajouté à une "vue" (https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html) qui a besoin d'une carte pour fonctionner car le widget offre le choix de pouvoir cliquer sur la carte pour sélectionner les itinéraires entre 2 points. Pour savoir comment faire vous pouvez regarder le tutoriel suivant : https://developers.arcgis.com/labs/javascript/driving-directions/ mais je ferais un article prochainement dessus !
A bientôt
Bonjour,
RépondreSupprimerLe lien sur votre github donne une erreur 404 :-(
Bonjour,
RépondreSupprimerMerci de votre remarque ! J'ai corrigé le lien github :)
Sinon le voici juste ici également : https://github.com/Sebastiensz/API-ArcGIS-for-JavaScript/blob/master/Cr%C3%A9ez%20facilement%20une%20carte%20pour%20votre%20site%20web/firstwebmap.html
Bonjour Sébastien,
RépondreSupprimerdans le dossier github que j'ai téléchargé, le fichier firstwebmap.html contenait des cordonnées géographiques inversées
Bonjour Sébastien,
RépondreSupprimerJe cherche à ajouter un champ de recherche "sur" la carte, pas au dessus ni en dessous mais à l'intérieur de la carte, comment procéder ? Merci
Bonjour, excusez-moi pour ma réponse tardive. Vous voulez ajouter un widget de recherche de lieux géographiques sur la carte ? Dans ce cas voici vous devez utilisez
SupprimerVoici un exemple dont vous pouvez vous inspirer : https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-3d/index.html#:~:text=The%20search%20widget%20provides%20a,zoom%20to%20the%20top%20result.
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
Concrètement il faut l'intégrer de la manière suivante :
const searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-left",
index: 2
});
Bonjour
RépondreSupprimerLe lien sur le terme alternative pointe vers une erreur.
Et ou petit on trouver le plan tarifaire ?
Bonjour désolé de ma réponse tardive, et merci beaucoup pour le bug. J'ai corrigé.
SupprimerVous pouvez retrouvez les informations tarifaires sur ces liens : https://www.codethemap.fr/2019/05/arcgis-api-for-javascript-une.html
https://www.codethemap.fr/2019/02/arcgis-for-developers-decouvrez-une.html
https://developers.arcgis.com/pricing/
En gros, si votre usage n'est pas destiné à créer à une application commerciale qui va vous générez des revenus alors vous pouvez l'utiliser gratuitement. Sinon il vous faut au minimum un plan "Builder".
comment voir des cours complets en JS
RépondreSupprimerSur ce blog j'écris des articles détaillant tout pour prendre en main notre API JavaScript et apprendre le javascript par la même occasion.
SupprimerLe site développeur aide pas mal aussi : https://developers.arcgis.com/javascript/latest/
Sinon pour le javascript vous pouvez voir ici : https://www.w3schools.com/js/DEFAULT.asp et https://developer.mozilla.org/en-US/docs/Web/JavaScript
Bonjour
RépondreSupprimerJe m'appelle Assif et suis néophyte en code.
Je souhaite ajouter sur un tiers de ma page une carte de trafic routier en temps réel. Comment dois-je procéder ?
Merci pour votre aide