PHPackages                             lbcdev/filament-map-field - 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. lbcdev/filament-map-field

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

lbcdev/filament-map-field
=========================

A Filament package providing map field components for forms and infolists using lbcdev-map Livewire component

v1.3.0(3mo ago)016MITPHPPHP ^8.1|^8.2|^8.3

Since Jan 3Pushed 3mo agoCompare

[ Source](https://github.com/Luinux81/filament-lbcdev-map-field)[ Packagist](https://packagist.org/packages/lbcdev/filament-map-field)[ RSS](/packages/lbcdev-filament-map-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (6)Versions (10)Used By (0)

Filament Map Field
==================

[](#filament-map-field)

[![Filament v3](https://camo.githubusercontent.com/1b1774cf8d705286184f29914c8909e42f93942e836c7cf32bd254a024ff86ec/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d76332d6f72616e67653f7374796c653d666c61742d737175617265)](https://filamentphp.com)[![Filament v4](https://camo.githubusercontent.com/c2a1acefddd2ec3b181c1db6c949f3fff81b465f07202ea8e1f655e714fa055b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d76342d6f72616e67653f7374796c653d666c61742d737175617265)](https://filamentphp.com)[![PHP Version](https://camo.githubusercontent.com/074222e0a3638b5a49cfb83132a87bf74c33c88485955358673cd65d9b754036/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312532422d626c75653f7374796c653d666c61742d737175617265)](https://php.net)[![Laravel](https://camo.githubusercontent.com/95ab9270d0b5151c57d95bcc15098b1b34f72693dd76d50e42c82a422190ee61/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d3130253230253743253230313125323025374325323031322d7265643f7374796c653d666c61742d737175617265)](https://laravel.com)[![License](https://camo.githubusercontent.com/422db9fd40f5831c765cf6530b6750c081b696bd18d904cf89554df98c676277/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666c61742d737175617265)](LICENSE)

Un paquete de Filament que proporciona componentes de campo de mapa para formularios e infolists, utilizando el componente Livewire [lbcdev-map](https://github.com/Luinux81/livewire-lbcdev-component-map).

> **✨ Compatible con Filament v3 y v4** - Actualiza sin preocupaciones, sin cambios en tu código.

✨ Características
-----------------

[](#-características)

- 🗺️ **MapField** para formularios Filament (selección de puntos interactiva)
- 📋 **MapEntry** para infolists Filament (visualización de puntos)
- 📐 **MapBoundsField** para formularios Filament (selección de áreas rectangulares)
- 📊 **MapBoundsEntry** para infolists Filament (visualización de áreas)
- 🎯 Integración perfecta con el componente Livewire lbcdev-map
- 📍 Soporte para campos de latitud/longitud separados
- 🔄 **Soporte para campos JSON anidados** (v1.1.0+) - Usa notación de punto: `'ubicacion.latitud'`
- ⚡ Actualización reactiva de coordenadas
- 🎨 Compatible con el tema de Filament
- 🔧 Altamente configurable
- ✨ **Compatible con Filament v3 y v4** - Sin cambios necesarios al actualizar

📋 Requisitos
------------

[](#-requisitos)

- PHP 8.1+ (PHP 8.2+ recomendado para Filament v4)
- Laravel 10.x, 11.x o 12.x
- **Filament 3.x o 4.x** ✨
- Livewire 3.x
- [lbcdev/livewire-map-component](https://github.com/Luinux81/livewire-lbcdev-component-map) ^1.0

> **Nota:** Este paquete es compatible con **Filament v3 y v4**. No necesitas hacer cambios en tu código al actualizar de Filament v3 a v4.

📦 Instalación
-------------

[](#-instalación)

### 1. Instalar el paquete via Composer

[](#1-instalar-el-paquete-via-composer)

```
composer require lbcdev/filament-map-field
```

### 2. Incluir Leaflet.js en tu layout

[](#2-incluir-leafletjs-en-tu-layout)

El paquete depende de `lbcdev/livewire-map-component`, que requiere Leaflet.js. Agrega estos scripts en el `` de tu layout principal:

```

```

> **Nota:** Leaflet Draw solo es necesario si vas a usar `MapBoundsField` para seleccionar áreas rectangulares. Si solo usas `MapField` para puntos, no es necesario incluirlo.

Con Filament v4 puedes usar un hook para incluir los tags de Leaflet. Agrega el siguiente código a tu archivo `app/Providers/Filament/AdminPanelProvider.php`:

```
    public function panel(Panel $panel): Panel{
        return $panel
            ...
            ->renderHook(
                'panels::head.end',
                fn(): string => view('filament.hooks.leaflet-assets')->render()
            )
            ...
    }
```

### 3. (Opcional) Publicar las vistas

[](#3-opcional-publicar-las-vistas)

Si deseas personalizar las vistas del componente:

```
php artisan vendor:publish --tag=filament-map-field-views
```

Las vistas se publicarán en `resources/views/vendor/filament-map-field/`.

🚀 Uso
-----

[](#-uso)

### MapField en Formularios

[](#mapfield-en-formularios)

El componente `MapField` permite a los usuarios seleccionar coordenadas de forma interactiva en un formulario.

#### Uso básico

[](#uso-básico)

```
use Lbcdev\FilamentMapField\Forms\Components\MapField;

MapField::make('location')
    ->latitude('latitude')
    ->longitude('longitude');
```

#### Con todas las opciones

[](#con-todas-las-opciones)

```
MapField::make('location')
    ->latitude('latitude')      // Campo donde se guardará la latitud
    ->longitude('longitude')    // Campo donde se guardará la longitud
    ->height(500)              // Altura del mapa en píxeles (default: 400)
    ->zoom(15)                 // Nivel de zoom inicial (default: 15)
    ->showPasteButton()        // Mostrar botón para pegar coordenadas
    ->showLabel()              // Mostrar etiqueta con coordenadas
    ->interactive();           // Permitir interacción (default: true)
```

#### Modo de solo lectura

[](#modo-de-solo-lectura)

```
// Usando readOnly() - Compatible con la API estándar de Filament
MapField::make('location')
    ->latitude('latitude')
    ->longitude('longitude')
    ->readOnly();

// O usando interactive(false) - Mismo resultado
MapField::make('location')
    ->latitude('latitude')
    ->longitude('longitude')
    ->interactive(false);
```

#### Ejemplo completo en un Resource

[](#ejemplo-completo-en-un-resource)

```