Interaktive Karten mit Angular, Leaflet und ngx-leaflet

Eine Einführung in die Verwendung von leaflet mit ngx-leaflet

Die Kombination von Leaflet, einer leistungsstarken Open-Source-Kartenbibliothek, mit ngx-leaflet, einem speziell für Angular entwickelten Paket, eröffnet spannende Möglichkeiten zur Darstellung von Geodaten in Ihrer Webanwendung. Angular ist ein weit verbreitetes Frontend-Framework, das besonders für Enterprise Software verwendet wird. In diesem Artikel werden wir Schritt für Schritt durch die Verwendung von Leaflet mit ngx-leaflet navigieren und dabei lernen, wie man interaktive Karten erstellt, anpassbar gestaltet und nahtlos in eine Angular-App integriert.

1. Installation: Führen Sie den folgenden Befehl im Terminal aus, um ngx-leaflet und Leaflet zu Ihrem Angular-Projekt hinzuzufügen:

   1npm install ngx-leaflet leaflet

1. Konfiguration: Importieren Sie das LeafletModule in das Modul, in dem Sie die Karte verwenden möchten. Fügen Sie LeafletModule.forRoot() zur imports-Sektion in der Moduldatei (z. B. app.module.ts) hinzu:

   1import { NgModule } from '@angular/core';
   2import { BrowserModule } from '@angular/platform-browser';
   3import { LeafletModule } from '@asymmetrik/ngx-leaflet';
   4import { AppComponent } from './app.component';
   5
   6@NgModule({
   7  declarations: [AppComponent],
   8  imports: [BrowserModule, LeafletModule.forRoot()],
   9  bootstrap: [AppComponent]
   10})
   11export class AppModule {}
   12

   
   

2. Komponente erstellen: Erstellen Sie eine Angular-Komponente, in der die Karte angezeigt werden soll. Führen Sie den folgenden Befehl aus, um eine neue Komponente zu erstellen:

   1ng generate component map

   
   

3. Komponente anpassen: In der erstellten Komponente (map.component.ts) können Sie die Kartenkonfiguration und Marker hinzufügen:

   1import { Component } from '@angular/core';
   2import * as L from 'leaflet';
   3
   4@Component({
   5  selector: 'app-map',
   6  templateUrl: './map.component.html',
   7  styleUrls: ['./map.component.css']
   8})
   9export class MapComponent {
   10  options = {
   11    layers: [
   12      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
   13    ],
   14    zoom: 10,
   15    center: L.latLng(51.505, -0.09)
   16  };
   17
   18  layers = [
   19    L.marker([51.5, -0.09]).bindPopup('A Marker')
   20  ];
   21}
   22

   
   

4. HTML-Template erstellen: Erstellen Sie eine HTML-Datei für die Komponente (map.component.html):

   1<div leaflet [leafletOptions]="options" [leafletLayers]="layers" class="map-container"></div>

   
   

5. Styling hinzufügen: Fügen Sie Styles für Ihre Karte hinzu, indem Sie eine CSS-Datei erstellen (map.component.css):

   1.map-container {
   2  height: 400px;
   3}

   
   

Durch das Befolgen dieser Schritte können Sie ngx-leaflet erfolgreich in Ihre Angular-Anwendung integrieren und eine interaktive Leaflet-Karte anzeigen. Die Trennung von Template, Komponentenlogik und Styling ermöglicht eine saubere und strukturierte Entwicklung.