Map

Map component supporting background, static, and interactive display modes with OpenStreetMap tiles and multiple marker points via MapPoint children

Required Props: idSupports Children: MapPoint

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`lat`	number	Center latitude coordinate Default: `51.505`	`40.7128`
`lng`	number	Center longitude coordinate Default: `-0.09`	`-74.006`
`zoom`	number	Zoom level (1=world, 10=city, 15=streets, 18=buildings) Default: `13`	`14`
`type`	string background \| static \| interactive	Display type: background (static tile image), static (tile with marker dots), interactive (full Leaflet map with pan/zoom) Default: `"interactive"`	-
`tileStyle`	string osm \| cartodb-positron \| cartodb-dark \| cartodb-voyager	Map tile visual style Default: `"osm"`	-
`grayscale`	booleanstring	Apply grayscale CSS filter to the map Default: `false`	-
`title`	string	Map title for accessibility (aria-label)	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`url`	string	-	-
`urlTarget`	string	-	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`root`	object	-	-

Examples

Interactive Map with Two Locations

{
  "lat": 40.7128,
  "lng": -74.006,
  "zoom": 12,
  "type": "interactive",
  "tileStyle": "osm",
  "title": "Our Store Locations",
  "className": "aspect-video"
}

Grayscale Background Map

{
  "lat": 51.505,
  "lng": -0.09,
  "zoom": 13,
  "type": "background",
  "tileStyle": "cartodb-positron",
  "grayscale": true,
  "className": "aspect-video"
}