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.

This guide walks you through adding an interactive polygon drawing field to a Filament resource from scratch. By the end you will have a DrawableMap field that lets users draw a geographic zone on a Google Map, persists the coordinates as JSON, and displays the saved polygon in a read-only ViewableMap on the detail page.
1

Install and configure the package

Follow the Installation guide to require the package, publish the config file, and add your GOOGLE_MAPS_API_KEY to .env. Once that is done, return here to wire up the form fields.
2

Add DrawableMap to a Filament resource form

Import DrawableMap and add it to your resource’s form() method. Use location() to set the initial map center, zoom() to control the starting zoom level, and color() to style the drawn polygon:
use DiegoBas\FilamentDrawableMap\Forms\Components\DrawableMap;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            DrawableMap::make('zone')
                ->label('Service Zone')
                ->location(['latitude' => 40.4168, 'longitude' => -3.7038])
                ->zoom(12)
                ->color('#4285F4'),
        ]);
}
The location() method accepts an array with latitude and longitude keys and overrides the global default set in config/filament-drawable-map.php. The color() method accepts any valid CSS hex color string and applies it to the polygon stroke and fill.
3

Add a JSON column to your database migration

DrawableMap serializes the polygon as a JSON array of {lat, lng} coordinate objects (for example [{"lat": 40.42, "lng": -3.70}, ...]). Add a nullable JSON column to your table migration to store it:
$table->json('zone')->nullable();
Run your migration after adding the column:
php artisan migrate
Make sure the zone attribute is cast to array (or left as a JSON string) in your Eloquent model so that Filament can hydrate and dehydrate the value correctly:
protected $casts = [
    'zone' => 'array',
];
4

Display the polygon with ViewableMap

On your resource’s view or detail page, swap in ViewableMap to render the stored polygon as a read-only map. It accepts the same color() method so the display polygon matches the one drawn during creation:
use DiegoBas\FilamentDrawableMap\Forms\Components\ViewableMap;

ViewableMap::make('zone')
    ->label('Service Zone')
    ->color('#4285F4'),
ViewableMap automatically reads the field value from the record, decodes the JSON, and renders the polygon on a non-interactive Google Map embed.

​
How to Interact with DrawableMap

Once the field is rendered in your Filament form, here is how to use the interactive map to define a polygon zone:
  • Add a vertex — Ctrl + Click (or Cmd + Click on macOS) anywhere on the map to place a new polygon vertex at that point.
  • Remove a vertex — Double-click an existing vertex on the polygon to delete it.
  • Reset the polygon — Click the Clear button at the top center of the map to remove all vertices and start over. You can customize the button label with ->clearButtonLabel('Reset').
  • Navigate to the polygon — Click anywhere inside a drawn polygon to pan and zoom the map so the full polygon is visible.
For the full list of available methods — including ViewableMap’s polygons(), titles(), and mode(), as well as DrawableMap’s setMode() and clearButtonLabel() — refer to the component source files under src/Forms/Components/.

Build docs developers (and LLMs) love

Get started for freeTalk to us