Rechercher dans le blog

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


ArcGIS API for JavaScript : L'alternative à l'API Google Maps


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 : https://doc.arcgis.com/en/arcgis-online/reference/what-is-agol.htm

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.11'></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 deux 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/Map", "esri/views/MapView"],function(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/Map", "esri/views/MapView"],function(Argument1,Argument2){}


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 deux classes que l'on vient d'importer :

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 "topo" qui est le fond de carte par défaut.

function(Map, MapView)
{ 
map1 = new Map({basemap:"topo"})
}
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.


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(Map, MapView)
 { 
let map1 = new Map({basemap:"topo"})
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.11/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: 15})

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 ...

4 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