DE:OSM mit Leaflet/Vorbereitung
| Einleitung | Vorbereitung | HTML | CSS | JavaScript | Daten | Popup | ... | Plugin | Beispiele |
In diesem Abschnitt wird erklärt, welche Software benötigt wird, um eine OpenStreetMap Karte in eine Webseite einzubinden.
Editor für HTML, CSS, JavaScript
Zum Erstellen von HTML-Code benutzt man am besten einen Editor mit Syntax-Einfärbung ("syntax highlighting").
Ebenso zum Schreiben von CSS-Code und JavaScript-Code.
- Notepad++ (OpenSource)
- Liste weiterer HTML-Editoren
FTP-Client
Zum Hochladen der Dateien auf einen Server benötigen wir einen sogenannten FTP-Client.
Benutze die SSL-Funktion, um eine sichere Verbindung zwischen Heimrechner und Server aufzubauen.
- FileZilla (OpenSource)
Website
Du brauchst eine Website, die du über einen FTP-Zugang selber gestalten kannst.
Für erste Versuche reicht eine kostenlose Website, die du beispielsweise bei bplaced.de einrichten kannst.
Dort erstellst du eine Seite für die Karte, indem du den passenden HTML-Code mit einem Editor schreibst, bzw. entsprechende Code-Blöcke aus diesem HowTo kopierst und passend einfügst. Den fertigen HTML-Code lädst du mit dem FTP-Client auf den Server hoch.
Erster Test
Um nur eine Karte mit einem Standort anzuzeigen, reicht dieser Minimal-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HowTo: Mini-Beispiel "Leaflet Karte mit Marker"</title>
<!-- leaflet.css und leaflet.js von externer Quelle einbinden -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head>
<body>
<div id='meineKarte' style='height: 800px; width: 100%;'></div>
<!-- OSM-Basiskarte einfügen und zentrieren -->
<script type='text/javascript'>
var Karte = L.map('meineKarte').setView([51.75840, 6.39612], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Kartendaten © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
'useCache': true
}).addTo(Karte);
</script>
<!-- Marker einfügen -->
<script>
var marker = L.marker([51.76148,6.39604]).addTo(Karte);
</script>
</body>
</html>
Einfach kopieren, in Editor einfügen und als HTML-Datei speichern, z.B. als test-0.html
Im Browser testen, oder auf den Server hochladen...
HTML-Datei im Browser testen
Du kannst jede lokale HTML-Datei im Broser testen. Doppelklick auf den Dateinamen öffnet die HTML-Datei im Browser. Funktioniert mit allen gängigen Browsern. [1]
Voraussetzung:
- a) alle in der HTML-Datei aufgerufenen Dateien werden direkt mit einer URL (https://...) aufgerufen.
- b) oder: alle in der HTML-Datei aufgerufenen Dateien sind lokal gespeichert, und in der HTML-Datei sind alle Pfade zum Speicherort richtig geschrieben.
HTML-Datei auf Server hochladen
Gewöhne dir von Anfang an, strukturiert zu arbeiten, das erspart viele unnötige Fehler.
- Das Arbeitsverzeichnis auf deinem Rechner soll gleich aufgebaut sein wie das Verzeichnis auf dem Server.
- Verzeichnis-Namen und Datei-Namen sollen auf dem Rechner gleich sein wie auf dem Server.
- Editiere Dateien immer lokal im Editor (z.B. mit notepad++)
- Speichere Dateien immer lokal in deinem Arbeitsverzeichnis auf deinem Rechner.
- Teste Änderungen immer erst direkt im Browser.
Wenn alles passt:
- Lade die geänderten Dateien mit dem FTP-Program auf den Server hoch
Vergewissere dich, dass im linken Fenster (Quelle, dein Rechner)
immer das Gleiche ausgewählt ist wie im rechten Fenster (Ziel, der Server). - Teste das Ergebnis, indem du in der Adresszeile des Browsers die URL des Servers mit Pfad und Dateiname der HTML-Datei einträgst.
Leaflet herunterladen
Für alle weiteren Schritte in dieser Anleitung ist es erforderlich, Leaflet auf den eigenen Rechner herunterzuladen.
Auf der Leaflet-Downloadseite findest du die aktuelle "Stable version", derzeit: Leaflet v1.9.4 (5.2023)
Die gepackte Datei ist 643 KB gross, ausgepackt 2,6 MB.
Lade die Zip-Datei herunter und entpacke sie im deinenm Entwicklungsverzeichnis, z.B. mit dem Verzeichnisnamen mein-leaflet-karten-projekt
Dadurch wird dort ein Ordner leaflet erzeugt in dem sich die JavaSkript-Dateien befinden, sowie ein Unterordner images mit Bildgrafiken:
./mein-leaflet-karten-projekt
/leaflet/
leaflet.css
leaflet.js
leaflet.js.map
leaflet-src.esm.js
leaflet-src.esm.js.map
leaflet-src.js
leaflet-src.js.map
/images/
layers.png
layers-2x.png
marker-icon.png
marker-icon-2x.png
marker-shadow.png
|
||
 |
 |
|
|
|
|
Für das Grundmodell der Karte sind die komprimierte Datei leaflet.js und leaflet.css notwendig.
Besser lesbar auch für das Debugging ist die Sourcedatei leaflet-src.js.
Im Bilderordner befind sich Icons für Layerschalter und den blauen Marker.
Vorbereitung für grössere Projekte
Wenn du mehrere Karten ausprobieren, oder komplexere Projekte machen willst, dann solltest du das Arbeitsverzeichnis gut strukturieren.
Mache für jedes Kartenprojekt ein eigenes Unterverzeichnis.
Im Unterverzeichnis speicherst du alle Dateien zum Projekt (HTML, CSS, Daten, Icons, ...)
Wenn du magst, kannst du direkt im Arbeitsverzeichnis eine index.html ablegen, die eine Startseite erszeugt,
in der die Projekte in einer Link-Liste angezeigt und aufgerufen werden können.
Dein Verzeichnis sieht dann z.B. so aus:
./mein-leaflet-karten-projekt
index.html
(Menü: Projekt-1 bis Projekt-n)
/leaflet/
/images/
/projekt-1/
projekt-1.html
...
/projekt-2/
projekt-2.html
...
- Externe Links anpassen
Wenn du das Verzeichnis so organisierst, musst du im HTML-Code in <head> die externen Links anpassen:
statt bisher: leaflet/leaflet.css
wird neu: ../leaflet/leaflet.css
Die zwei Zeilen lauten dann:
<link rel="stylesheet" href="../leaflet/leaflet.css" />
<script src="../leaflet/leaflet.js"></script>
Anmerkungen
- ↑ HTML-Datei im Browser testen - detaillierte Anleitung für Anfänger