Map
Interactive map container with markers, popups, layers, and controls
Set PUBLIC_MAPBOX_TOKEN in apps/docs/.env to load the live map.
Accessibility
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Map } from '@dryui/ui';
</script>
<Map.Root center={[-122.4, 37.8]} zoom={12}>
<Map.Marker position={[-122.4, 37.8]}>
<Map.Popup>San Francisco</Map.Popup>
</Map.Marker>
<Map.Controls navigation fullscreen />
</Map.Root>Import options
Root package
ts
import { Map } from '@dryui/ui'Per-component subpath
ts
import { Map } from '@dryui/ui/map'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Map.Root | |||||
| center | LngLat | — | [0 | — | — |
| zoom | number | — | 2 | — | — |
| minZoom | number | — | — | — | — |
| maxZoom | number | — | — | — | — |
| mapStyle | string | — | — | — | — |
| createMap | (container: HTMLDivElement, options: MapOptions) => MapInstance | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
Map.Marker | |||||
| position | LngLat | — | — | ✓ | — |
| color | string | Semantic color or tone applied to the component. | — | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |
| class | string | — | — | — | — |
Map.Popup | |||||
| maxWidth | string | — | '20rem' | — | — |
| closeButton | boolean | — | true | — | — |
| closeOnClick | boolean | — | true | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
| class | string | — | — | — | — |
Map.Layer | |||||
| id | string | Unique HTML id used for labels, aria relationships, or targeted styling. | — | ✓ | — |
| type | heatmappolygonfillcircleline | HTML type attribute or component-specific type selector. | — | ✓ | — |
| data | GeoJsonData | — | — | ✓ | — |
| color | string | Semantic color or tone applied to the component. | — | — | — |
| opacity | number | — | — | — | — |
Map.Controls | |||||
| position | top-lefttop-rightbottom-leftbottom-right | — | 'top-right' | — | — |
| navigation | boolean | — | false | — | — |
| fullscreen | boolean | — | false | — | — |
| children | Snippet | Content rendered inside the component. | — | — | — |