TxMap · Vue · tecexpress

Demo: Synthetische lokale Beispielkacheln, keine echten Geodaten.

Karte mit Pan/Zoom, Markern und Routenlinien. Ohne tileUrl bleibt die Fläche neutral; Quellen und Attribution richtet die Anwendung ein.

Prop	Typ	Standard	Bedeutung
`center`	`TxCoordinate \| undefined`	`{"lat":52.52,"lng":13.405}`	Geografischer Kartenmittelpunkt.
`zoom`	`number \| undefined`	`5`	Kartenzoomstufe.
`minZoom`	`number \| undefined`	`1`	Kleinste Zoomstufe.
`maxZoom`	`number \| undefined`	`19`	Größte Zoomstufe.
`tileUrl`	`string \| undefined`	`undefined`	Kachel-URL mit Platzhaltern {z}/{x}/{y}.
`attribution`	`string \| undefined`	`undefined`	Quellen-/Lizenzhinweis des Kartenanbieters.
`width`	`number \| undefined`	`640`	Breite; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln.
`height`	`number \| undefined`	`360`	Höhe; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln.
`dataSource`	`TxSource<TxMapMarker> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`markers`	`TxMapMarker[] \| undefined`	`[]`	Darzustellende Kartenmarker.
`routes`	`TxMapRoute[] \| undefined`	`[]`	Darzustellende Routenlinien.
`routeDataSource`	`TxSource<TxMapRoute> \| undefined`	`undefined`	Separate Datenquelle für Routenlinien.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.

Ereignisse

Event	Payload / Verhalten
update:center	Neuer Wert von center; über v-model:center übernehmen (modelValue: v-model).
update:zoom	Neuer Wert von zoom; über v-model:zoom übernehmen (modelValue: v-model).
markerClick	Aktivierter TxMapMarker.
tileError	Fehlgeschlagene Kachel in { x, y, zoom }.

vue

<script setup lang="ts">
import { TxMap } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'

</script>

<template>
  <TxMap tile-url="/tiles/demo.png?z={z}&x={x}&y={y}" attribution="tecexpress · Synthetic demo tiles" :markers="[{ id: 1, lat: 52.52, lng: 13.405, text: 'Berlin' }]" />
</template>

TxMap.