webmapping24s

Session 2 - HTML Struktur & GIMP (14.3.2024)

zuvor noch kurz zu den Tutorials

Hauptstruktur für die Etappenseite

Wir geben der Seite Struktur und verpacken alles im <body> in in <main> und <article>

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

Header erstellen mit zwei Bildern

Bannerbild 1280x365px

User-Bild 100x100px

Bilder im Header einbauen

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

Leaflet Erstkontakt

  1. Leaflet CSS und Script 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="" />

 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    COMMIT: https://github.com/webmapping24s/top/commit/46983766b8e8ce07d92499b75d9aad1f349ee6d4

  2. Kartenfeld definieren

    • Überschrift als <h3>

    • Kartenbereich als <div> 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 - mehr zu CSS später

     <h3>Übersichtskarte</h3>
 <div id="map" style="width:90%;height:600px"></div>

    COMMIT: https://github.com/webmapping24s/top/commit/80f4a4eb9c8672f42be066c0fd649faad46ac77b

  3. Kartenskript für eine Karte mit OpenStreetMap im Hintergrund und einem Marker mit geöffnetem Popup

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

    • Task 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([47.908683, -124.636604], 13);

    • Task 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.

        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);

    • Task 3: 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([47.908683, -124.636604]).addTo(map);

    • Task 4: 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("<h2>Hello world!</h2><br>I am a popup.").openPopup();

    • alles zusammen

            <script>
      var map = L.map('map').setView([47.908683, -124.636604], 13);

      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);

      var marker = L.marker([47.908683, -124.636604]).addTo(map);
      marker.bindPopup("<h2>Hello world!</h2><br>I am a popup.").openPopup();
  </script>

    • COMMIT: https://github.com/webmapping24s/top/commit/ac9571b880e8537a6c015f3a7cc4cd9f69f5ef1e

das war’s für heute …