DE:Leaflet Simple Marker Example
Markierung mit Leaflet hinzufügen
Dieses einfache Beispiel zeigt, wie man eine Markierung zu einer Leaflet-Karte hinzufügen kann. Mit einer weiteren Anweisung wird diese Markierung mit einem Popup erweitert.
Schritte
Zum Code des Basisbeispiels werden vor dem schließenden </script> zwei weitere Anweisungen hinzugefügt. Die erste erstellt eine Markierung an der gewünschten Position, die zweite stattet diese Markierung mit einem Popup aus: der klassische "Wir-sind-hier"-Anwendungsfall.
var marker = L.marker([lat, lng]).addTo(map); // füge einen Marker an der Position ein
marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup; // statte diesen mit einem Popup aus. Den Text bitte an die eigenen Vorstellungen anpassen
Die Gesamtdatei des erweiterteten Beispiels sieht wie folgt aus: Für den eigenen Bedarf: die Werte von lat, lng, zoom und den Text des Popups anpassen. Das wars.
<!DOCTYPE html>
<html>
<head>
<title>Beispiel für OSM-Karte mit Marker</title>
<meta charset="utf-8" />
<!-- erforderliche leaflet-Dateien, die Reihenfolge ist wichtig! -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
<div style="height:600px; width:100%" id="map"></div>
<script>
// folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
var lng = 6.96147; // Längenangabe
var lat = 49.229018; // Breitenangabe
var zoom = 13; // Zoomstufe
// Erzeuge ein Map-Objekt an der gewünschten Position und in der gewünschten Zoomstufe
var map = new L.map('map').setView([lat, lng], zoom);
// und füge einen Tile-Layer hinzu
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var marker = L.marker([lat, lng]).addTo(map); // füge einen Marker an der Position ein
marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup; // statte diesen mit einem Popup aus. Den Text bitte an die eigenen Vorstellungen anpassen
</script>
</body>
</html>
Hyperlink in das Popup einbauen
Im Popuptext kann HTML-Code verwendet werden, somit ist es auch möglich, einen Hyperlink einzubauen. Einfach die letzte Anweisung mit
var content = "Nordeingang, <a href='https://www.saarbruecken.de/leben_in_saarbruecken/freizeit/deutsch_franzoesischer_garten'>Deutsch-Französischer Garten</a>";
marker.bindPopup(content).openPopup;
ersetzen.
mehrere Marker einbauen
Markerdaten in einem Array (von Arrays) erfassen und in einer Schleife die Marker erstellen
// Markerdaten
let items = [
[49.229018, 6.96147, '<span style="color: red">Nordeingang, Deutsch-Französischer Garten</style>'],
[49.204466, 6.956127, 'Grenzübergang Goldene Bremm'],
[49.224990, 7.006117, '<a href="https://www.sr.de/sr/sr3/themen/panorama/pro_contra_stadtautobahn_100.html">Nebenfluß der Saar mit 13 Buchstaben</a>'],
[49.251140, 7.04728, 'Offizielle MTB-Downhill-Trails am Schwarzenberg']
];
// Erzeuge die Marker in einer Schleife
// Die Zuweisung der einzelnen Arrayelemente zu Variablen ist nur zum besseren Verständnis.
for (let i = 0; i < items.length; i++) {
const lat = items[i][0];
const lng = items[i][1];
const txt = items[i][2];
marker = new L.marker([lat, lng])
.bindPopup(txt)
.addTo(map);
}