Tile Map

Lightweight tile map: markers, route, popup cards, zoom. Pro · Charts and analytics › Maps and matrices

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add tile-map

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TileMap } from 'valyro-ui-pro';

Props

Prop	Type	Default
`center`	`LatLng`		Map center (controlled).
`defaultCenter`	`LatLng`		Initial `center` when uncontrolled.
`onCenterChange`	`(center: LatLng) => void`		Called with the new `center` when it changes.
`zoom`	`number`		Zoom level, 0 (world) to 19 (street).
`defaultZoom`	`number`		Initial `zoom` when uncontrolled.
`onZoomChange`	`(zoom: number) => void`		Called with the new `zoom` when it changes.
`minZoom`	`number`	`2`	Farthest zoom out allowed. Default 2.
`maxZoom`	`number`	`18`	Closest zoom in allowed. Default 18.
`tileUrl`	`string`	`'https://tile.openstreetmap.org/{z}/{x}/{y}.png'`	Raster tile template with {z}, {x}, {y} and optional {s} (a, b, c) and {r} (@2x). Default: OpenStreetMap.
`darkTileUrl`	`string`		Tiles for dark color schemes; without it the light tiles are inverted.
`markers`	`MapMarker[]`	`[]`	Pins.
`routes`	`MapRoute[]`	`[]`	Polylines: a delivery route, a track.
`activeMarker`	`string \| null`		Marker whose popup is open (controlled).
`defaultActiveMarker`	`string \| null`		Initial `activeMarker` when uncontrolled.
`onActiveMarkerChange`	`(id: string \| null) => void`		Called with the new `activeMarker` when it changes.
`height`	`number \| string`	`420`	CSS height of the map. Default 420px.
`controls`	`boolean`	`true`	Zoom and full-screen buttons. Default true.
`scrollZoom`	`'modifier' \| 'always'`	`'modifier'`	`modifier`: the wheel zooms only with Ctrl / ⌘ (the page keeps scrolling); `always`: it always zooms.
`children`	`ReactNode`		Overlay content: a route card, a search box. Position it yourself.
`labels`	`Partial<TileMapLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Heatmap — Heatmaps
Map Chart — World map: choropleth and points, zoom and pan
Cohort Retention Matrix — Cohort retention: heat table, averages, anomalies and notes
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down

Previous: Map Chart · Next: Cohort Retention Matrix · All Charts and analytics