- How do I integrate this Livewire map component into an existing Laravel 10 project?
- First, install the package via Composer (`composer require lbcdev/livewire-map-component`), then include Leaflet.js CDN in your layout’s `<head>` before `@livewireStyles`. Use the component in Blade templates with basic props like `:latitude` and `:longitude`. Ensure PHP 8.1+ and Livewire 3.x are installed.
- Will this work with Laravel 9 or Livewire 2.x?
- No, this package explicitly requires **Laravel 10.x** and **Livewire 3.x**. Downgrading may break functionality due to dependency constraints. Check the [GitHub repo](https://github.com/Luinux81/livewire-lbcdev-component-map) for future updates.
- Can I use custom markers or layers beyond the default Leaflet.js features?
- The package provides basic marker functionality, but advanced customization (e.g., custom icons, layers) requires manual Leaflet.js integration. Extend the component’s published views or use Livewire hooks to inject custom JavaScript logic.
- How do I handle marker data persistence (e.g., saving to a database)?
- The component emits Livewire events (e.g., `marker-dragged`) for real-time updates. Use these events in your Livewire class to sync coordinates with a database. Example: `$this->dispatch('marker-dragged', ['lat' => $lat, 'lng' => $lng]);` in your component logic.
- What if Leaflet.js CDN fails or is blocked in production?
- Bundle Leaflet.js locally using Vite or Webpack for offline reliability. Replace the CDN links in your layout with locally compiled assets. Test fallback behavior by mocking CDN failures in development.
- Does this support geocoding (e.g., converting addresses to coordinates)?
- No, the package focuses on map rendering and marker interactions. Integrate third-party APIs (e.g., Google Maps, OpenCage) via Livewire’s `$emit` or backend logic to handle address-to-coordinate conversions.
- How do I test marker drag events or edge cases like invalid coordinates?
- Since the package lacks built-in tests, manually test interactions using Livewire’s `$dispatch` and `$listen` methods. Simulate edge cases (e.g., `NaN` coordinates) in your Livewire component logic to validate error handling.
- Is there a way to cluster many markers for performance?
- Leaflet.js supports marker clustering via plugins like `Leaflet.markercluster`. Manually include the plugin in your layout and extend the component’s JavaScript to enable clustering for large datasets.
- Can I use this with Mapbox or Google Maps instead of Leaflet?
- No, this package is **tightly coupled to Leaflet.js**. For Mapbox/Google Maps, consider alternatives like `livewire-gmaps` or build custom Livewire components using their respective APIs.
- How do I customize the map’s appearance (e.g., dark mode, tile layers)?
- Publish the component’s views (`php artisan vendor:publish --tag=lbcdev-map-views`) to override Blade templates. Modify CSS/JS in the published assets or use Leaflet’s built-in options (e.g., `L.tileLayer.dark()`) via custom JavaScript.