TxMap · Vue · tecexpress

Demo: Synthetic local example tiles, no real geographic data.

Map with pan/zoom, markers and route lines. Without tileUrl the background is neutral; the application configures sources and attribution.

Prop	Type	Default	Meaning
`center`	`TxCoordinate \| undefined`	`{"lat":52.52,"lng":13.405}`	Geographic map center.
`zoom`	`number \| undefined`	`5`	Map zoom level.
`minZoom`	`number \| undefined`	`1`	Minimum zoom level.
`maxZoom`	`number \| undefined`	`19`	Maximum zoom level.
`tileUrl`	`string \| undefined`	`undefined`	Tile URL with {z}/{x}/{y} placeholders.
`attribution`	`string \| undefined`	`undefined`	Map provider attribution/license text.
`width`	`number \| undefined`	`640`	Width; Vue numbers use pixels, Flutter uses logical pixels.
`height`	`number \| undefined`	`360`	Height; Vue numbers use pixels, Flutter uses logical pixels.
`dataSource`	`TxSource<TxMapMarker> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`markers`	`TxMapMarker[] \| undefined`	`[]`	Map markers to display.
`routes`	`TxMapRoute[] \| undefined`	`[]`	Route lines to display.
`routeDataSource`	`TxSource<TxMapRoute> \| undefined`	`undefined`	Separate data source for route lines.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.

Events

Event	Payload / behavior
update:center	New center value; accept using v-model:center (modelValue: v-model).
update:zoom	New zoom value; accept using v-model:zoom (modelValue: v-model).
markerClick	Activated TxMapMarker.
tileError	Failed tile as { 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.