Rechercher dans le blog

Créez facilement une carte pour votre site Web en moins de 5 minutes !

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
}
Nous disposons de nombreux fonds de cartes : topo, satellite, streets, osm, hybrid, terrain ... N'hésitez pas à tester ces fonds de carte dans la propriété basemap.
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})

avec center: [longitude, latitude]
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.

12 commentaires:

  1. Bonjour,
    Peux-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,

    RépondreSupprimer
  2. Bonjour,
    Merci 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

    RépondreSupprimer
  3. Bonjour,

    Le lien sur votre github donne une erreur 404 :-(

    RépondreSupprimer
  4. Bonjour,

    Merci 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

    RépondreSupprimer
  5. Bonjour Sébastien,

    dans le dossier github que j'ai téléchargé, le fichier firstwebmap.html contenait des cordonnées géographiques inversées

    RépondreSupprimer
  6. Bonjour Sébastien,
    Je 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

    RépondreSupprimer
    Réponses
    1. 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

      Voici 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
      });

      Supprimer
  7. Bonjour
    Le lien sur le terme alternative pointe vers une erreur.
    Et ou petit on trouver le plan tarifaire ?

    RépondreSupprimer
    Réponses
    1. Bonjour désolé de ma réponse tardive, et merci beaucoup pour le bug. J'ai corrigé.
      Vous 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".

      Supprimer
  8. comment voir des cours complets en JS

    RépondreSupprimer
    Réponses
    1. Sur 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.
      Le 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

      Supprimer
  9. Bonjour

    Je 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

    RépondreSupprimer