Skip to content

Commit

Permalink
Merge pull request #37 from dotswan/feature/geoman
Browse files Browse the repository at this point in the history 
[Feature] Geoman Toolbar Implementation
  • Loading branch information
@majidalavizadeh
majidalavizadeh authored Oct 7, 2024
2 parents 9405caa + c63b192 commit 34a2c8b
Show file tree
Hide file tree
Showing 9 changed files with 747 additions and 10,731 deletions.
127 changes: 98 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ A custom field for Filament that allows you to effortlessly select a location on

![270298161-46b97f72-518b-40c5-963b-8e9d39d77d67](https://github.com/dotswan/map-picker/assets/20874565/a5dbda7b-b5c1-4038-9bf9-7a0a4c8ff632)

![image](https://github.com/user-attachments/assets/53d9de27-7e1f-4638-8c71-3b2c6b5d68ef)

## Introduction

Expand All @@ -19,6 +20,8 @@ Map Picker is a Filament custom field designed to simplify the process of choosi
* A Field for Filament-v3 with OpenStreetMap Integration
* Receive Real-time Coordinates Upon Marker Movement Completion
* Tailor Controls and Marker Appearance to Your Preferences
* GeoMan Integration for Advanced Map Editing Capabilities

* Latest versions of PHP and Filament
* Best practices applied:
* [`README.md`][link-readme] (badges included)
Expand All @@ -27,6 +30,20 @@ Map Picker is a Filament custom field designed to simplify the process of choosi
* [`.gitignore`][link-gitignore]
* [`pint.json`][link-pint]


## GeoMan Integration

This package now includes integration with GeoMan, a powerful tool for creating and editing geometries on maps. GeoMan allows users to draw various shapes, edit existing geometries, and perform advanced map editing tasks.

### GeoMan Features:

- Draw markers, polygons, polylines, and circles
- Edit existing geometries
- Cut polygons
- Rotate shapes
- Drag mode for easy shape manipulation
- Delete layers

## Supported Maps

Map Picker currently supports the following map:
Expand Down Expand Up @@ -62,35 +79,51 @@ class FilamentResource extends Resource
{
return $form->schema([
Map::make('location')
->label('Location')
->columnSpanFull()
->defaultLocation(latitude: 40.4168, longitude: -3.7038)
->afterStateUpdated(function (Set $set, ?array $state): void {
$set('latitude', $state['lat']);
$set('longitude', $state['lng']);
})
->afterStateHydrated(function ($state, $record, Set $set): void {
$set('location', ['lat' => $record->latitude, 'lng' => $record->longitude]);
})
->extraStyles([
'min-height: 150vh',
'border-radius: 50px'
])
->liveLocation(true, true, 5000)
->showMarker()
->markerColor("#22c55eff")
->showFullscreenControl()
->showZoomControl()
->draggable()
->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
->zoom(15)
->detectRetina()
->showMyLocationButton()
->extraTileControl([])
->extraControl([
'zoomDelta' => 1,
'zoomSnap' => 2,
])
->label('Location')
->columnSpanFull()
->defaultLocation(latitude: 40.4168, longitude: -3.7038)
->afterStateUpdated(function (Set $set, ?array $state): void {
$set('latitude', $state['lat']);
$set('longitude', $state['lng']);
$set('geojson', json_encode($state['geojson']));
})
->afterStateHydrated(function ($state, $record, Set $set): void {
$set('location', [
'lat' => $record->latitude,
'lng' => $record->longitude,
'geojson' => json_decode(strip_tags($record->description))
]
);
})
->extraStyles([
'min-height: 150vh',
'border-radius: 50px'
])
->liveLocation(true, true, 5000)
->showMarker()
->markerColor("#22c55eff")
->showFullscreenControl()
->showZoomControl()
->draggable()
->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
->zoom(15)
->detectRetina()
->showMyLocationButton()
->geoMan(true)
->geoManEditable(true)
->geoManPosition('topleft')
->drawCircleMarker()
->rotateMode()
->drawMarker()
->drawPolygon()
->drawPolyline()
->drawCircle()
->dragMode()
->cutPolygon()
->editPolygon()
->deleteLayer()
->setColor('#3388ff')
->setFilledColor('#cad9ec')
]);
}
...
Expand Down Expand Up @@ -135,6 +168,42 @@ Map::make('location')
->draggable()
```

## Options Table

Here's a table describing all available options and their default values:

| Option | Description | Default Value |
|--------|-------------|---------------|
| draggable | Allow map dragging | true |
| showMarker | Display marker on the map | true |
| tilesUrl | URL for map tiles | 'http://tile.openstreetmap.org/{z}/{x}/{y}.png' |
| attribution | Map attribution text | null |
| zoomOffset | Zoom offset | -1 |
| tileSize | Tile size | 512 |
| detectRetina | Detect and use retina tiles | true |
| minZoom | Minimum zoom level | 0 |
| maxZoom | Maximum zoom level | 28 |
| zoom | Default zoom level | 15 |
| markerColor | Color of the marker | '#3b82f6' |
| liveLocation | Enable live location updates | [false, false, 5000] |
| showMyLocationButton | Show "My Location" button | false |
| default | Default location | ['lat' => 0, 'lng' => 0] |
| geoMan.show | Enable GeoMan | false |
| geoMan.editable | Allow editing with GeoMan | true |
| geoMan.position | Position of GeoMan controls | 'topleft' |
| geoMan.drawCircleMarker | Allow drawing circle markers | true |
| geoMan.rotateMode | Enable rotate mode | true |
| geoMan.drawMarker | Allow drawing markers | true |
| geoMan.drawPolygon | Allow drawing polygons | true |
| geoMan.drawPolyline | Allow drawing polylines | true |
| geoMan.drawCircle | Allow drawing circles | true |
| geoMan.dragMode | Enable drag mode | true |
| geoMan.cutPolygon | Allow cutting polygons | true |
| geoMan.editPolygon | Allow editing polygons | true |
| geoMan.deleteLayer | Allow deleting layers | true |
| geoMan.color | Stroke color for drawings | '#3388ff' |
| geoMan.filledColor | Fill color for drawings | '#cad9ec' |

### Usage As Infolist Field

The MapEntry Infolist field displays a map.
Expand Down
Loading

0 comments on commit 34a2c8b

Please sign in to comment.