DE:OSM mit Leaflet/HTML-Datei/Marker-imCode

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


Mehrere Marker, direkt im Code

In diesem Beispiel lernst du, wie man mehrere Marker direkt in den Code schreibt,
und diese zusammen mit einem Popup auf der Karte anzeigt.

Speichere folgenden HTML-Code in deinem Arbeitsverzeichnis,
z.B. in mein-leaflet-karten-projekt, z.B. als test-1.html: 

<!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>Beispiel Leaflet Karte mit Marker</title>
      <!-- leaflet.css und leaflet.js vom eigenen Rechner oder Server einbinden -->
      <link rel="stylesheet" href="leaflet/leaflet.css" />
      <script src="leaflet/leaflet.js"></script>
   </head>

   <body>
      <!-- Kartenfenster definieren -->
      <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], 9);
         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>

      <!-- viele Marker mit Popup einfügen -->
      <script>
         var Kiepenkerl_Rees = L.marker([51.76148,6.39604]).addTo(Karte);
         Kiepenkerl_Rees.bindPopup("Kiepenkerl Rees").openPopup();
 
         var Leineweberdenkmal_Bielefeld = L.marker([52.021139, 8.532806]).addTo(Karte);
         Leineweberdenkmal_Bielefeld.bindPopup("Leineweberdenkmal Bielefeld").openPopup();

         var Kiepenkerl_Herford = L.marker([52.1153257, 8.6736995]).addTo(Karte);
         Kiepenkerl_Herford.bindPopup("Linnenbauer Denkmal Herford").openPopup();

         var Kiepenkerl_Hamm = L.marker([51.6945655, 7.7324569]).addTo(Karte);
         Kiepenkerl_Hamm.bindPopup("Denkmal für Jan Dümmelkamp").openPopup();

         var Kiepenkerl_Kevelaer = L.marker([51.5819843, 6.2440433]).addTo(Karte);
         Kiepenkerl_Kevelaer.bindPopup("Kaufman Hendrick Busman 1607-1649").openPopup();

         var Kiepenkerl_Münster = L.marker([51.964114,7.626215]).addTo(Karte);
         Kiepenkerl_Münster.bindPopup("Kiepenkerl (Münster)").openPopup();

         var Kiepenkerl_Waltrop = L.marker([51.6235089, 7.3967202]).addTo(Karte);
         Kiepenkerl_Waltrop.bindPopup("Kiepenkerlbrunnen").openPopup();

         var Kiepenkerl_Stadtlohn = L.marker([51.99299,6.92235]).addTo(Karte);
         Kiepenkerl_Stadtlohn.bindPopup("Kiepenkerl (Stadtlohn)").openPopup();
      </script>

   </body>
</html>

Öffne die Datei zum Testen einfach im Browser, dann siehst du die Karte mit Marker.

Erklärungen zum Code

<head>

Der <head> bleibt gleich wie bei der Übung xx.
Achte auf den richtigen Pfad...

<<body>

Die ersten beiden Blöcke bleiben gleich:

<!-- Kartenfenster definieren -->
...
<!-- OSM-Basiskarte einfügen und zentrieren -->
...

viele Marker mit Popup

Neu ist der Block:

<!-- viele Marker mit Popup einfügen -->
Kommentar.


<script>
Beginn des Blocks


Die folgenden zwei Zeilen erzeugen einen Marker und ein zugehöriges Popup.
Sie können zur Anzeige weiterer Marker mit Popup beliebig wiederholt werden.

var Kiepenkerl_Rees = L.marker([51.76148,6.39604]).addTo(Karte);
die Variable Kiepenkerl_Rees wird gefüllt mit der [Koordinate in eckigen Klammern],
und mit addTo(Karte) als Marker zur Karte hinzugefügt.


Kiepenkerl_Rees.bindPopup("Kiepenkerl Rees").openPopup();
mit dem Marker aus der Variable Kiepenkerl_Rees
wird mit bindPopup(..) ein Popup vernüpft, dessen Text "Kiepenkerl Rees" lautet.


</script>
Ende des Blocks


Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=DE:OSM_mit_Leaflet/HTML-Datei/Marker-imCode&oldid=1770315"