Theme

Map

display @dryui/ui Compound

Interactive map container with markers, popups, layers, and controls

mapgeomarkerpopuplayergeojson

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

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'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Map with marker and popup

Empire State Building

350 Fifth Avenue, New York

svelte
<Map.Root center={[-73.9857, 40.7484]} zoom={12}>
  <Map.Marker position={[-73.9857, 40.7484]} color="#e74c3c">
    <Map.Popup>
      <strong>Empire State Building</strong>
      <p>350 Fifth Avenue, New York</p>
    </Map.Popup>
  </Map.Marker>
  <Map.Controls position="top-right" navigation fullscreen />
</Map.Root>

Multiple markers with controls

Trafalgar Square
Houses of Parliament
London Eye
svelte
<Map.Root center={[-0.1276, 51.5074]} zoom={13}>
  <Map.Marker position={[-0.1276, 51.5074]} color="#3498db">
    <Map.Popup closeButton>
      <strong>Trafalgar Square</strong>
    </Map.Popup>
  </Map.Marker>
  <Map.Marker position={[-0.1246, 51.5007]} color="#e74c3c">
    <Map.Popup closeButton>
      <strong>Houses of Parliament</strong>
    </Map.Popup>
  </Map.Marker>
  <Map.Marker position={[-0.1195, 51.5033]} color="#2ecc71">
    <Map.Popup closeButton>
      <strong>London Eye</strong>
    </Map.Popup>
  </Map.Marker>
  <Map.Controls position="bottom-right" navigation />
</Map.Root>

Map with data layer

svelte
<Map.Root center={[2.3522, 48.8566]} zoom={11}>
  <Map.Layer
    id="paris-districts"
    type="circle"
    color="#9b59b6"
    opacity={0.6}
    data={{
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: { type: 'Point', coordinates: [2.3522, 48.8566] },
          properties: { name: 'City Center' }
        },
        {
          type: 'Feature',
          geometry: { type: 'Point', coordinates: [2.2945, 48.8584] },
          properties: { name: 'Eiffel Tower' }
        }
      ]
    }}
  />
  <Map.Controls position="top-left" navigation />
</Map.Root>

Structure

Compound components always start with Map.Root. Use this structure block to understand required wrappers before you wire state or styling.

Map.Root
  Map.Marker
    Map.Popup
  Map.Controls
Map.Root Map.MarkerMap.PopupMap.LayerMap.Controls

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Map.Root, then add only the parts you need.

Map.MarkerMap.PopupMap.LayerMap.Controls

Map.Root

Prop Type Default Required Bindable
center
LngLat
— — —
zoom
number
— — —
minZoom
number
— — —
maxZoom
number
— — —
mapStyle
string
— — —
createMap
(container: HTMLDivElement, options: MapOptions) => MapInstance
— — —
children
Snippet
— — —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Map.Marker

Prop Type Default Required Bindable
position
LngLat
— ✓ —
color
string
— — —
children
Snippet
— — —
class
string
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Map.Popup

Prop Type Default Required Bindable
maxWidth
string
— — —
closeButton
boolean
— — —
closeOnClick
boolean
— — —
children
Snippet
— ✓ —
class
string
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Map.Layer

Prop Type Default Required Bindable
id
string
— ✓ —
type
heatmappolygonfillcircleline
 — ✓ —
data
GeoJsonData
— ✓ —
color
string
— — —
opacity
number
— — —

Also accepts standard HTML attributes (class, style, id, etc.)

Map.Controls

Prop Type Default Required Bindable
position
top-lefttop-rightbottom-leftbottom-right
 — — —
navigation
boolean
— — —
fullscreen
boolean
— — —
children
Snippet
— — —

Also accepts standard HTML attributes (class, style, id, etc.)