SymbolLayer
Layer ComponentsRender icons and text labels at point locations (GPU-based, recommended for markers)
icontextlabelmarker
Demo
San Francisco Landmarks. Interactive map centered at 0.00 degrees N, 0.00 degrees E at zoom level 2. Use keyboard to navigate.
restaurants
coffees
hotels
Click a marker to see details and popup
Recommended: SymbolLayer + Popup
This demo uses CircleLayer + SymbolLayer instead of DOM-based Markers. These render
on the GPU canvas and are immune to CSS framework interference that can cause markers to slide during
pan/rotate.
- GPU-based rendering - no CSS interference or sliding
- Better performance with many markers
- Full popup support via click events
- Data-driven styling with expressions
Usage
import { SymbolLayer } from '@classic-homes/maps-svelte';
// or for React:
import { SymbolLayer } from '@classic-homes/maps-react';