Skip to main content

Dynamic Markers

Dynamic Markers

Test dynamic marker loading after map initialization

Tags: marker dynamic reactivity async loading

View Demo

This demo tests that Marker components appear immediately when dynamically added after the map has already loaded. It demonstrates reactivity for markers added via async data loading.

Import​

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

Basic Usage​

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

  let markers = $state([]);

  // Load markers after component mounts
  onMount(async () => {
    const data = await fetchMarkers();
    markers = data;
  });
</script>

<Map title="Dynamic Markers">
  {#each markers as m (m.id)}
    <Marker coordinates={m.coordinates} />
  {/each}
</Map>

Props​

This demo uses the standard Marker component props. See Marker for the full props reference.

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)
  • Popup - Display popups with custom content at map locations
On this page