Geolokalisierung und Karten in TypeScript: Bibliotheken, APIs und Codebeispiele

Geolokalisierung und Karten in TypeScript: Vollständiger Leitfaden zu Bibliotheken und Werkzeugen

Moderne Webanwendungen erfordern zunehmend die Integration geografischer Daten: von der Standortermittlung des Benutzers bis zur Darstellung interaktiver Karten. TypeScript wird aufgrund seiner strengen Typisierung und Unterstützung moderner Standards zur idealen Wahl für die Entwicklung solcher Lösungen. In diesem Artikel werden wir Bibliotheken und Werkzeuge für die Arbeit mit Geolokalisierung und Karten in TypeScript im Detail besprechen, praktische Codebeispiele liefern und Empfehlungen zur Auswahl geben.

1. Geolokalisierung abrufen: Navigator Geolocation API

Die integrierte Browser-API navigator.geolocation ist die Grundlage für die Ermittlung der Benutzerkoordinaten. TypeScript bietet Typen für diese API, was die Arbeit sicher und komfortabel macht.

// Typisierte Funktion zum Abrufen der aktuellen Positionfunction getCurrentPosition(): Promise<GeolocationPosition> {    return new Promise((resolve, reject) => {        if (!navigator.geolocation) {            reject(new Error('Geolokalisierung wird vom Browser nicht unterstützt'));            return;        }                navigator.geolocation.getCurrentPosition(            (position: GeolocationPosition) => {                resolve(position);            },            (error: GeolocationPositionError) => {                reject(error);            },            {                enableHighAccuracy: true,                timeout: 5000,                maximumAge: 0            }        );    });}

// Beispiel zur Verwendungasync function showUserLocation(): Promise<void> {    try {        const position = await getCurrentPosition();        const { latitude, longitude } = position.coords;        console.log(`Breitengrad: ${latitude}, Längengrad: ${longitude}`);    } catch (error) {        console.error('Fehler beim Abrufen der Geolokalisierung:', error);    }}

2. Kartendarstellung: Vergleich beliebter Bibliotheken

Für die Arbeit mit Karten in TypeScript stehen mehrere leistungsstarke Bibliotheken zur Verfügung. Betrachten wir drei der gängigsten Optionen.

2.1 Leaflet mit TypeScript

Leaflet ist eine leichte Open-Source-Bibliothek für interaktive Karten. Sie verfügt über offizielle Typen (@types/leaflet), die eine vollständige TypeScript-Unterstützung gewährleisten.

import L from 'leaflet';import 'leaflet/dist/leaflet.css';

// Kartenerstellung mit Typisierungconst map: L.Map = L.map('map', {    center: [55.751244, 37.618423], // Moskau    zoom: 10,    zoomControl: true});

// Hinzufügen von OpenStreetMap-KachelnL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    attribution: '© OpenStreetMap contributors'}).addTo(map);

// Marker mit typisierten Optionenconst marker: L.Marker = L.marker([55.751244, 37.618423], {    draggable: true,    title: 'Moskau'}).addTo(map);

// Ereignisbehandlung mit Typisierungmarker.on('dragend', (event: L.LeafletMouseEvent) => {    const coords: L.LatLng = event.target.getLatLng();    console.log(`Neue Koordinaten: ${coords.lat}, ${coords.lng}`);});

2.2 Mapbox GL JS

Mapbox bietet hochperformante Vektorkarten mit umfangreichen Styling-Möglichkeiten. Das TypeScript SDK ist über mapbox-gl verfügbar.

import mapboxgl from 'mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css';

// Festlegen des Zugriffstokensmapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// Kartenerstellung mit typisierten Parameternconst map: mapboxgl.Map = new mapboxgl.Map({    container: 'map',    style: 'mapbox://styles/mapbox/dark-v11',    center: [37.618423, 55.751244],    zoom: 12,    pitch: 45 // Kartenneigung});

// Hinzufügen eines Markers mit benutzerdefiniertem HTMLconst marker: mapboxgl.Marker = new mapboxgl.Marker({    color: '#FF0000',    draggable: true,    rotation: 45})    .setLngLat([37.618423, 5