Skip to main content

Marker

Marker

Add interactive markers to the map (DOM-based)

Tags: marker pin point location draggable

View Demo

The Marker component adds customizable markers to specific coordinates using DOM elements (maplibregl.Marker). Markers can be styled with colors, made draggable, and support click events. You can also provide custom children for fully custom marker appearances. Note: DOM-based markers can be susceptible to CSS framework interference causing visual sliding during pan/rotate. For production use, consider SymbolLayer + CircleLayer which render on the GPU canvas.

Import​

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

Basic Usage​

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

  let position = [-122.4194, 37.7749];

  function handleDragEnd(e) {
    position = e.lngLat;
  }
</script>

<Map title="Marker Map" center={position} zoom={12}>
  <Marker coordinates={position} color="#e02726" draggable onDragEnd={handleDragEnd} />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
coordinates [number, number] required Marker position [lng, lat]
color string '#3ba4a7' Marker color
anchor 'center' | 'top' | 'bottom' | ... 'bottom' Anchor point
draggable boolean false Allow dragging
rotation number - Rotation angle in degrees
scale number 1 Scale factor
onClick (event) => void - Click handler
onDrag (event) => void - Drag handler
onDragEnd (event) => void - Drag end 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
  • Popup - Display popups with custom content at map locations
  • CircleLayer - GPU-rendered circle features for better performance
  • Dynamic Markers - Test dynamic marker loading after map initialization
On this page