Preview

Duty of care

See every traveler on a live map with risk context and instant contact.

Live Traveler Map compositions use Map, Popover, Card, User, Avatar, Badge, Button, and StatCard for real-time traveler visibility.

3

map layers

4

alert levels

2

contact methods

Best for: Travel management dashboards, security operations, and duty of care compliance.
Requires: Map component with mapbox-gl or maplibre-gl installed by user.

Included patterns

• Interactive map with traveler markers

• Risk zone layer overlays

• Click-to-popover traveler details

• Dashboard stats sidebar

Variants

World map with pins

Map showing all active travelers with status-colored markers.

Risk zone overlays

Map layers highlighting travel advisory and safety zones.

Traveler detail popover

Click-on-pin popover with traveler info, itinerary, and contact.

Dashboard sidebar

Stats panel with traveler count, risk levels, and alerts.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Duty of care</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Map</Sidebar.Item>
            <Sidebar.Item href="#">Travelers</Sidebar.Item>
            <Sidebar.Item href="#">Alerts</Sidebar.Item>
            <Sidebar.Item href="#">Reports</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>See every traveler on a live map with risk context and instant contact.</PageHeader.Title>
          <PageHeader.Description>Live Traveler Map compositions use Map, Popover, Card, User, Avatar, Badge, Button, and StatCard for real-time traveler visibility.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">map layers</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">alert levels</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">contact methods</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Travel management dashboards, security operations, and duty of care compliance.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Requires</DescriptionList.Term>
        <DescriptionList.Description>Map component with mapbox-gl or maplibre-gl installed by user.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Interactive map with traveler markers</Text>
        <Text as="p">• Risk zone layer overlays</Text>
        <Text as="p">• Click-to-popover traveler details</Text>
        <Text as="p">• Dashboard stats sidebar</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>