DE:Leaflet Simple Example
Einfaches Leaflet-Beispiel
Dieses einfache Beispiel zeigt, wie man einen Ausschnitt von OpenStreetMap in einer HTML-Datei anzeigen kann. Mit diesem DHTML-Codeschnipsel baut man die Leaflet Javascript-Bibliothek ein, um die Karte anzuzeigen.
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>