Map

Map

Interactive map component with built-in controls and theming

Tags: map maplibre interactive theme

The Map component is the core building block for all mapping functionality. It wraps MapLibre GL JS and provides theme integration, accessibility features, navigation controls, and event handling. Use it as a container for layers, markers, and popups.

Import

<script>
  import { Map } from '@classic-homes/maps-svelte';
</script>

// React
import { Map } from '@classic-homes/maps-react';

Basic Usage

<script>
  import { Map } from '@classic-homes/maps-svelte';

  function handleClick(e) {
    console.log('Clicked at:', e.lngLat);
  }
</script>

<Map
  title="My Map"
  center={[-122.4, 37.8]}
  zoom={10}
  height={400}
  navigationControl
  scaleControl
  onClick={handleClick}
/>

Props

Component-Specific Props

Prop	Type	Default	Description
`center`	`[number, number]`	`[0, 0]`	Initial center [lng, lat]
`zoom`	`number`	`2`	Initial zoom level
`bearing`	`number`	`0`	Initial bearing (rotation)
`pitch`	`number`	`0`	Initial pitch (tilt)
`bounds`	`[[number, number], [number, number]]`	-	Fit map to bounds
`interactive`	`boolean`	`true`	Enable map interactions
`navigationControl`	`boolean`	`true`	Show zoom/compass controls
`scaleControl`	`boolean`	`false`	Show scale bar
`fullscreenControl`	`boolean`	`false`	Show fullscreen button
`onClick`	`(event: MapClickEventParams) => void`	-	Click event handler
`onMove`	`(event: MapMoveEventParams) => void`	-	Move event handler
`onLoad`	`(event) => void`	-	Load event handler

Inherited Base Map Props

Prop	Type	Default	Description
`title`	`string`	required	Map title for accessibility (aria-label)
`description`	`string`	-	Optional description for screen readers
`height`	`number \| string`	`400`	Map height in pixels or CSS value
`width`	`number \| string`	-	Map width in pixels or CSS value
`loading`	`boolean`	`false`	Show loading skeleton
`error`	`string \| null`	-	Error message to display
`emptyMessage`	`string`	-	Message shown when data is empty
`theme`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Theme preference
`animation`	`boolean`	`true`	Enable/disable animations (respects prefers-reduced-motion)
`class`	`string`	-	Custom CSS class for styling

Accessibility

The title prop is used as aria-label for screen readers
Keyboard navigation support for interactive elements
Animations respect prefers-reduced-motion media query
High contrast colors in both light and dark modes

FillLayer - Render filled polygons with customizable colors and opacity
CircleLayer - Render point features as circles with customizable radius and colors

On this page