BasemapSwitcher
Controls & OverlaysSwitch between different map basemaps with a thumbnail grid flyout
basemapswitchertilesproviderosmmaptilerstadia
Demo
Basemap Switcher Demo. Interactive map centered at 37.78 degrees N, 122.42 degrees W at zoom level 12. Use keyboard to navigate.
Position
Options
Primary basemaps: 3 | All built-in: 15
Status
Active basemap: Default
Provider: -
Category: -
Switches: 0
Layer Preservation
Switch basemaps and verify that the colored neighborhood polygons and red circle markers
remain visible. The styleVersion mechanism automatically
re-adds user sources and layers after a basemap change.
Commercial
Residential
Mixed Use
Points of Interest
BasemapSwitcher Features:
- Thumbnail grid flyout with configurable columns
- Built-in support for OSM, MapTiler, and Stadia Maps providers
- Free basemaps work without API keys
- Custom basemap support via
extraBasemapsprop - Automatic layer preservation across basemap switches
- Keyboard accessible (Escape to close)
- Dark mode support
- Configurable position matching other map controls
Usage
import { BasemapSwitcher } from '@classic-homes/maps-svelte';
// or for React:
import { BasemapSwitcher } from '@classic-homes/maps-react';