Geolokalisierung und Karten in TypeScript: Bibliotheken und praktische Beispiele

Geolokalisierung und Karten in TypeScript: Überblick über Werkzeuge und Codebeispiele

Moderne Webanwendungen erfordern zunehmend die Arbeit mit geografischen Daten: von der einfachen Anzeige des Benutzerstandorts bis hin zu komplexen Routen und Clusterbildung. TypeScript macht mit seiner strengen Typisierung die Entwicklung solcher Funktionen zuverlässiger und komfortabler. In diesem Artikel betrachten wir beliebte Bibliotheken für die Arbeit mit Karten und Geolokalisierung, zeigen Beispiele für die Integration mit TypeScript und geben praktische Tipps.

1. Grundlagen der Geolokalisierung im Browser

Bevor wir Karten einbinden, müssen wir die Koordinaten des Benutzers abrufen. Die integrierte Geolokalisierungs-API (navigator.geolocation) lässt sich in TypeScript hervorragend typisieren.

interface Position {\n  latitude: number;\n  longitude: number;\n  accuracy?: number;\n}\n\nfunction getCurrentPosition(): Promise<Position> {\n  return new Promise((resolve, reject) => {\n    navigator.geolocation.getCurrentPosition(\n      (pos) => {\n        resolve({\n          latitude: pos.coords.latitude,\n          longitude: pos.coords.longitude,\n          accuracy: pos.coords.accuracy\n        });\n      },\n      (error) => reject(error)\n    );\n  });\n}\n\n// Verwendung\ngetCurrentPosition()\n  .then((pos) => console.log(`Breitengrad: ${pos.latitude}, Längengrad: ${pos.longitude}`))\n  .catch((err) => console.error('Geolokalisierungsfehler:', err));

2. Leaflet — leichte und beliebte Bibliothek

Leaflet ist eine der einfachsten und schnellsten Bibliotheken zur Darstellung von Karten. Für TypeScript gibt es das Paket @types/leaflet.

Installation

npm install leaflet\nnpm install --save-dev @types/leaflet

Beispiel: Karte mit Markierung

import L from 'leaflet';\nimport 'leaflet/dist/leaflet.css';\n\n// Typisierte Initialisierungsfunktion\nfunction initMap(containerId: string, coords: [number, number]): L.Map {\n  const map = L.map(containerId).setView(coords, 13);\n\n  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n    attribution: '© OpenStreetMap contributors'\n  }).addTo(map);\n\n  L.marker(coords)\n    .addTo(map)\n    .bindPopup('Sie sind hier!');\n\n  return map;\n}\n\n// Verwendung\nconst map = initMap('map', [55.7558, 37.6173]); // Moskau

Erweiterte Typisierung von Ereignissen

map.on('click', (e: L.LeafletMouseEvent) => {\n  const { lat, lng } = e.latlng;\n  console.log(`Klick: ${lat}, ${lng}`);\n});

3. OpenLayers — leistungsstarkes Werkzeug für komplexe Aufgaben

OpenLayers unterstützt eine Vielzahl von Formaten (GeoJSON, KML, WMS) und eignet sich für professionelle Geoinformationssysteme. Die Typen werden zusammen mit dem Paket geliefert.

Installation

npm install ol

Beispiel: Karte mit Marker und Tooltip

import Map from 'ol/Map';\nimport View from 'ol/View';\nimport TileLayer from 'ol/layer/Tile';\nimport OSM from 'ol/source/OSM';\nimport { fromLonLat } from 'ol/proj';\nimport Feature from 'ol/Feature';\nimport Point from 'ol/geom/Point';\nimport VectorLayer from 'ol/layer/Vector';\nimport VectorSource from 'ol/source/Vector';\nimport Style from 'ol/style/Style';\nimport Icon from 'ol/style/Icon';\nimport Overlay from 'ol/Overlay';\n\nfunction createMap(containerId: string, lon: number, lat: number): void {\n  const container = document.getElementById(containerId) as HTMLElement;\n\n  // Marker erstellen\n  const marker = new Feature({\n    geometry: new Point(fromLonLat([lon, lat]))\n  });\n\n  marker.setStyle(new Style({\n    image: new Icon({\n      anchor: [0.5, 1],\n      src: 'https://openlayers.org/en/latest/examples/data/icon.png'\n    })\n  }));\n\n  // Vektorebene\n  const vectorLayer = new VectorLayer({\n    source: new VectorSource({\n      features: [marker]\n    })\n  });\n\n  // Karte\n  const map = new Map({\n    target: container,\n    layers: [\n