Skip to content

Web Component für Positionsauswahl

Konrad Mohrfeldt requested to merge feat/location-selector into main

Dieser MR fügt eine tm-location-selector Web Component hinzu

Nutzungsbeispiel

Hier wird als Startort Berlin gewählt, neue Positionen können auf der Karte per Antippen/Klick ausgewählt werden und werden auf die Console geloggt und nach 10 Sekunden wechselt die Karte zu einem Standort in Schweden.

<tm-location-selector
    id="location-selector"
    style="width: 500px; height: 300px; max-width: 100%;"
    label="Dein häufig besuchter Ort"
    lat="52.52"
    lng="13.4050"
></tm-location-selector>

<script type="module">
    const el = document.getElementById('location-selector')

    el.addEventListener('change', (event) => {
        const { lat, lng } = event.detail[0]
        console.log(`new position: ${lat}, ${lng}`)
    })

    setTimeout(() => {
        el.lat = 60.293
        el.label = 'Somewhere over in Sweden'
    }, 10000)
</script>

Hinweise

  • Vue unterstützt derzeit nur ShadowDOM für Web Components. Das ist schade, weil wir dann keine Tailwind-Styles darin verwenden können (deswegen auch das style-Attribut im Nutzungsbeispiel). Ich würde mir das nochmal angucken, aber erstmal funktioniert es und ich würde schauen, wie sich der Bedarf entwickelt und dann ggf. nochmal die
  • Ein Lazy-Loader für Web Components wäre nett, damit man nicht direkt beim Besuch der Seite 100kb JavaScript für Leaflet und Vue übergeholfen bekommt.
  • Der Code ist etwas komplexer als er vielleicht für unseren einfachen Use-Case sein müsste. Er integriert eine SVG-Icon-Funktion die gerade ein bisschen Overkill wirken mag, aber praktisch wird, wenn wir z.B. Grafiken in unseren Map-Markern haben wollen.

Merge request reports