11.8.2023
Erstelle interaktive Karten mit Leichtigkeit: Eine Einführung in die Erstellung von Leaflet-Karten
Leaflet ist eine Open-Source-Bibliothek für interaktive Karten in Webanwendungen. Hier ist eine kurze Anleitung, wie du eine einfache Leaflet-Karte erstellen kannst:
- HTML-Grundgerüst vorbereiten: Erstelle ein neues HTML-Dokument und füge die benötigten Grundelemente hinzu, wie zum Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>
</html>-
JavaScript hinzufügen: Direkt vor dem schließenden
</body>-Tag füge den JavaScript-Code ein, um die Karte zu erstellen und anzuzeigen:
<script>
// Karte erstellen
const map = L.map('map').setView([51.505, -0.09], 13); // Koordinaten und Zoomlevel einstellen
// Kachel-Layer hinzufügen (z.B. OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// Beispiel-Marker hinzufügen
L.marker([51.5, -0.09]).addTo(map).bindPopup('Ein Marker hier.');
</script>- Anpassungen vornehmen: Du kannst die Koordinaten, den Zoomlevel, den Kartenstil und weitere Optionen nach deinen Wünschen anpassen. Die Leaflet-Dokumentation bietet umfangreiche Informationen über alle verfügbaren Optionen und Funktionen: Leaflet-Dokumentation
- Fertigstellen: Speichere deine HTML-Datei ab und öffne sie in einem Webbrowser. Du solltest deine interaktive Leaflet-Karte sehen können.
Denke daran, dass dies nur eine einfache Einführung ist. Du kannst die Funktionalität und das Erscheinungsbild weiter anpassen, je nach deinen Anforderungen.
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund