Skip to main content

Popup

Popup

Display popups with custom content at map locations

Tags: popup tooltip info overlay

View Demo

The Popup component displays information overlays at specific coordinates. Popups support custom HTML/Svelte content, can be anchored to different positions, and include close buttons. They're commonly used with markers or feature click events.

Import​

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

Basic Usage​

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

  const position = [-122.4194, 37.7749];
  let showPopup = true;
</script>

<Map title="Popup Map" center={position} zoom={12}>
  <Marker coordinates={position} onClick={() => (showPopup = true)} />

  {#if showPopup}
    <Popup coordinates={position} onClose={() => (showPopup = false)}>
      <h3>San Francisco</h3>
      <p>The city by the bay</p>
    </Popup>
  {/if}
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
coordinates [number, number] required Popup position [lng, lat]
open boolean true Control popup visibility
closeButton boolean true Show close button
closeOnClick boolean true Close on outside click
anchor 'center' | 'top' | 'bottom' | ... - Anchor position
offset number | [number, number] - Offset from coordinates
maxWidth string '300px' Maximum popup width
onOpen (event) => void - Open handler
onClose (event) => void - Close 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
  • Marker - Add interactive markers to the map (DOM-based)
  • Map - Base map container component
On this page