fahiem/filament-pinpoint
Filament Pinpoint adds a location picker for Filament 4/5 with Google Maps or free Leaflet/OpenStreetMap. Includes search/autocomplete, click-to-set and draggable marker, current location, radius editing, reverse geocoding to fill address fields, dark mode, and translations.
CanBeReadOnly on Pinpoint form component (#18 by
@gpibarra)
readOnly() method to make the mapreadOnlyOn() method to restrict editing on
specific operations (e.g., readOnlyOn('view'))readOnly(fn () => !auth()->user()->can('edit'))var(--gray-*) and var(--primary-*) instead of
hardcoded hex values!important overrides from dark mode
stylesEnglish, Arabic, Dutch, Indonesian, Spanish (new!)
.dark selector, since plugin views aren't scanned by the app's Tailwind JIT compiler.pinpoint-search-input, .pinpoint-search-dropdown, .pinpoint-search-item) under .fi-fo-pinpoint for proper specificityYou can now use Leaflet.js + OpenStreetMap as a completely free map provider — no API key required.
Enable globally via .env:
PINPOINT_PROVIDER=leaflet
Or per field:
Pinpoint::make('location')->provider('leaflet')
PinpointEntry::make('location')->provider('leaflet')
Features (Leaflet provider)
- 🔍 Location search via Nominatim (OpenStreetMap)
- 🏠 Full reverse geocoding — address, province, city, district, village, postal code, street, street number
- ✋ Draggable marker & resizable radius circle
- 📍 Multi-marker support for PinpointEntry with colored SVG pins & popups
- 🌓 Dark mode tile URL support (LEAFLET_TILE_URL_DARK)
- ⚙️ Configurable tile server, attribution, and Nominatim URL
✅ Fully Backward Compatible
Existing users default to provider = google — no changes required.
---
Full Changelog: https://github.com/fahiem152/filament-pinpoint/blob/main/CHANGELOG.md
---
The package now officially supports Filament v5 alongside v4. Composer constraint updated to ^4.0|^5.0.
New methods to auto-fill street data from Google reverse geocoding:
streetField('street') - Auto-fill street namestreetNumberField('street_number') - Auto-fill street numberFixed search box styling in dark mode — improved background contrast and cleaner border styling.
This release improves the radius circle feature with better
visual design and user experience.
Enhanced Visual Design
Better Z-Index Layering
Improved Interactivity
clickable: true to circle for better user interactionEnhanced Documentation
Pinpoint::make('location')
->latField('lat')
->lngField('lng')
->radiusField('radius') // Enable radius circle
->defaultRadius(500) // Default 500 meters
Features:
pins() method to set array of multiple markers with coordinateslabel for marker titlecolor (8 predefined colors: red, blue, green, yellow, purple, pink, orange, ltblue)icon for custom marker icon URLinfo for custom HTML info window contentfitBounds() method to enable/disable auto-fit behavioroverflow: clip for stricter clippingFull Changelog: https://github.com/fahiem152/filament-pinpoint/blob/main/CHANGELOG.md
shortAddressField() - Auto-fill short addresscountryField() - Auto-fill country namePinpointEntry component for InfolistsprovinceField() - Province/State (administrative_area_level_1)cityField() - City/County (administrative_area_level_2)districtField() - District (administrative_area_level_3)postalCodeField() - Postal/ZIP codenull when Google Maps API returns no data, preventing stale data from persisting.Pinpoint::make('location')
->latField('lat')
->lngField('lng')
->addressField('address')
->provinceField('province')
->cityField('city')
->districtField('district')
->postalCodeField('postal_code');
Contributors
How can I help you explore Laravel packages today?