Interactive Demos
Features
🌓 Multiple Themes
Built-in Light, Dark, Grayscale, and Custom themes. All customizable via CSS filters without loading additional map tiles.
🎨 Theme Editor
Interactive editor with instant live updates. Adjust brightness, contrast, saturation, hue, invert, sepia, and grayscale filters with intuitive sliders.
👁️ Accessibility
Multiple themes including dark mode for different viewing needs. Theme editor allows individual filter adjustments. ARIA labels for screen reader support.
💾 Persistent Storage
Saves user preferences to localStorage. Automatically restores theme on page load. Supports custom storage keys for multiple maps.
🔍 System Detection
Automatically detects OS dark mode preference using prefers-color-scheme. Falls back to default theme if no preference detected.
🌍 i18n Ready
Fully translatable with getLabel and getEditorLabels callbacks. Automatically updates labels when html[lang] changes. Perfect
for multi-language applications.
🎯 Flexible Styling
Use className for theme-based CSS styling or applyToSelectors to apply filters to other DOM elements beyond the map.
🔧 Programmatic API
Full control with setTheme(), getCurrentTheme(), and editor.openThemeSelector(). Use addButton: false for custom
UI.
⚡ Performance
Instant theme switching without reloading tiles. CSS filters applied directly to the map container. Zero network requests for theme changes.
🪶 Lightweight
No dependencies beyond Leaflet. Pure ES6 modules with clean, modern code. Minimal footprint, maximum functionality.
📦 Modern Build
ES6 module exports with named imports. Works with modern bundlers, Rollup, Webpack, and Import Maps. TypeScript types included.
🌐 Modern Standards
Built for Leaflet 2.x and modern browsers with CSS filter support. Clean, future-focused implementation.
References
🥗 Veggiekarte – Map of vegetarian and vegan locations →Does your open-source project use this plugin? Let us know and we'll add it here!