PHPackages                             webbingbrasil/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. webbingbrasil/filament-maps

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

webbingbrasil/filament-maps
===========================

Map components for Filament.

v3.0.2(8mo ago)7834.1k↓22.4%30[4 issues](https://github.com/webbingbrasil/filament-maps/issues)MITPHPPHP ^8.0

Since Oct 11Pushed 8mo ago4 watchersCompare

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

READMEChangelog (10)Dependencies (3)Versions (24)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.

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

50

—

FairBetter than 96% of packages

Maintenance57

Moderate activity, may be stable

Popularity46

Moderate usage in the ecosystem

Community21

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 85.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 ~52 days

Recently: every ~127 days

Total

21

Last Release

265d ago

Major Versions

v1.4.4 → 2.x-dev2023-08-24

v2.0.0 → v3.0.0-beta.12024-03-13

### Community

Maintainers

![](https://www.gravatar.com/avatar/46c152ad4f73337f281add1d284040cf3ce36c8e16987c4668cc213f2bb90826?d=identicon)[dmandrade](/maintainers/dmandrade)

---

Top Contributors

[![dmandrade](https://avatars.githubusercontent.com/u/7275012?v=4)](https://github.com/dmandrade "dmandrade (83 commits)")[![invaders-xx](https://avatars.githubusercontent.com/u/604907?v=4)](https://github.com/invaders-xx "invaders-xx (4 commits)")[![guuhgalvao](https://avatars.githubusercontent.com/u/10224253?v=4)](https://github.com/guuhgalvao "guuhgalvao (4 commits)")[![michaelklopf](https://avatars.githubusercontent.com/u/2892138?v=4)](https://github.com/michaelklopf "michaelklopf (2 commits)")[![mstfkhazaal](https://avatars.githubusercontent.com/u/47450090?v=4)](https://github.com/mstfkhazaal "mstfkhazaal (1 commits)")[![d8vjork](https://avatars.githubusercontent.com/u/2331052?v=4)](https://github.com/d8vjork "d8vjork (1 commits)")[![Mohamed-Amr19](https://avatars.githubusercontent.com/u/95092338?v=4)](https://github.com/Mohamed-Amr19 "Mohamed-Amr19 (1 commits)")[![AV-GregMayes](https://avatars.githubusercontent.com/u/131659502?v=4)](https://github.com/AV-GregMayes "AV-GregMayes (1 commits)")

---

Tags

laravelfilament

###  Code Quality

Code StyleLaravel Pint

### Embed Badge

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

```
[![Health](https://phpackages.com/badges/webbingbrasil-filament-maps/health.svg)](https://phpackages.com/packages/webbingbrasil-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)