webmapping

Session 2 - HTML Struktur, GIMP & First Leaflet map (13.3.2024)

Kurz zu den Tutorials

Überleitung Seitenstruktur

Hauptstruktur für die Etappenseite

Wir geben der Seite Struktur und verpacken alles im <body> in ein <main>-Element

<body>
    <main>
        <!-- unser bisheriger Content -->
    </main>
</body>

Header erstellen

Bannerbild 1280x365px

User-Bild 100x100px

Bilder im Header einbauen

Leaflet Erstkontakt - wir brauchen eine Karte

  1. Leaflet CSS und Script im <head>-Bereich einbauen

    • Stylesheet als <link>-Element

    • Skript als <script>-Element

     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    COMMIT: https://github.com/webmapping/nz/commit/d92151fa641b23cf125f2d0231ed89c12fe50e80

  2. Kartenfeld definieren

    • Kartenbereich als <div> definieren

      • mit einem id-Attribut um die Karte aus dem Skript heraus ansprechen (“programmieren”) zu können

      • einem style-Attribut mit CSS Regeln für die Größe des Kartenfelds und einem Rahmen - mehr zu CSS später

     <h3>Übersichtskarte</h3>
 <div id="map" style="width:900px;height:600px;border:1px solid silver"></div>

    COMMIT: https://github.com/webmapping/nz/commit/43bc6b6680d475c9ced7266d10b9f52592a494ad

  3. Kartenskript für eine Karte von London mit OpenStreetMap im Hintergrund

    • wir verwenden die Leaflet-Bibliothek, die wir in der Variablen L finden

    • Schritt 1: mit L.map('map') erzeugen wir im <div> mit der ID “map” eine Leaflet-Karte und blicken über .setView() auf die Koordinaten in geographischer Breite/Länge im Zoomlevel 13. Diese Karte speichern wir in einer Variablen var map damit wir später noch Features hinzufügen können.

        var map = L.map('map').setView([51.505, -0.09], 13);

    • Schritt 2: mit L.tileLayer() erzeugen wir einen Hintergrundlayer der OpenStreetMap, setzen mit maxZoom den maximalen Zoomfaktor auf 19 und geben in attribution die Quelle des Layers an. Mit .addTo(map) wird der Hintergrundlayer an die Karte gehängt - wir sehen ihn jetzt im Browser und die Londonkarte ist damit sichtbar.

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

      COMMIT: https://github.com/webmapping/nz/commit/525426f86ff90a9e4f3e968f01a599044dad5083

    • Schritt 3: wir zentrieren die Karte auf die Wikipedia-Koordinate unserer Etappe. Dazu müssen wir nur die LAT/LNG Koordinaten bei setView() austauschen.

        var map = L.map('map').setView([-39.2, 175.583333], 11);

      COMMIT: https://github.com/webmapping/nz/commit/2244902aa9282ee8fa0aecadbe72249022736810

    • Schritt 4: L.marker() definiert einen Marker an der gewünschten Koordinate und hängt ihn mit .addTo(map) an die Karte. Damit wir noch ein Popup hinzufügen können, merken wir uns diesen Marker in der Variablen var marker. Der Marker wird im Browser in der Karte angezeigt.

        var marker = L.marker([-39.2, 175.583333]).addTo(map);

      COMMIT: https://github.com/webmapping/nz/commit/f530393323661e7e2f8120bed43e72dd2ee0bc55

    • Schritt 5: mit marker.bindPopup() definieren wir beim Marker ein Popup mit HTML-Inhalt und öffnen es mit .openPopup(). Das geöffnete Popup wird im Browser beim Marker in der Karte angezeigt.

        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

      COMMIT: https://github.com/webmapping/nz/commit/0a0647ace7c55668dfce42af5594b4120d79cba6

HTML Üben: “Top Spots der Webmapper:innen”

Oooops

Beim Erzeugen der Seitenstruktur für den Hauptinhalt wurde leider das <article>-Element vergessen. Wir ergänzen es bei beiden Repos direkt nach <main> und schieben den bestehenden Inhalt dort hin. Die Struktur sollte bei beiden Beispielen dann so aussehen:

<body>
    <header>
        <!-- Banner 1280x365 und Userbild 100x100-->
    </header>
    <main>
        <article>
            <!-- Inhalt der Seite mit Text, Bild, Karte und Links -->
        </article>
    </main>
    <footer>
        <!-- Navigation zu Nachbar:innen -->
    </footer>
</body>

COMMIT (nz): https://github.com/webmapping/nz/commit/3a4eac5afe30627d7c83cc5872685ed5e49df9b4

COMMIT (top): https://github.com/webmapping/top/commit/1d2e354039133fb10e508327f15460ebf6c7e8af