DE:OSM mit Leaflet/HTML-Datei

From OpenStreetMap Wiki
Jump to navigation Jump to search
Einleitung   Vorbereitung   HTML   CSS   JavaScript   Daten   Popup   ...   Plugin   Beispiele    
Übungen

Je nach Anwendungsziel ist die HTML-Datei unterschiedlich aufgebaut.

Aufbau der HTML-Datei

Die HTML-datei beginnt immer mit <html> und einleitenden Zeilen, gefolgt vom <head> (Kopf) mit Festlegungen und einzubindenden Dateien und dem schliessenden </head>, gefolgt vom (<body> mit den darzustellenden Inhalten, und endet mit den abschliessenden Zeilen </body> und </html>. 

<html>
  <!-- einleitende Zeilen -->
  <head>
    <!-- wichtige Voreinstellungen -->
  </head>
  <body>
    <!-- Sichtbarer Inhalt der Website -->
  </body>
</html>

Marker

Die folgenden Code-Zeilen stehen immer im Code unserer folgenden Beispiele.
Voraussetzung: die Dateien "leaflet.css" und "leaflet.js" wurden heruntergeladen und liegen im Verzeichnis leaflet
Unser Minimal-Beispiel sieht so aus (Erklärung unten): 

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Beispiel Leaflet Karte mit Marker</title>

      <!-- leaflet.css und leaflet.js aus lokalem Verzeichnis /leaflet/ einbinden -->
      <link rel='stylesheet' href='leaflet/leaflet.css' />
      <script src='leaflet/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="http://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>

Einleitende Zeilen

<!DOCTYPE html>
Ist eine Nachricht an den Validator, falls wir den Code prüfen lassen wollen, dass es sich hier um HTML-Code handelt.
<html lang="de">
Jetzt beginnt der HTML-Code.
Der durch den Code anzuzeigende Text der Kartenseite lang= ist deutsch "de".
Wenn du Englisch verwendest, schreibe <html lang="en">


<head>

Im <head> schreibst du die CSS- und JavaScript-Dateien rein, die wir für die Anzeige brauchen:

<meta charset="utf-8" />
Hier wird der Zeichensatz ausgewählt. Mit UTF-8 werden alle Umlaute, Sonderzeichen und Zeichen aus fremden Schriftarten korrekt dargestellt.


<meta name="viewport" content="width=device-width, initial-scale=1.0" />
... keine Ahnung was das bedeutet ...


<title>..</title>
Hier wird der Titel der Karte angegeben, so wie ihn die Suchmaschine finden soll.


<!-- leaflet.css und leaflet.js aus lokalem Verzeichnis /leaflet/ einbinden -->
Mit <!-- beginnt in HTML ein Kommentar. Kommentare haben keinen Einfluss auf den Code, sie helfen aber beim Verstehen.
der Kommentar endet mit -->


<link rel='stylesheet' href='leaflet/leaflet.css' />
Bindet das Stylesheet "leaflet.css" aus dem lokalen Verzeichnis "leaflet" ein, damit die Anzeige hübsch aussieht.
Dazu muss die Datei auf dem eigenen Server liegen: Leaflet herunterladen


<script src='leaflet/leaflet.js'></script>
Bindet den JavaScript-Code "leaflet.js" aus dem lokalen Verzeichnis "leaflet" ein, damit wir die Leaflet-Tools nutzen können.
Dazu muss die Datei auf dem eigenen Server liegen: Leaflet herunterladen

<body>

Im <body> schreibst Du alles rein, das für die Anzeige erforderlich ist:


<div id='meineKarte' style='height: 800px; width: 100%;'></div>
... weiss nicht so recht, was das genau heisst ... <---- An den Autor dieser Zeile: Ich möchte dir jetzt nicht auf die Füße treten, und ich respektiere zwar deine Ehrlichkeit,
aber wenn du schon nicht weißt "was das genau heisst", dann könntest du dir wenigstens die Mühe machen um das herauszufinden...


Ein <div>-Element ist praktisch ein Container, der andere Elemente, wie Texte, Bilder, etc. aufnehmen kann um sie in einem gemeinsamen Bereich einzuschließen.
Mit dem 'id'-Attribut wird dem <div>-Element ein "Name" vergeben um dieses später nochmal ansprechen zu können.
Mit dem 'style'-Attribut kann das Aussehen des <div>-Elements mittels CSS (Cascading Style Sheets) angepasst werden.
In diesem Fall wird die Höhe (height) und die Breite/Länge (width) festgelegt.


Es hat mich genau zwei Minuten gekostet das herauszufinden.
Ich hoffe jetzt weiß jeder "was das genau heisst".


<!-- OSM-Basiskarte einfügen und zentrieren -->
ein Kommentar für den nächsten Block.


<script type='text/javascript'>
<script> ist der Beginn eines Code-Blocks in einer Programmiersprache,
type='text/javascript'> hier in JavaScript.


var Karte = L.map('meineKarte').setView([51.75840, 6.39612], 15);
var Karte = L.map('meineKarte'). ?????
Der abschliessende Punkt bedeutet: jetzt folgt noch ein Befehl:
setView(..) sagt, dass die Karte angezeigt werden soll
[51.75840, 6.39612], 15); die Karte wird zentriert [Koordinate in eckigen Klammern], danach der Zoomlevel, hier z=15.
Jede fertige Code-Zeile wird mit einem Strichpunkt ageschlossen.


(der folgende Code erstreckt sich über 4 Zeilen):

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
Die Kacheln (tiles) der Karte kommen von "openstreetmap.org"
'attribution': 'Kartendaten © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
'attribution' ist der Hinweis auf die Lizenz der Kartendaten, mit einem Link zum Copyright-Text von OSM
Das Style-Sheet leaflet.css (wird im <head> geladen) macht, dass der Text in der Karte unten rechts angezeigt wird.
'useCache': true
Die Kacheln werden vorübergehend im Cache des Rechners gespeichert, und müssen nicht jedesmal neu geladen werden.
}).addTo(Karte);
das alles wird jetzt im Fenster Karte angezeigt


</script>
Ende des JavaScript-Blocks.


<!-- Marker einfügen -->
Kommentar für den nächsten Block


<script>
Beginn des nächsten Blocks.


var marker = L.marker([51.76148,6.39604]).addTo(Karte);
Die Variable marker wird gefüllt mit dem Befehl L.marker(...), mit der Koordinate in eckigen Klammern,
gefolgt vom Befehl addTo(Karte)


</script>
Ende des JavaScript-Blocks.

Basiskarte

Die Basiskarte wird mit folgendem Code eingebunden:

Zeile 1: URL der Karte
Zeile 2: Anzeigen der Karte
Basiskarte Code Bemerkungen
OpenStretMap.org https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

..

Standard Carto-Style
OpenStretMap.de https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png

..

Deutscher Carto-Style
.. ..

..

Nutzungsbedingungen

Nicht alle Kartenquellen haben die gleichen Nutzungsbedingungen. Im Zweifelsfall muss der jeweilige Anbieter angefragt werden. Für die "Kartenkacheln" (Tiles) im Standardstil ("Mapnik, Carto"), die auf openstreetmap.org angeboten werden, gelten die folgenden Bedingungen DE:Tile_usage_policy.

Basiskarten von OSM

Für die Basiskarten von OSM werden die Nutzungsbedingungen automatisch passend in der Karte angezeigt, wenn folgender Code verwendet wird: 

         {
         'attribution':  'Kartendaten &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
         'useCache': true
         }
Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=DE:OSM_mit_Leaflet/HTML-Datei&oldid=2558495"