Web Component für Positionsauswahl
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.