DE:Leaflet Simple Marker Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

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: '&copy; <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.