Map

A keyless OpenStreetMap embed.

import { BuiMap } from 'ng-blatui';

<bui-map [lat]="48.8584" [lon]="2.2945" label="Eiffel Tower" />

No marker

<bui-map [lat]="48.8584" [lon]="2.2945" [marker]="false" />

<bui-map [lat]="40.7128" [lon]="-74.006" label="New York" [height]="480" />

Prop	Type	Default	Description
`lat`	`number`	`50.8503`	Latitude of the map centre, in degrees.
`lon`	`number`	`4.3517`	Longitude of the map centre, in degrees.
`zoom`	`number`	`14`	Zoom level; higher values zoom in closer.
`label`	`string`	`'Location'`	Accessible title for the map iframe.
`marker`	`boolean`	`true`	Whether to drop a pin at the centre coordinate.
`height`	`number`	`320`	Map height in pixels; ignored when `ratio` is set.
`ratio`	`string`	`''`	CSS aspect ratio (e.g. `16/9`); overrides `height` when set.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.