aws-tirol

Wetterstationen Tirol HOWTO (Teil 3) - Layer Schneehöhen, Relative Luftfeuchtigkeit & Windstärke

a) Schneehöhen

• Funktion drawSnowheight()

• Overlay snowheight

• Attribut HS

• Farben https://lawinen.report/weather/map/snow-height

🔗 COMMIT Farbpalette 🔗 COMMIT Farbpalette Korrektur 🔗 COMMIT Implementierung

b) Relative Luftfeuchtigkeit

• Umbenennen precipitation / Niederschlag in humidity / Relative Luftfeuchtigkeit

  🔗 COMMIT

• Farbpalette colors.js ergänzen

  • vorher F1 + beautify file

    🔗 COMMIT

  • dann die Farbpalette ergänzen. Passende Farben und Schwellen zur Erweiterung von https://webmapping22s.github.io/aws-tirol/colors.js um eine Farbpalette COLORS.humidity finden sich bei wetteronline.de, genauer gesagt in der SVG-Grafik der Legende, die man auf der Wetterkarte rechts oben eingebettet seht.

    🔗 COMMIT

• Layer Relative Luftfeuchtigkeit implementieren

  • zuerst eine eins zu eins Kopie von drawTemperature

  • dann Funktionsname in drawHumidity ändern

  • Attribut RH verwenden und beim Labeltext auf 0 Nachkommastellen runden

  • aus loadData aufrufen

  🔗 COMMIT

c) Windstärke

• Funktion drawWind()

• Overlay wind

• Attribut: WG

• Farben für Windstärke https://lawinen.report/weather/map/wind

  🔗 COMMIT Farbpalette 🔗 COMMIT Implementierung

• Ergänzung Windrichtung als gedrehtes Font Awesome Icon

  • Attribut: WR

  🔗 COMMIT Implementierung

Leider sieht der Layer mit den gedrehten Icons und dem Text nicht wirklich gut aus, wir verabschieden uns also von der Direktanzeige der Windgeschwindigkeit und stylen die Pfeile über ein eigenes CSS-Format .aws-div-icon-wind span neu.

• CSS-Format .aws-div-icon-wind span in main.css definieren und beim L.divIcon verwenden

    .aws-div-icon-wind span {
        font-size: 3em;
        font-weight: bold;
        padding: 0.3em;
        text-shadow:
            -1px -1px 0 black,
            -1px 1px 0 black,
            1px -1px 0 black,
            1px 1px 0 black;
        display: inline-block;
        transform: translate(-30%, -50%);
    }
  

  • font-size auf 3em vergrößern
  • Umrandung border löschen
  • text-shadow in Schwarz statt Weiß

    icon: L.divIcon({
        className: "aws-div-icon-wind",
        // ....
    })
  

  🔗 COMMIT

• Beschriftung der Windstärke in das Popup verschieben und dabei m/s in km/h umwandeln

  Den Text mit der Windgeschwindigkeit im <span> Element des L.divIcon() löschen wir und fügen ihn beim Popup hinzu

    let popup = `
        ${geoJsonPoint.properties.name} (${geoJsonPoint.geometry.coordinates[2]}m)
        <hr>
        Windgeschwindigkeit: ${(geoJsonPoint.properties.WG * 3.6).toFixed(0)} km/h
    `;
  

  🔗 COMMIT

• Die Icon-Farbe über color statt background-color setzen

    icon: L.divIcon({
        className: "aws-div-icon-wind",
        html: `<span style="color:${color};transform: rotate(${deg}deg)"><i class="fa-solid fa-circle-arrow-up"></i></span>`
    })
  

  🔗 COMMIT

• Last but not least: der Wind weht aus der falschen Richtung - Windrichtung 0° ist Wind von Norden, deshalb muss unser Font Awesome Icon standard mäßig ein Pfeil nach unten sein

    html: `<span style="color:${color};transform: rotate(${deg}deg)"><i class="fa-solid fa-circle-arrow-down"></i></span>`
  

  🔗 COMMIT

  Leider ist die Position der Icon jetzt falsch, denn das style-Attribut transform zum Rotieren überschreibt die Verschiebung des Icons an die “ungefähr” richtige Position. Wir müssen also translate(-30%, -50%); beim style-Attribut ergänzen und können es im CSS löschen

    html: `<span style="color:${color};transform: translate(-30%, -50%) rotate(${deg}deg)"><i class="fa-solid fa-circle-arrow-down"></i></span>`
  

  🔗 COMMIT