Brickslab.Tools

@brickslab./ui-web

Composant de carte pour afficher la localisation d'un lieu à partir de coordonnées GPS, avec intégration OpenStreetMap.

Aperçu

Paris - Tour Eiffel

New York - Times Square

Times Square, New YorkOpen in OpenStreetMap

Props

Prop	Type	Défaut	Requis	Description
`lat`	`number`	—	✓	Latitude du lieu à afficher.
`lng`	`number`	—	✓	Longitude du lieu à afficher.
`zoom`	`number`	`13`	—	Niveau de zoom (1 à 19).
`width`	`number \| string`	`"100%"`	—	Largeur du composant (nombre en px ou valeur CSS).
`height`	`number \| string`	`320`	—	Hauteur de la carte (nombre en px ou valeur CSS).
`title`	`string`	`"Location map"`	—	Titre d'accessibilité appliqué à l'iframe.
`placeLabel`	`string`	—	—	Libellé affiché sous la carte (ex: nom de lieu).
`borderRadius`	`string`	`"var(--radius-md)"`	—	Rayon de bordure du conteneur carte.
`showOpenStreetMapLink`	`boolean`	`true`	—	Affiche un lien d'ouverture vers OpenStreetMap.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  lat={0}
  lng={0}
  zoom={13}
  width="100%"
  height={320}
  title="Location map"
  placeLabel="..."
  borderRadius="var(--radius-md)"
  // +1 autres props disponibles
/>

latlngzoomwidthheighttitleplaceLabelborderRadiusshowOpenStreetMapLink

Utilisation

tsx

import { LocationMap } from "@brickslab./ui-web";

export function ContactSection() {
  return (
    <LocationMap
      lat={48.85837}
      lng={2.294481}
      zoom={15}
      height={360}
      placeLabel="Tour Eiffel, Paris"
      title="Carte de localisation de la Tour Eiffel"
    />
  );
}