User:Vincentius
Entwurf für deutschsprachige Leaflet-Beispiele im Wiki
Der folgende Text nutzt Auszüge des Leaflet Quick Start Guide und orientiert sich an der Struktur des OpenLayers-Basisbeispiels.
Vorbemerkung
Für das Einbinden von OSM-Karten mit leaflet (oder anderen Bibliotheken) wird Javascript verwendet. Die Ausführung von Javascript-Code direkt von der Festplatte unterliegt Einschränkungen, die abhängig vom Browser (Firefox, Chrome, Opera, Edge, Safari, ...) sind und sogar abhängig von der Browserversion sein können. Diese Einschränkungen gelten unter anderem für den Zugriff auf andere Dateien, z.B. eine GPX-Datei oder eine Text-Datei mit Marker-Infos, ...)
Die einfachen Beispiele sollten davon nicht betroffen sein.
Hinweis: OpenStreetMap liefert die Tile-Bilder
Bitte beachte, dass die Kartendaten direkt von den Servern von OpenStreetMap kommen. OSM kann für diese Methode keine offizielle Unterstützung geben und kann nicht garantieren, dass die Versorgung konstant bleibt. Die Karten-Server haben immer wieder Ausfälle und sogar die URLs der Karten können sich ändern. Wenn du viele Besucher bzw. viel Traffic erwartest, dann nimm rechtzeitig Kontakt mit den verantwortlichen Entwicklern auf.
Voraussetzungen
- Texteditor (wie zum Beispiel notepad)
- Browser (z.B. Firefox, Chrome, Safari, ...)
- etwas Zeit (für jeden unterschiedlich :-))
- optional: Zugang zu einem Webserver (egal ob lokal auf dem heimischen Rechner oder im wilden Internet)
Schritte
Erstelle die folgende HTML-Datei (dazu kann der folgende Code einfach kopiert werden)
- Laden der zwei Leaflet-Ressourcen
- Erstellen eines DIV-Objektes mit definierter Höhe
- Zuweisen der gewünschten Position (Breitengrad, Längengrad) und Zoomstufe
- Erzeugen der Karte, zentriert an der angegebenen Position in der angegebenen Zoomstufe
- Laden der gerenderten Kacheln, hier direkt von OpenStreetMap
<!DOCTYPE html>
<html>
<head>
<title>Einfaches Beispiel für das Einbinden einer OSM-Karte mit leaflet</title>
<meta charset="utf-8" />
<!-- erforderliche leaflet-Dateien, die Reihenfolge der beiden Anweisungen 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);
</script>
</body>
</html>
Marker hinzufügen
Mit einer weiteren Anweisung vor dem schließenden </script> kann man einen Marker erstellen und diesen mit noch einer Anweisung sogar mit einem Popup ausstatten:
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>
Testbereich
Wikimedia Commons
