Tutoriels

Intégrer une carte Leaflet dans Angular avec ngx-leaflet

Dans Angular
décembre 19, 2024
4 Min Read
I

Objectif à atteindre

  • Intégrer une carte interactive Leaflet dans Angular à l’aide de la bibliothèque ngx-leaflet.

Installation d’un nouveau projet

Étape 1 : Créer le projet Angular

  1. Créez un nouveau projet Angular nommé mac_donald :
ng new mac_donald --style=scss --skip-tests=true

Pendant la création :

Quand la question apparaît :

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

Tapez N et appuyez sur Entrée.

Cela permettra de travailler uniquement sur une application Angular côté client, parfaitement adaptée aux objectifs pédagogiques du TP

Déplacez vous dans votre nouveau projet 

cd mac_donald
ng serve

Étape 2 : Installer Leaflet et ngx-leaflet

  1. Installer les dépendances nécessaires :
npm install leaflet @bluehalo/ngx-leaflet
npm i --save-dev @types/leaflet

Inclure les styles CSS de Leaflet :
Dans le fichier angular.json, ajoutez le chemin vers les styles de Leaflet dans la section styles :

"styles": [
  "src/styles.scss",
  "node_modules/leaflet/dist/leaflet.css"
]

Configuration des icônes de marqueurs

Leaflet utilise des images pour les marqueurs, qui doivent être accessibles par l’application. Dans le fichier angular.json, ajoutez le chemin vers les images de Leaflet dans la section assets :

 "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/leaflet/dist/images/",
                "output": "./assets/"
              }
            ],

Étape 2 : Créer un composant pour la carte

Générer un composant nommé map :

ng generate component map

Configurer le composant MapComponent :

Modifier map.component.ts :
Importez les modules nécessaires pour configurer une carte avec ngx-leaflet :

import { Component } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  standalone: true, // Si Angular standalone est utilisé
  imports: [
    LeafletModule // Import du module Leaflet
  ],
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {
  options = {
    layers: [
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap contributors',
      }),
    ],
    zoom: 13,
    center: L.latLng(48.8566, 2.3522), // Paris
  };
}

Explications :

  • tileLayer: Charge les tuiles de carte OpenStreetMap.
  • latLng: Définit les coordonnées centrales de la carte.

Modifier map.component.html :
Utilisez la directive [leaflet] pour afficher la carte :

<div style="height: 400px;" leaflet [leafletOptions]="options"></div>

Modifier map.component.scss :
Ajoutez un style pour la carte :

div[leaflet] {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

Étape 3 : Ajouter le composant au projet

  1. Importer le module LeafletModule dans le projet :
    Ouvrez src/app/app.module.ts et ajoutez :
import { Component } from '@angular/core';
import {MapComponent} from './map/map.component';

@Component({
  selector: 'app-root',
  imports: [
    MapComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'mac_donald';
}

Afficher le composant MapComponent :
Ouvrez src/app/app.component.html et ajoutez :

<app-map></app-map>

Étape 4 : Ajouter des marqueurs sur la carte

Nous allons enrichir la carte créée précédemment en ajoutant des marqueurs dynamiques et des popups personnalisées.

Modifier map.component.ts pour inclure une liste de marqueurs
Ajoutez une propriété pour gérer les marqueurs dans le composant et affichez-les sur la carte :

import { Component, OnInit } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet'; // Import du module Leaflet
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [
    LeafletModule // Import nécessaire pour activer les directives ngx-leaflet
  ],
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  options = {
    layers: [
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap contributors',
      }),
    ],
    zoom: 13,
    center: L.latLng(48.8566, 2.3522), // Paris
  };

  // Liste des marqueurs
  markers: L.Marker[] = [];

  // Ajouter des marqueurs initiaux
  ngOnInit(): void {
    this.addMarker(48.8566, 2.3522, 'Bienvenue à Paris !');
    this.addMarker(48.8584, 2.2945, 'Tour Eiffel');
    this.addMarker(48.8606, 2.3376, 'Musée du Louvre');
  }

  // Méthode pour ajouter un marqueur
  addMarker(lat: number, lng: number, popupText: string): void {
    const marker = L.marker([lat, lng], {
      icon: L.icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png',
      }),
    }).bindPopup(popupText);

    this.markers.push(marker);
  }
}

Modifier map.component.html pour afficher les marqueurs
Mettez à jour le fichier HTML pour inclure les marqueurs dans la carte :

<div style="height: 100%; display: flex; flex-direction: column;">
  <div leaflet [leafletOptions]="options" [leafletLayers]="markers" style="height: 400px;"></div>
</div>

Tester l’application

Redémarrez le serveur Angular si nécessaire :

ng serve

Accédez à http://localhost:4200 pour voir la carte interactive avec un marqueur centré sur Paris.

Explications supplémentaires :

  1. LeafletModule :
    • Fournit des directives Angular pour manipuler facilement les éléments Leaflet, comme les cartes et les couches.
  2. Options de personnalisation :
    • Vous pouvez modifier les coordonnées dans latLng pour centrer la carte sur d’autres lieux.
    • Ajoutez plusieurs marqueurs avec des icônes personnalisées pour enrichir l’expérience utilisateur.

Résultat attendu :

  • Une carte interactive Leaflet s’affiche avec :
    • Une vue centrée sur Paris.

Félicitations !

Vous avez intégré une carte Leaflet dans Angular avec la bibliothèque ngx-leaflet, simplifiant l’utilisation des cartes interactives. Vous pouvez maintenant ajouter plus de fonctionnalités comme des couches supplémentaires, des polygones, ou des interactions avancées ! 🎉

Ajouter un commentaire

Tutoriels