Une cartographie Leaflet avec Angular

Lorsqu’il s’agit de présenter des informations contenant des données géographiques, la cartographie s’impose naturellement comme une solution à envisager. Ce fut mon cas récemment à l’occasion du développement de Citizen Map, une cartographie des initiatives et des projets citoyens au sein de l’Eurométropole Lille-Kortrijk-Tournai.

Pour ce faire, je me suis appuyé sur une librairie Javascript open source de cartographie nommée Leaflet. De nombreuses ressources expliquant l’utilisation de cette librairie sont disponibles sur internet pour un développement en Javascript. Sauf que dans le cas de Citizen Map, j’ai fait le choix de développer la solution avec un framework front-end basé sur TypeScript : Angular. Malheureusement peu de ressources expliquent l’utilisation de leaflet dans cette configuration. La bonne nouvelle : cet article est là pour vous expliquer comment utiliser leaflet avec le framework Angular.

Angular ou AngularJS ?

Angular, à ne pas confondre avec son prédécesseur AngularJS, est un framework front-end proposé par Google. Angular est une réécriture complète (à partir de la version 2) du framework AngularJS (première version du framework) à commencer par le langage de programmation. En effet, AngularJS se base sur le traditionnel Javascript ; Angular quant à lui s’appuie sur TypeScript, un sur-ensemble de Javascript.

Cela fait beaucoup d’informations dans un seul paragraphe ; n’hésitez pas à cliquer sur les différents liens ci-dessus pour approfondir le sujet, si besoin. Toutefois, je vous rassure, cela ne vous empêchera pas de poursuivre la lecture de cet article.

Création d’un projet Angular

Pour créer notre premier projet Angular, nous allons utiliser Angular CLI, un outil en ligne de commande qui va grandement nous faciliter la tâche. Angular CLI s’installe via le gestionnaire de paquet NPM. Si vous êtes étranger à tout ça, je vous conseille de lire mon article sur les API et Node.JS.

Depuis la console de votre terminal, tapez les commandes suivantes :

La première commande installe Angular CLI, la seconde génère une application Angular nommée frugal-map, la troisième vous permet d’entrer dans le répertoire de l’application nouvellement créée et enfin « ng serve » lance un serveur avec votre application disponible sur http://localhost:4200

Angular CLI a généré un certain nombre de fichiers. Nous allons nous rendre dans le dossier app qui se trouve lui même dans le dossier src. A l’aide de votre éditeur de texte préféré, vous allez modifier le contenu du fichier app.component.html.

Remplacez le contenu par celui ci-dessous :

Vous devriez voir la page d’accueil de l’application modifiée avec notre message de bienvenue.

Installation de la librairie Leaflet

Pour pouvoir utiliser la librairie Leaflet, nous devons l’installer via NPM. Nous devons également installer sa définition en TypeScript, car comme évoqué ci-dessus, le framework Angular est basé sur le langage TypeScript.

Pour ce faire, entrez la commande ci-dessous :

Ensuite, nous allons indiquer à notre application Angular, le dossier dans lequel se trouvent les feuilles de style (css). Cela se fait dans le fichier angular-cli.json disponible à la racine de notre projet.

Enfin, nous allons indiquer à notre application, qu’elle doit utiliser la version TypeScript de la librairie Leaflet. C’est très simple, il suffit d’ajouter « leaflet » dans le tableau « types » qui se trouve dans le fichier tsconfig.app.json.

Il faudra relancer l’application (CTRL + C) puis « ng serve » de nouveau pour que la configuration soit appliquée.

Configuration de la carte

Nous allons maintenant retourner dans le fichier app.component.html pour déclarer le conteneur de notre carte. Nous donnons comme id à ce conteneur « frugalmap ».

Dans le fichier app.component.css, nous allons indiquer les dimensions de ce conteneur et donc de notre carte.

La suite des opérations va se dérouler dans le fichier TypeScript app.component.ts dans lequel nous allons déclarer la carte et la configurer.

Vous trouverez ci-dessous ce fichier dans sa version finale avec les commentaires explicatifs :

Nous avons commencé par importer OnInit pour pouvoir déclarer notre carte lors de l’initialisation de l’application (du composant pour être plus précis). Son implémentation requiert la déclaration d’une fonction ngOnInit au sein de laquelle nous instancions la carte.

À ce stade, vous devriez voir s’afficher une carte juste en dessous de notre message de bienvenue.

Ajouter des marqueurs sur notre carte

En règle générale, lorsqu’on utilise une cartographie, c’est pour afficher des données géographiques… Nous allons donc ajouter des marqueurs sur notre carte.

Pour ce faire c’est très simple. Toujours dans la fonction ngOnInit, ajouter le code ci-dessous :

Voilà, nous avons notre application angular avec une cartographie basée sur Leaflet ainsi qu’un marqueur !

Bonus avec des données réelles

Avant de vous laisser, je vous propose une petite section bonus dans laquelle nous allons utiliser des données géographiques réelles récupérées via une API et les afficher sur notre carte.

Nous allons utiliser le module HttpClient disponible sur Angular depuis sa version 4.3. Nous allons devoir importer ce module dans notre application afin de pouvoir l’utiliser. Cela se fera dans le fichier app.module.ts.

Ajouter la ligne :

Ensuite dans le tableau imports de ce même fichier, ajouter « HttpClientModule »:

Nous pouvons maintenant utiliser le module HttpClientModule pour interroger une API. Je vous propose d’utiliser l’API Open Data de la métropole lilloise et de récupérer toutes les bornes podotactiles. Les bornes podotactiles servent de signalisation, de guidage et de repérage pour les non et mal-voyants.

Revenons à notre fichier app.component.ts dans lequel nous allons importer HttpClient :

Nous allons ensuite ajouter un constructeur à l’intérieur de la classe AppComponent pour injecter HttpClient dans notre composant.

Il ne nous reste plus maintenant qu’à effectuer une requête GET pour obtenir les informations de localisation des bornes podotactiles dans la métropole lilloise à cette adresse.

Je vous laisse ci-dessous un exemple de code (très simplifié) pour faire cela :

Normalement votre application devrait ressembler à l’image ci-dessous :

Voilà c’est tout pour ce tutoriel !

Si vous avez des questions ou des remarques, n’hésitez pas à laisser un commentaire.

Comme d’habitude, si des erreurs se sont glissées dans l’article, n’hésitez pas à nous en faire part.

Pour être informé des prochains articles, rendez-vous sur Twitter.

Merci, et à très bientôt sur Frugal Prototype

Frugal Newsletter

Apprenez les rudiments du prototypage frugal !
Votre adresse email
Partagez cet article !
Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+
Ali Benfattoum

Ali Benfattoum

Serial Prototypeur, Citizen Clan Activist, Intrapreneur... Ali le reste du temps. Ma devise : c'est sur le terrain qu'on fait ses preuves... de concept. Suivez moi sur @alifrugal

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.