Intégrer une carte Leaflet dans son application avec Ionic 5
Dans ce tutoriel nous allons intégrer une carte Leaflet, ou plus précisément une carte OpenStreetMap dans le framework Ionic 5 est simple et comporte plusieurs avantages si nous comparons l'intégration d'un plugin natif Google Maps. Par exemple, nous allons pouvoir développer l'application tout en utilisant le navigateur au lieu d'utiliser un téléphone. En plus, c'est gratuit et une solution open source !
Ne pas utiliser Google Maps offre un avantage de temps, d'argent. Leaflet ne fait pas apparaître des bugs liés au téléphone. La prise en main est simple, rapide et efficace et ne demande d'avoir des compétences techniques avancées. Les développeurs de Leaflet ajoutent des nouvelles fonctionnalités au fur et à mesure et la communuaté est active.
Prérequis
- Connaissances techniques de base avec Ionic 5 et Angular
- NodeJS version 14, minimum
- CLI Ionic à la version 5
Initialisation du projet Ionic
Le CLI de Ionic doit être installé globalement avec “npm install -g @ionic/cli”, puis nous créons notre application mobile avec "ionic start". Choisir Angular, le nom de notre application : “ionic-leaflet”, le template “blank”. On patiente quelques instants et on crée ou non son compte Ionic. Accéder au projet avec votre éditeur de code favoris et nous sommes enfin prêts ! Pour vérifier que le projet à bien été généré, utiliser la commande “ionic serve”, ce qui devrait ouvrir une fenêtre du navigateur avec notre application de base. Tout fonctionne ? Alors Leaflet peut être intégrer !
Installation de Leaflet
Dans ce tutoriel nous utiliserons la dernière version de Leaflet à l'heure ou cet article est écrit. La version 1.7.1.
Nous ajoutons le code CSS de Leaflet dans notre fichier “ionic-leaflet/src/index.html” avec ce qui suit :
-->Code
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<--
Puis installons le paquet Leaflet depuis NPM avec :
-->Code
npm install leaflet@1.7.1 --save
<--
La documentation complète de leaflet est disponible sur https://leafletjs.com/.
Intégration de Leaflet
Ajouter la carte dans le “ion-content” de notre page “home.page.html” qui gère le code HTML :
-->Code
<!-- ionic-leaflet/src/app/home/home.page.html -->
<ion-header>
<ion-toolbar>
<ion-title>
Ma carte
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
<--
Ici notre carte prendra toute la hauteur de la page sans le header Ionic. Au besoin, cette hauteur peut être modifiée.
Passons dans notre fichier “.ts” pour commencer la configuration. Importer les composants de bases de Leaflet avec :
-->Code
import { Map, tileLayer, marker, icon } from 'leaflet';
<--
Créer la fonction “ionViewDidEnter()” qui s'exécutera à l'ouverture de la page. (voir https://ionicframework.com/docs/angular/lifecycle), ici notre fonction “initMap()” sera appelée au bon moment.
-->Code
// ionic-leaflet/src/app/home/home.page.ts
ionViewDidEnter() {
return this.initMap();
}
initMap() {
// initialisation de la carte
}
<--
Ajouter en variable “map” :
-->Code
// ionic-leaflet/src/app/home/home.page.ts
export class HomePage {
map: Map;
...
<--
Et ajouter le code d'initialisation de notre carte :
-->Code
// ionic-leaflet/src/app/home/home.page.ts
initMap() {
// Centrer la carte sur la France
this.map = new Map('map').setView([46, 2], 5);
// Ajout des mentions OpenStreetMap, obligatoire
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
return;
}
<--
Ouvrir le projet avec “ionic serve”, la carte est maintenant intégrée en quelques lignes de code, vous avez développer un module.
Ajouter des marqueurs
Une carte vide n'est pas intéressante, nous allons ajouter quelques marqueurs qui représentent les grandes villes de France.
Ajoutons un marqueur dans “ionic-leaflet/src/assets/marker.png”.
Puis créer l'Object qui contient les coordonnées GPS de quelques villes.
-->Code
// ionic-leaflet/src/app/home/home.page.ts
map: Map;
cityMarkers: any = [
{
latitude: 48.8588897,
longitude: 2.320041,
name: 'Paris'
},
{
latitude: 50.6365654,
longitude: 3.0635282,
name: 'Lille'
},
{
latitude: 43.2961743,
longitude: 5.3699525,
name: 'Marseille'
},
{
latitude: 44.841225,
longitude: -0.5800364,
name: 'Bordeaux'
}
];
<--
Définissons notre marqueur :
-->Code
// ionic-leaflet/src/app/home/home.page.ts
cityMarkers: any = [...];
cityMarkerIcon = icon({
iconUrl: 'assets/marker.png',
// Taille affichée
iconSize: [48, 48],
// Base de l'icône affiché, 24 est 48/2 (pour éviter les décalage à l'affichage)
iconAnchor: [24, 48],
// Position de la bulle de texte au clique sur le marqueur
popupAnchor: [0, -48]
});
<--
Ensuite nous ajoutons les marqueurs sur la carte, en itérant sur notre Object créé juste avant :
-->Code
// ionic-leaflet/src/app/home/home.page.ts
initMap() {
// Centrer la carte sur la France
this.map = new Map('map').setView([46, 2], 5);
// Ajout des mentions OpenStreetMap, obligatoire
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
// Création des marqueurs
this.cityMarkers.map(m => {
marker([m.latitude, m.longitude], { icon: this.cityMarkerIcon })
.bindPopup(`Cette ville est<br><strong>${m.name}</strong>`, { autoClose: false })
.addTo(this.map);
});
return;
}
<--
Vous avez maintenant une carte Leaflet facilement avec Ionic 5. Toutes les options sur la documentation officielle sont utilisables, vous pouvez ainsi créer des cartes uniques en suivant ce tuto comme base !
Bonus : Zoomer au clique sur un marqueur
Quand on clique sur un marqueur, pourquoi ne pas zoomer sur la position de celui-ci ? Il suffit de modifier légèrement notre gestion des marqueurs en ajoutant une méthode au clic :
-->Code
// ionic-leaflet/src/app/home/home.page.ts
initMap() {
// Centrer la carte sur la France
this.map = new Map('map').setView([46, 2], 5);
// Ajout des mentions OpenStreetMap, obligatoire
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
// Création des marqueurs
this.cityMarkers.map(m => {
marker([m.latitude, m.longitude], { icon: this.cityMarkerIcon })
.bindPopup('Marqueur', { autoClose: false })
// Ajout de la méthode on('click')
.on('click', () => {
this.map.setView([m.latitude, m.longitude], 13);
}).addTo(this.map);
});
return;
}
<--
Ces options permettent de créer facilement des interactions dans votre application mobile.
