PHPackages                             agelgil/filament-maps - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. agelgil/filament-maps

ActiveLibrary[Utility & Helpers](/categories/utility)

agelgil/filament-maps
=====================

Map components for Filament.

v3.0.0(1y ago)0309MITPHPPHP ^8.2

Since Sep 3Pushed 1y agoCompare

[ Source](https://github.com/agelgil/filament-maps)[ Packagist](https://packagist.org/packages/agelgil/filament-maps)[ Docs](https://github.com/agelgil/filament-maps)[ RSS](/packages/agelgil-filament-maps/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Filament Maps
=============

[](#filament-maps)

[![](https://camo.githubusercontent.com/d743196984a6fc506464a243f882ab76a7586d31dd8950167f6dc00b22c4b09c/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f46696c616d656e742532304d6170732e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d77656262696e6762726173696c25324666696c616d656e742d6d617073267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d412b6c6561666c65742b7769646765742b666f722b46696c616d656e742b41646d696e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d6c6f636174696f6e2d6d61726b6572)](https://camo.githubusercontent.com/d743196984a6fc506464a243f882ab76a7586d31dd8950167f6dc00b22c4b09c/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f46696c616d656e742532304d6170732e706e673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d77656262696e6762726173696c25324666696c616d656e742d6d617073267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d412b6c6561666c65742b7769646765742b666f722b46696c616d656e742b41646d696e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d6c6f636174696f6e2d6d61726b6572)

Render map widgets using [Leaflet](https://leafletjs.com/).

- Support for multiple maps on the same page
- Built-in actions: `CenterMapAction`, `ZoomAction`, `FullpageAction` and , `FullscreenAction`
- Add Filament Actions directly on the as map control buttons
- Multiple layers support. A DarkModeTile layer is included.
- Marker clustering support

> **Note**For **Filament 2.x** use **[2.x](https://github.com/webbingbrasil/filament-maps/tree/2.x)** branch

Installation
------------

[](#installation)

```
composer require webbingbrasil/filament-maps
```

Usage
-----

[](#usage)

Create a widget class and extend `Webbingbrasil\FilamentMaps\Widgets\MapWidget`:

```
use Webbingbrasil\FilamentMaps\Actions;
use Webbingbrasil\FilamentMaps\Marker;
use Webbingbrasil\FilamentMaps\Widgets\MapWidget;

class Map extends MapWidget
{
    protected int | string | array $columnSpan = 2;

    protected bool $hasBorder = false;

    public function getMarkers(): array
    {
        return [
            Marker::make('pos2')->lat(-15.7942)->lng(-47.8822)->popup('Hello Brasilia!'),
        ];
    }

    public function getActions(): array
    {
        return [
            Actions\ZoomAction::make(),
            Actions\CenterMapAction::make()->zoom(2),
        ];
    }
}
```

> If you create a new widget using the `make:filament-widget` command, remember to remove the view created along with it otherwise the map will not be rendered.

Map Configuration
-----------------

[](#map-configuration)

For some configuration its possible to use properties:

- `$mapOptions`: array with options available on Leaftlet. See [Leaflet documentation](https://leafletjs.com/reference.html#map-option) for more details.
- `$tileLayerUrl`: string or array with tile layer url`s. Default to [OpenStreetMap](https://www.openstreetmap.org/).
- `$hasBorder`: show a border around the map. Default is `true`.
- `$rounded`: show a rounded border around the map. Default is `true`.
- `$height`: height of the map. Default is `400px`.
- `$heading`: set the heading of the map.
- `$footer`: set the footer of the map.
- `$fullpage`: show the map in fullpage mode. Default is `false`.

But you can also use the `setUp` method if you need more control:

```
public function setUp(): void
{
    $this
        ->tileLayerUrl(...)
        ->height(..)
        ->rounded(..)
        ->mapOptions(..)
        ->mapMarkers([
            ...
        ])
        ->fitBounds([
            [lat, lng],
            [lat, lng]
            ...
        ])
        ->actions([
            ..
        ]);
}
```

> The `setUp` method is called on `mount` of the widget. See [livewire lifecycle hooks](https://laravel-livewire.com/docs/2.x/lifecycle-hooks) for more information.

### Global Configuration

[](#global-configuration)

If you want to set a default configuration for all instances of the map widget, you can use the `configureUsing` method in a service provider:

```
MyMap::configureUsing(function (ResellerMap $widget) {
    $widget->mapMarkers([
        Marker::make('id')
            ->lat(51.505)
            ->lng(-0.09)
            ->popup('I am a popup')
            ->tooltip('I am a tooltip'),
    ])
    ->tileLayerUrl('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    ->tileLayerOptions([
        'attribution' => 'Map data © OpenStreetMap contributors',
    ])
});
```

Tile Layers
-----------

[](#tile-layers)

The map uses OpenStreetMap tiles by default, but you can change it to use any other provider using `$tileLayerUrl` property or `tileLayerUrl` method. It's recommended to also use the `tileLayerOptions` to set correct attributions.

### Multiple Tile Layers

[](#multiple-tile-layers)

You can also use multiple tile layers:

```
protected string | array  $tileLayerUrl = [
    'OpenStreetMap' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    'OpenTopoMap' => 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'
];

protected array $tileLayerOptions = [
    'OpenStreetMap' => [
        'attribution' => 'Map data © OpenStreetMap contributors',
    ],
    'OpenTopoMap' => [
        'attribution' => 'Map data © OpenStreetMap contributors, SRTM | Map style © OpenTopoMap (CC-BY-SA)',
    ],
];
```

And you can use a action to change the tile layer:

```
Actions\Action::make('mode')
                ->icon('filamentmapsicon-o-square-3-stack-3d')
                ->callback('setTileLayer(mode === "OpenStreetMap" ? "OpenTopoMap" : "OpenStreetMap")'),
```

### Dark Mode

[](#dark-mode)

If you want to use a dark mode tile layer, you can use the `HasDarkModeTiles` trait. This trait will automatically set two tiles layers and listen Filament `dark-mode-toggled` event. You can change the default tile layers using the `$lightModeTileLayerUrl` and `$darkModeTileLayerUrl` properties.

Actions
-------

[](#actions)

You can add actions to the map widget. Actions are buttons that can be clicked to perform an action using a JS callback. You can create your own actions or use the ones provided by the package.

### Zoom Action

[](#zoom-action)

The `ZoomAction` action will add a button to the map that will zoom in or out the map. You can set the zoom level using the `zoom()` method:

```
use Webbingbrasil\FilamentMaps\Actions;
Actions\ZoomAction::make()->zoom(2), // Zoom in/out 2 levels
```

### Center Map Action

[](#center-map-action)

This action will center the map on a specific position.

```
use Webbingbrasil\FilamentMaps\Actions;

public function getActions(): array
{
    return [
        Actions\CenterMapAction::make()->centerTo([51.505, -0.09])->zoom(13),
    ];
}
```

You can also center the map on user position:

```
Actions\CenterMapAction::make()->centerOnUserPosition()->zoom(13)
```

> Note: The center on user position feature will only work if the user browser supports [Navigator.geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation). Also, the user must be on a secure context (HTTPS) and needs to allow access to the location.

#### Fit Bounds

[](#fit-bounds)

You can use fitBounds() to adjusts the zoom level and center of the map to show a given geographical area

```
Actions\CenterMapAction::make()->fitBounds([
   [lat, lng],
   [lat, lng],
])
```

You can pass multiple points to be used in fitBounds or use the initial bounderies configured in setUp()

```
public function setUp(): void
{
    $this->fitBounds([
        [lat, lng],
        [lat, lng],
        ...
    ]);
}

public function getActions(): array
{
    return [
        CenterMapAction::make()->fitBounds($this->getFitBounds()),
    ];
}
```

### Full Page or Full Screen Action

[](#full-page-or-full-screen-action)

You can add a button to the map to show it in full page or full screen mode.:

```
use Webbingbrasil\FilamentMaps\Actions;
Actions\FullpageAction::make()
Actions\FullscreenAction::make()
```

### Custom Action

[](#custom-action)

You can create your own actions using `Webbingbrasil\FilamentMaps\Actions\Action`.

For example, a action to add new markers:

```
use Webbingbrasil\FilamentMaps\Actions;

Actions\Action::make('form')
        ->icon('filamentmapsicon-o-arrows-pointing-in')
        ->form([
            Forms\Components\TextInput::make('name')
                ->label('Name')
                ->required(),
            Forms\Components\TextInput::make('lat')
                ->label('Latitude')
                ->required(),
            Forms\Components\TextInput::make('lng')
                ->label('Longitude')
                ->required(),
        ])
        ->action(function (array $data, self $livewire) {
            $livewire
                ->addMarker(
                    Marker::make(Str::camel($data['name']))
                        ->lat($data['lat'])
                        ->lng($data['lng'])
                        ->popup($data['name'])
                )
                ->centerTo(location: [$data['lat'], $data['lng']], zoom: 13)
        })
```

In this example we use `addMarker()` method to add a new marker dynamically and `centerTo()` to set new map center and zoom level.

You can manipulate markers data using:

```
$liveWire->mapMarkers(array $markers); // update the markers
$livewire->addMarker(Marker $marker); // add a new marker
$livewire->removeMarker(string $id); // remove a marker
$livewire->updateMarker(string $id, Marker $marker); // update a marker
```

> Note: Markers need to have a unique name. If you try to add a marker with the same name as an existing one, the existing one will be replaced.

#### Using JS

[](#using-js)

This approach is useful if you want to use a custom javascript to manipulate the map without using Livewire.

```
Actions\Action::make('center')
    ->alpineClickHandler(position('topright'),
    ])
}
```

### Action Icon

[](#action-icon)

You can set the icon of the action using `icon()` method:

```
Actions\Action::make()->icon('heroicon-o-home')
```

Markers
-------

[](#markers)

You can add markers to the map widget. Markers are points on the map that can be clicked to open a info popup or execute a JS callback.

```
use Webbingbrasil\FilamentMaps\Marker;

$this
    ->mapMarkers([
        Marker::make('id')
            ->lat(51.505)
            ->lng(-0.09)
            ->popup('I am a popup'),
        Marker::make('id')
            ->lat(51.505)
            ->lng(-0.09)
            ->tooltip('I am a tooltip')
            ->callback(lat(51.505)
                ->lng(-0.09)
                ->popup('I am a popup'),
            Marker::make('id')
                ->lat(51.505)
                ->lng(-0.09)
                ->tooltip('I am a tooltip')
                ->callback(color(Marker::COLOR_RED)
```

See the `Marker::COLOR_*` constants for all available colors. Default color is `Marker::COLOR_BLUE`.

### Marker Custom Icon

[](#marker-custom-icon)

You can set a custom icon for the marker using `icon()` method:

```
Marker::make('id')
    ->icon(
        string $iconUrl,
        string $shadowUrl,
        array $iconSize,
        array $iconAnchor,
        array $popupAnchor,
        array $shadowSize
    )
```

You can get extra icons and reledate config from [leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers)

### Display Marker Details

[](#display-marker-details)

At the time, markers do not have the same functionality as Actions but using [livewire events](https://laravel-livewire.com/docs/2.x/events) you can do something similar, for example:

Add a callback to yout marker:

```
Marker::make('place')->callback('Livewire.emit("updateFooter", ' . $placeId . ')');
```

Register event listener in map widget:

```
protected $listeners = ['updateFooter' => 'showMarkerData'];

public function showMarkerData($placeId)
{
    $place = Place::find($placeId);
    $this->footer = view('marker-details', $place);
}
```

Polylines
---------

[](#polylines)

You can add polylines to the map widget. Polylines are lines on the map drawn on the map between two lat/lng points. If your have multiple polylines, each polyline must have an unique name.

```
public function getPolylines(): array
{
    return [
        Polyline::make('polyline')
        ->latlngs([
            [45.51, -122.68],
            [37.77, -122.43],
            [34.04, -118.2]
        ])->options(['color' => 'blue', 'weight' => 5])
        ->tooltip('I am a tooltip')
        ->popup('I am a popup'),
    ];
}
```

You can use options listed at [Leaflet Polyline options](https://leafletjs.com/reference.html#polyline)

### Polylines actions

[](#polylines-actions)

You can use actions as described above to manipulate polylines:

```
Actions\Action::make('add line')
    ->tooltip('Add line')
    ->icon('filamentmapsicon-o-map-pin')
    ->form([
        Forms\Components\TextInput::make('name')
            ->label('Name')
            ->required(),
        Forms\Components\Section::make('Start')
            ->schema([
                Forms\Components\TextInput::make('lat1')
                    ->label('Latitude')
                    ->required(),
                Forms\Components\TextInput::make('lng1')
                    ->label('Longitude')
                    ->required(),
            ]),
        Forms\Components\Section::make('End')
            ->schema([
                Forms\Components\TextInput::make('lat2')
                    ->label('Latitude')
                    ->required(),
                Forms\Components\TextInput::make('lng2')
                    ->label('Longitude')
                    ->required(),
            ]),
    ])
    ->action(function (array $data, self $livewire) {
        $livewire
            ->addPolyline(
                Polyline::make(Str::camel($data['name']))
                    ->latlngs([
                        [$data['lat1'], $data['lng1']],
                        [$data['lat2'], $data['lng2']]
                    ])
            );
    })
```

In this example we use `addPolyline()` method to add a new polyline dynamically. You can also use `removePolyline()` and `updatePolyline()` methods.

```
$livewire->addPolyline(Polyline::make('polyline-name')->latlngs([...])->options([..]));
$livewire->removePolyline('polyline-name');
$livewire->updatePolyline(Polyline::make('polyline-name')->latlngs([...])->options([...]));
```

Polygones
---------

[](#polygones)

You can add polygones to the map widget. Polygones are lines on the map drawn on the map between two lat/lng points. If your have multiple polygones, each polygone must have an unique name.

```
public function getPolylgones(): array
{
    return [
        Polygone::make('polygone')
        ->latlngs([
            [45.51, -122.68],
            [37.77, -122.43],
            [34.04, -118.2]
        ])->options(['color' => 'blue', 'weight' => 5])
        ->tooltip('I am a tooltip')
        ->popup('I am a popup'),
    ];
}
```

You can use options listed at [Leaflet Polygone options](https://leafletjs.com/reference.html#polygone)

### Polygones actions

[](#polygones-actions)

```
$livewire->addPolygone(Polygone::make('polygone-name')->latlngs([...])->options([..]));
$livewire->removePolygone('polygone-name');
$livewire->updatePolygone(Polygone::make('polygone-name')->latlngs([...])->options([...]));
```

Rectangles
----------

[](#rectangles)

You can add rectangles to the map widget. If your have multiple rectangles, each rectangle must have an unique name.

```
public function getRectangles(): array
{
    return [
            Rectangle::make('rectangle')
                ->bounds([
                    [54.559322, -5.767822],
                    [56.1210604, -3.021240]
                ])->tooltip('rectangle')
                ->options(['color' => 'red'])
    ];
}
```

You can use options listed at [Leaflet Rectangle options](https://leafletjs.com/reference.html#rectangle)

### Rectangles actions

[](#rectangles-actions)

```
$livewire->addRectangle(Polygone::make('rectangle-name')->bounds([...])->options([..]));
$livewire->removeRectangle('rectangle-name');
$livewire->updateRectangle(Polygone::make('rectangle-name')->bounds([...])->options([...]));
```

Circles
-------

[](#circles)

You can add circles to the map widget. If your have multiple circles, each circle must have an unique name.

```
public function getCircles(): array
{
    return [
            Circle::make('circle')
                ->lat(-15.7942)
                ->lng(-47.8822)
                ->options(['radius' => 200000])
                ->popup('Hello Brasilia!')
                ->tooltip('test2'),
    ];
}
```

You can use options listed at [Leaflet Circle options](https://leafletjs.com/reference.html#circle)

### Rectangles actions

[](#rectangles-actions-1)

```
$livewire->addCircle(Circle::make('circle-name')->lat(...)->lng(...)->options([..]));
$livewire->removeCircle('circle-name');
$livewire->updateCircle(Circle::make('circle-name')->lat(...)->lng(...)->options([...]));
```

Images
------

[](#images)

[![Header & Footer](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-header-footer.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-header-footer.png)[![Compact](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-compact.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-compact.png)[![Only Header](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-only-header.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-only-header.png)[![Light Mode](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-light-mode.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-light-mode.png)[![Dark Mode](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-dark-mode.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-dark-mode.png)[![Modal Action](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-modal-action.png)](https://raw.githubusercontent.com/webbingbrasil/filament-maps/main/docs/images/image-modal-action.png)

Credits
-------

[](#credits)

- [Danilo Andrade](https://github.com/dmandrade)

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 88.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

623d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8fd28cb32a4cca3aaf21187959977a78066f4bc4c8b110c959efcf117e6dc4c4?d=identicon)[SamAsEnd](/maintainers/SamAsEnd)

---

Top Contributors

[![dmandrade](https://avatars.githubusercontent.com/u/7275012?v=4)](https://github.com/dmandrade "dmandrade (78 commits)")[![invaders-xx](https://avatars.githubusercontent.com/u/604907?v=4)](https://github.com/invaders-xx "invaders-xx (4 commits)")[![michaelklopf](https://avatars.githubusercontent.com/u/2892138?v=4)](https://github.com/michaelklopf "michaelklopf (2 commits)")[![SamAsEnd](https://avatars.githubusercontent.com/u/9657132?v=4)](https://github.com/SamAsEnd "SamAsEnd (2 commits)")[![AV-GregMayes](https://avatars.githubusercontent.com/u/131659502?v=4)](https://github.com/AV-GregMayes "AV-GregMayes (1 commits)")[![d8vjork](https://avatars.githubusercontent.com/u/2331052?v=4)](https://github.com/d8vjork "d8vjork (1 commits)")

---

Tags

laravelfilament

###  Code Quality

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/agelgil-filament-maps/health.svg)

```
[![Health](https://phpackages.com/badges/agelgil-filament-maps/health.svg)](https://phpackages.com/packages/agelgil-filament-maps)
```

###  Alternatives

[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

58289.3k3](/packages/creagia-filament-code-field)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu

context menu (right click menu) for filament

9838.0k](/packages/aymanalhattami-filament-context-menu)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

33184.7k6](/packages/schmeits-filament-character-counter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)