MapCanvas

Molecule

The card-less Leaflet canvas behind MapView: it fills its parent (give the parent a height), takes markers, zones and routes, and accepts a custom tile configuration (`tiles.url` + `tiles.attribution`). Use it inside a dashboard tile or panel that already has its own frame; use MapView for a standalone map card.

Preview

Loading map…

Code

<div className="h-72">
  <MapCanvas center={[40.5, 30.5]} zoom={6} markers={markers} />
</div>

Preview

Loading map…

Code

<div className="h-72">
  <MapCanvas markers={markers} tiles={{ url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '&copy; OpenStreetMap contributors' }} />
</div>

MapCanvas

Default tiles

Custom tiles