Marker
Core ComponentsAdd interactive markers to the map (DOM-based)
markerpinpointlocationdraggable
Demo
Marker Demo - San Francisco Landmarks. Interactive map centered at 37.79 degrees N, 122.43 degrees W at zoom level 12. Use keyboard to navigate.
Draggable Marker
Current Position: 37.7749, -122.4194
Drag me around the map!
Drag History
Drag the orange marker to see history
San Francisco Landmarks
Marker Features:
- Click markers to show popups with location info
- Drag the orange marker and see position updates
- Custom colors for different marker types
- Popup component with close button and custom content
Note: DOM-based Markers
The Marker component uses DOM-based rendering (maplibregl.Marker), which can be susceptible to CSS framework interference causing visual sliding during map pan/rotate operations.
For production use cases or when experiencing CSS conflicts, consider using SymbolLayer + CircleLayer instead, which renders on the GPU canvas and is immune to CSS interference.
Usage
import { Marker } from '@classic-homes/maps-svelte';
// or for React:
import { Marker } from '@classic-homes/maps-react';