DE:OSM mit Leaflet/Vorbereitung

From OpenStreetMap Wiki
Jump to navigation Jump to search
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

Notepad++

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

FileZilla

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

Erster Test: Minimal-Beispiel mit 1 Marker

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 &copy; <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: http://cdn.leafletjs.com/leaflet/v1.6.0/leaflet.zip
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
   
 
Menü klein
Menü 2x
 
Marker klein Marker 2x Marker Schatten

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

   /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

  1. HTML-Datei im Browser testen - detaillierte Anleitung für Anfänger