Filament World Map Widget

Display country-level statistics in a Filament widget powered by jsVectorMap.

Compatibility

| Branch | Filament | PHP | | --- | --- | --- | | main | ^5.0 | ^8.3 | | v4 | ^4.0 | ^8.1 | | v3 | ^3.0 | ^8.1 |

Installation

composer require infinityxtech/filament-world-map-widget

Creating a widget

php artisan make:filament-map-widget VisitorGeoMap

Register the widget in a Filament dashboard or page:

use App\Filament\Widgets\VisitorGeoMap;

public function getWidgets(): array
{
    return [
        VisitorGeoMap::class,
    ];
}

Dashboard Filters

The widget supports Filament dashboard filters, including live filters from HasFiltersForm. The map container remains protected with wire:ignore, while the widget root gets a checksum key so Livewire remounts the Alpine map when stats() or map options change.

namespace App\Filament\Widgets;

use Filament\Widgets\Concerns\InteractsWithPageFilters;
use InfinityXTech\FilamentWorldMapWidget\Widgets\WorldMapWidget;

class VisitorGeoMap extends WorldMapWidget
{
    use InteractsWithPageFilters;

    public function stats(): array
    {
        $range = $this->pageFilters['range'] ?? null;

        return [
            'US' => filled($range) ? 70000 : 35000,
            'RS' => filled($range) ? 30000 : 15000,
        ];
    }
}

namespace App\Filament\Pages;

use App\Filament\Widgets\VisitorGeoMap;
use Filament\Forms\Components\DatePicker;
use Filament\Pages\Dashboard as BaseDashboard;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;

class Dashboard extends BaseDashboard
{
    use HasFiltersForm;

    public function filtersForm(Schema $schema): Schema
    {
        return $schema
            ->components([
                Section::make()
                    ->schema([
                        DatePicker::make('range')
                            ->label('Date range')
                            ->live(),
                    ])
                    ->columns(2)
                    ->columnSpanFull(),
            ]);
    }

    public function getWidgets(): array
    {
        return [
            VisitorGeoMap::class,
        ];
    }
}

Available Maps

Map::WORLD
Map::WORLD_MERC
Map::US_MILL_EN
Map::US_MERC_EN
Map::US_LCC_EN
Map::US_AEA_EN
Map::SPAIN
Map::RUSSIA
Map::CANADA
Map::IRAQ
Map::BRASIL

Customization

Override any of these methods in your widget:

use Illuminate\Contracts\Support\Htmlable;
use InfinityXTech\FilamentWorldMapWidget\Enums\Map;

public function stats(): array
{
    return [
        'US' => 35000,
        'RS' => 15000,
    ];
}

public function heading(): string | Htmlable | null
{
    return 'World Map';
}

public function tooltip(): string | Htmlable
{
    return 'stats';
}

public function map(): Map | string
{
    return Map::WORLD;
}

public function customMapUrl(): ?string
{
    return null;
}

public function color(): array
{
    return [0, 120, 215];
}

public function height(): string
{
    return '332px';
}

public function additionalOptions(): array
{
    return [];
}

To include a custom map, publish an accessible jsVectorMap map file and return both the map name and URL:

public function map(): Map | string
{
    return 'custom-map';
}

public function customMapUrl(): ?string
{
    return 'https://example.test/js/custom-map.js';
}

For more map options, see the jsVectorMap documentation.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• InfinityX Tech
• All Contributors

License

The MIT License (MIT). Please see License File for more information.