Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/diegobas/filament-drawable-map/llms.txt

Use this file to discover all available pages before exploring further.

Both DrawableMap and ViewableMap automatically detect whether the Filament panel is displaying in light or dark mode and apply a matching Google Maps colour scheme. No additional configuration is required — the feature works out of the box, and the map updates in real time when the user toggles the theme.

​
How It Works

Theme detection follows a layered approach so the map is always styled consistently with the surrounding panel UI. Initial detection on init When DrawableMap initialises its Alpine component, it reads the active theme in this order:
  1. localStorage.getItem('theme') — the value Filament writes when the user explicitly chooses a theme.
  2. The CSS custom property --default-theme-mode on document.documentElement — the value Filament sets when a panel-level default theme is configured.
The resolved value ('light' or 'dark') is stored as this.theme and passed to applyMode(map, mode) immediately after the Google Maps instance is created. Responding to theme changes in DrawableMap DrawableMap attaches a theme-changed event listener on window. Filament dispatches this native browser event when the user clicks the dark-mode toggle, passing the new mode string as event.detail. When received, the component updates this.theme and calls applyMode(map, mode) on the live map instance. 
window.addEventListener('theme-changed', (event) => {
    this.theme = event.detail
    this.applyMode(map, this.theme)
})
Responding to theme changes in ViewableMap ViewableMap is an Alpine/Livewire component rendered in a Blade template. It listens for the dark-mode-toggled event dispatched by Filament’s Alpine integration: 
x-on:dark-mode-toggled.window="toggleMode"
When this event fires, toggleMode() flips this.mode between 'dark' and 'light' and calls this.applyMode() on the component’s stored this.map reference.

​
Dark Map Style

When mode is 'dark', applyMode applies a full Google Maps style override built from the Google Maps Styling Wizard dark preset. The override adjusts:
  • Geometry — base tile colour changed to a deep navy (#242f3e)
  • Road labels — muted fill (#9ca5b3) with dark stroke
  • Highways — warm tan geometry (#746855) with golden label fill (#f3d19c)
  • POI & locality labels — amber fill (#d59563) on dark geometry
  • Parks — dark teal geometry (#263c3f) with muted green labels
  • Transit — dark slate geometry (#2f3948) with amber station labels
  • Water — deep navy geometry (#17263c) with muted text
When mode is 'light', applyMode clears all custom styles by passing an empty array [] to map.setOptions({ styles: [] }), restoring the default Google Maps appearance.

​
Manual Override

ViewableMap supports locking a field to a fixed mode regardless of the panel theme. The mode() method sets the initial mode value that is embedded directly in the Alpine component’s x-data, so the map renders in the specified mode from the first paint. 
// Force dark mode on a ViewableMap field
ViewableMap::make('zone')
    ->mode('dark'),

// Force light mode on a ViewableMap field
ViewableMap::make('zone')
    ->mode('light'),
DrawableMap exposes a setMode() method on its PHP class, but that value is not wired to the Alpine component — the JS init function always resolves the starting theme from localStorage and --default-theme-mode and then tracks changes via the theme-changed window event. Use the panel’s built-in dark mode controls to influence DrawableMap’s theme at runtime.

​
Available Modes

ModeDescription
'light'Standard Google Maps styling — the default appearance with no custom style overrides applied.
'dark'Full custom dark style matching Filament’s dark theme — adjusts geometry, road, POI, transit, and water colours to a dark palette.
ViewableMap supports a fixed-mode override via ->mode() at field definition time. DrawableMap always derives its theme from the active Filament panel theme via localStorage and the theme-changed event — it does not support a PHP-level mode lock.

Build docs developers (and LLMs) love

Get started for freeTalk to us