first commit

.gitignore

@@ -0,0 +1,32 @@
+/node_modules
+/vendor
+/.idea
+/.vscode
+composer.lock
+package-lock.json
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

README.md

@@ -0,0 +1,133 @@
+# 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
+<?php
+namespace App\Filament\Resources;
+use Filament\Resources\Resource;
+use Filament\Resources\Forms\Form;
+use Humaidem\FilamentMapPicker\Fields\OSMMap;
+...
+class FilamentResource extends Resource
+{
+    ...
+    public static function form(Form $form)
+    {
+        return $form->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)
+
+# License
+
+[MIT](LICENSE) © Humaid Al Mansoori
+
+# Thanks for use
+
+Hopefully, this package is useful to you.
+
+
+
+
+
+

composer.json

@@ -0,0 +1,34 @@
+{
+  "name": "humaidem/filament-map-picker",
+  "description": "",
+  "license": "MIT",
+  "homepage": "https://github.com/humaidem/filament-map-picker",
+  "support": {
+    "issues": "https://github.com/humaidem/filament-map-picker/issues",
+    "source": "https://github.com/humaidem/filament-map-picker"
+  },
+  "require": {
+    "php": "^7.4|^8.0",
+    "filament/filament": "^2.0"
+  },
+  "autoload": {
+    "psr-4": {
+      "Humaidem\\FilamentMapPicker\\": "src"
+    }
+  },
+  "extra": {
+    "laravel": {
+      "providers": [
+        "Humaidem\\FilamentMapPicker\\FilamentMapPickerServiceProvider"
+      ],
+      "aliases": {
+        "MapPicker": "Humaidem\\FilamentMapPicker\\Facades\\MapPicker"
+      }
+    }
+  },
+  "config": {
+    "sort-packages": true
+  },
+  "minimum-stability": "dev",
+  "prefer-stable": true
+}

dist/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/humaidem/map-picker/map-picker.js": "/humaidem/map-picker/map-picker.js?id=30cd9b6a5f17fd7d6723",
+    "/humaidem/map-picker/map-picker.css": "/humaidem/map-picker/map-picker.css?id=cd5eec2b100f31b86f69"
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "filament-map-picker",
+  "author": "Humaid Al Mansoori",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production"
+  },
+  "devDependencies": {
+    "laravel-mix": "^6.0.6",
+    "postcss": "^8.1.14",
+    "leaflet": "^1.7.1"
+  }
+}

resources/css/map-picker.css

@@ -0,0 +1,6 @@
+@import "~leaflet/dist/leaflet.css";
+
+.map-icon {
+    stroke: #dbeafe;
+    fill: #3b82f6;
+}