Erstellen einer mobilen Kartenansicht mit Leaflet und Standortmarker
In dieser Anleitung erfährst du, wie du mithilfe der Leaflet-Bibliothek eine interaktive mobile Kartenansicht erstellen kannst, die den aktuellen Standort deines Browsers nutzt. Wir werden Schritt für Schritt durch den Prozess gehen, um eine Karte einzubetten, den Standort abzurufen und einen Marker an der aktuellen Position zu platzieren.
Schritt 1: Einbindung der erforderlichen Ressourcen: Um loszulegen, musst du die Leaflet-Bibliothek in dein HTML-Dokument einbinden. Hier ist der Code, den du im <head>-Bereich deines HTML-Dokuments einfügen kannst:
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
...
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>Schritt 2: HTML-Struktur: Erstelle ein HTML-Element, das als Container für deine Karte dient. Hier ist ein Beispiel:
<div id="map" style="height: 400px;"></div>Schritt 3: JavaScript-Code: Füge den folgenden JavaScript-Code unterhalb des HTML-Elements ein, um die Karte zu initialisieren, den Standort abzurufen und einen Marker hinzuzufügen:
<script>
const map = L.map('map').setView([0, 0], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
map.locate({ setView: true, maxZoom: 15 });
function onLocationFound(e) {
var marker = L.marker(e.latlng).addTo(map);
marker.bindPopup("Du bist hier!").openPopup();
}
map.on('locationfound', onLocationFound);
function onLocationError(e) {
alert("Dein Standort konnte nicht gefunden werden.");
}
map.on('locationerror', onLocationError);
</script>Fazit: Herzlichen Glückwunsch! Du hast erfolgreich eine mobile Kartenansicht erstellt, die den Standort deines Browsers nutzt und einen Marker an deiner aktuellen Position platziert. Dies ist eine Grundlage, auf der du weitere Funktionen und Anpassungen aufbauen kannst, um deine Kartenansicht noch interaktiver zu gestalten.
Bonus:
map.locate({watch: true})Mit der Option watch, wird der Standort mit regelmäßig upgedatet.
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund