Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/humaidem/filament-map-picker
Filament Map Field
https://github.com/humaidem/filament-map-picker
filament laravel map osm php
Last synced: 3 months ago
JSON representation
Filament Map Field
- Host: GitHub
- URL: https://github.com/humaidem/filament-map-picker
- Owner: humaidem
- Created: 2022-01-04T13:20:47.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-20T19:41:19.000Z (12 months ago)
- Last Synced: 2024-07-10T18:28:47.320Z (4 months ago)
- Topics: filament, laravel, map, osm, php
- Language: PHP
- Homepage:
- Size: 519 KB
- Stars: 34
- Watchers: 2
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-filament - humaidem/filament-map-picker - Filament Map Field. (Fields)
README
# Filament Map Picker
A Filament field to enable you select location in map and return geo coordinates.
### Status Note
This package still in beta and not full tested. please use at your own risk.
# Supported Maps
1. Open Street Map (OSM)
More will be added to package once proven it's needed.
# Installation
You can install the package via composer:
```bash
composer require humaidem/filament-map-picker
```
# Basic usage
Resource file
```php
schema([
OSMMap::make('location')
->label('Location')
->showMarker()
->draggable()
->extraControl([
'zoomDelta' => 1,
'zoomSnap' => 0.25,
'wheelPxPerZoomLevel' => 60
])
// tiles url (refer to https://www.spatialbias.com/2018/02/qgis-3.0-xyz-tile-layers/)
->tilesUrl('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
]);
}
...
}
```
### Manipulating data
We will be using grimzy/laravel-mysql-spatial:^4.0 as example, you can use any other package as you please.
#### After State Hydrated
once data loaded from database you will need to convert it to correct format as livewire don't accept class base format.
```php
...
OSMMap::make('location')
->afterStateHydrated(function ($state, callable $set) {
if ($state instanceof Point) {
/** @var Point $state */
$set('location', ['lat' => $state->getLat(), 'lng' => $state->getLng()]);
}
});
...
```
#### mutate Dehydrated State
convert array to Point class before storing data.
```php
...
OSMMap::make('location')
->mutateDehydratedStateUsing(function ($state) {
if (!($state instanceof Point))
return new Point($state['lat'], $state['lng']);
return $state;
});
...
```
#### After State Updated
Make sure to convert data into array after each time updated.
```php
...
OSMMap::make('location')
->afterStateUpdated(function ($state, callable $set) use ($name) {
if ($state instanceof Point) {
/** @var Point $state */
$set($name, ['lat' => $state->getLat(), 'lng' => $state->getLng()]);
}
});
...
```
## Options
Option | Type | Default | Description
------------|--------|-----------------------------------------------| -------------
`draggable(bool)` | bool | false | Allow user to move map around.
`zoom(int)` | int | 19 | Default zoom when map loaded.
`maxZoom(int)` | int | 20 | Max zoom allowed.
`showMarker(bool)` | bool | false | Show Marker in the middle of the map
`tilesUrl(string)` | string | http://tile.openstreetmap.org/{z}/{x}/{y}.png | Tiles service/provider url.
`showZoomControl(bool)` | bool | false | Show or hide Zoom control of the map.
`extraControl(array)` | array | [] | Add extra map controls (please refer to leaflet)
`extraTileControl(array)` | array | [] | Add extra tileLayer controls (please refer to leaflet tileLayer())
# License
[MIT](LICENSE) © Humaid Al Mansoori
# Thanks for use
Hopefully, this package is useful to you.