*doing IT right!
9.4/10

Note globale sur 13 avis

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: '&copy; <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: '&copy; <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: '&copy; <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.

Contact

367 rue de saint-denis
45590 Saint Cyr en Val

ouvert de 9h à 17h