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.
TxMap
| Parameter | Type | Default | Meaning |
|---|---|---|---|
| center | TxCoordinate | const TxCoordinate(52.52, 13.405) | Geographic map center. |
| zoom | int | 5 | Map zoom level. |
| minZoom | int | 1 | Minimum zoom level. |
| maxZoom | int | 19 | Maximum zoom level. |
| tileUrl | String? | null | Tile URL with {z}/{x}/{y} placeholders. |
| attribution | String? | null | Map provider attribution/license text. |
| markers | List<TxMapMarker> | const [] | Map markers to display. |
| dataSource | Object? | null | List, configuration or DataSource instance; takes precedence over items. |
| routes | List<TxMapRoute> | const [] | Route lines to display. |
| routeDataSource | Object? | null | Separate data source for route lines. |
| onCenterChanged | ValueChanged<TxCoordinate>? | null | Reports center; update controlled state in the callback. |
| onZoomChanged | ValueChanged<int>? | null | Reports zoom; update controlled state in the callback. |
| onMarkerClick | ValueChanged<TxMapMarker>? | null | Activated TxMapMarker. |
| height | double | 360 | Height; Vue numbers use pixels, Flutter uses logical pixels. |
| disabled | bool | false | Disables interaction. |
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:tecexpress/tecexpress.dart';
Widget example() {
return TxMap(tileUrl: kIsWeb ? Uri.base.resolve('/tiles/demo.png?z={z}&x={x}&y={y}').toString().replaceAll('%7B', '{').replaceAll('%7D', '}') : null, attribution: 'tecexpress · Synthetic demo tiles', markers: [TxMapMarker(52.52, 13.405, id: 'berlin', text: 'Berlin')]);
}