| Install | |
|---|---|
composer require lbcdev/livewire-map-component |
|
| Latest Version: | v1.0.4 |
| PHP: | ^8.1|^8.2|^8.3 |
Un componente Livewire flexible e interactivo para mapas usando Leaflet.js.
composer require lbcdev/livewire-map-component
Agrega estos scripts en el <head> de tu layout principal (antes de @livewireStyles):
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
Si deseas personalizar las vistas del componente:
php artisan vendor:publish --tag=lbcdev-map-views
Las vistas se publicarán en resources/views/vendor/lbcdev-map/.
<livewire:lbcdev-map />
<livewire:lbcdev-map
:latitude="40.416775"
:longitude="-3.703790"
/>
<livewire:lbcdev-map
:latitude="40.416775"
:longitude="-3.703790"
:interactive="false"
/>
<livewire:lbcdev-map
:latitude="40.416775"
:longitude="-3.703790"
:interactive="true"
:showLabel="true"
:showPasteButton="true"
:height="500"
:zoom="15"
/>
| Propiedad | Tipo | Default | Descripción |
|---|---|---|---|
latitude |
?float |
null |
Latitud inicial del marcador |
longitude |
?float |
?null |
Longitud inicial del marcador |
interactive |
bool |
true |
Permite interacción con el mapa |
showLabel |
bool |
true |
Muestra etiqueta con coordenadas |
showPasteButton |
bool |
false |
Muestra botón para pegar coordenadas |
height |
int |
400 |
Altura del mapa en píxeles |
zoom |
int |
15 |
Nivel de zoom inicial |
<?php
namespace App\Livewire;
use Livewire\Component;
class CreateLocation extends Component
{
public $name;
public $latitude;
public $longitude;
protected $listeners = ['map-coordinates-updated' => 'updateMapCoordinates'];
public function updateMapCoordinates($data)
{
$this->latitude = $data['latitude'];
$this->longitude = $data['longitude'];
}
public function save()
{
$this->validate([
'name' => 'required',
'latitude' => 'required|numeric',
'longitude' => 'required|numeric',
]);
// Guardar en la base de datos...
}
public function render()
{
return view('livewire.create-location');
}
}
<div>
<form wire:submit="save">
<div class="mb-4">
<label class="block mb-2">Nombre</label>
<input type="text" wire:model="name" class="w-full px-3 py-2 border rounded">
@error('name') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label class="block mb-2">Ubicación en el mapa</label>
<livewire:lbcdev-map
:latitude="$latitude"
:longitude="$longitude"
:showPasteButton="true"
/>
@error('latitude') <span class="text-red-500">{{ $message }}</span> @enderror
@error('longitude') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">
Guardar
</button>
</form>
</div>
map-coordinates-updatedSe emite cuando las coordenadas cambian (click en mapa, arrastrar marcador, o entrada manual):
$this->dispatch('map-coordinates-updated', [
'latitude' => 40.416775,
'longitude' => -3.703790
]);
fly-to-coordinatesAnima el mapa hacia unas coordenadas específicas:
$this->dispatch('fly-to-coordinates', [
'latitude' => 40.416775,
'longitude' => -3.703790
]);
El componente utiliza clases de Tailwind CSS. Puedes personalizar los estilos publicando las vistas y modificándolas según tus necesidades.
Por defecto, si no se proporcionan coordenadas, el mapa se centrará en:
Puedes modificar estas coordenadas editando las constantes en el componente después de publicar las vistas.
<div>
<div class="mb-4">
<input
type="text"
placeholder="Buscar dirección..."
wire:model.live="searchAddress"
class="w-full px-3 py-2 border rounded"
>
</div>
<livewire:lbcdev-map
:latitude="$latitude"
:longitude="$longitude"
:showPasteButton="true"
:height="500"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<h3 class="mb-2">Ubicación de origen</h3>
<livewire:lbcdev-map
:latitude="$originLat"
:longitude="$originLng"
wire:key="origin-map"
/>
</div>
<div>
<h3 class="mb-2">Ubicación de destino</h3>
<livewire:lbcdev-map
:latitude="$destLat"
:longitude="$destLng"
wire:key="destination-map"
/>
</div>
</div>
Para publicar una nueva versión del paquete en GitHub y Packagist, sigue estos pasos:
Realiza todos los cambios necesarios y asegúrate de que todo funciona correctamente.
Documenta los cambios en un archivo CHANGELOG.md:
## [1.0.1] - 2026-01-03
### Fixed
- Corregidos errores de namespace en funciones helper de Laravel
- Mejorada compatibilidad con IDEs
### Added
- Documentación para publicación de versiones
git add .
git commit -m "Fix: Corregidos errores de namespace y mejorada documentación"
# Crear tag anotado (recomendado)
git tag -a v1.0.1 -m "Versión 1.0.1 - Correcciones de namespace"
# O crear tag simple
git tag v1.0.1
# Subir commits
git push origin main
# Subir el tag
git push origin v1.0.1
# O subir todos los tags a la vez
git push origin --tags
Si tu paquete está registrado en Packagist con el webhook de GitHub configurado, se actualizará automáticamente. Si no:
Este paquete sigue Semantic Versioning:
Ejemplos:
git tag -a v1.0.0 -m "Primera versión estable"
git tag -a v1.1.0 -m "Nueva característica: soporte para múltiples marcadores"
git tag -a v1.1.1 -m "Corrección: error en validación de coordenadas"
git tag -a v2.0.0 -m "Breaking change: nueva API para eventos"
# Listar todos los tags
git tag
# Listar tags con sus mensajes
git tag -n
# Ver detalles de un tag específico
git show v1.0.1
# Eliminar tag local
git tag -d v1.0.1
# Eliminar tag remoto
git push origin --delete v1.0.1
Si encuentras algún problema o tienes sugerencias:
Este paquete es software de código abierto licenciado bajo la Licencia MIT.