Leaflet Draw Polygon with mapbox

Leaflet Drawing Polygon field and storing as json for Laravel Backpack ^6.x

[](https://packagist.org/packages/siberfx/backpack-leaflet-drawjs) ## Installation

You can install the package via composer:

composer require siberfx/backpack-leaflet-drawjs

Usage

// config/leaflet.php file content, you can modify it by your own settings.
return [

    'mapbox' => [
        'access_token' => env('MAPS_MAPBOX_ACCESS_TOKEN', 'xxxxxxxxxxxxxxxxxxxxx'),
    ],
];

backpack usage example

 CRUD::addField([
            'name' => 'coordinates',
            'label' => 'Poligon coordinates',
            'type' => 'leaflet-draw',
            'options' => [
                'provider' => 'mapbox',
                'marker_image' => null
            ],

        ]);

the stored data structure example;

{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[30.59967, 36.832371], [30.617523, 36.899391], [30.669708, 36.904882], [30.702667, 36.91696], [30.768585, 36.910372], [30.809784, 36.878522], [30.838623, 36.853252], [30.775452, 36.848857], [30.730133, 36.856549], [30.697174, 36.878522], [30.662842, 36.885113], [30.59967, 36.832371]]]}, "properties": []}

Publish files

php artisan vendor:publish --provider="Backpack\LeafletDrawjs\LeafLetDrawServiceProvider" --tag="all" 

Add Leaflet drawing polygon as json and store as json

you will have to need a migration with json or text type to store the data, as in the example below;

 public function up()
    {
        Schema::create('polygons', function (Blueprint $table) {
            $table->id();
            $table->json('geojson'); // Store GeoJSON data
            $table->timestamps();
        });
    }

the model should be like;

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Polygon extends Model
{
    use HasFactory;

    protected $fillable = ['geojson'];

    // Optionally, if you want to decode the GeoJSON automatically
    public function getGeojsonAttribute($value)
    {
        return json_decode($value);
    }
}

the controller example should be like;

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Polygon;

class PolygonController extends Controller
{
    public function store(Request $request)
    {
        // Validate the incoming data (optional)
        $request->validate([
            'polygon' => 'required|array'
        ]);

        // Store the polygon data as GeoJSON or serialized data
        $polygon = new Polygon();
        $polygon->geojson = json_encode($request->polygon); // Save GeoJSON
        $polygon->save();

        return response()->json(['message' => 'Polygon saved successfully']);
    }
}

the route example;

Route::post('/store-polygon', [PolygonController::class, 'store'])->name('store-polygon');

Call it inside your controller like this or

or add in your Crud controller manually where you want to see it as shown below.

 $this->crud->addField([
        'label' => 'Location',
        'name' => 'location',
        'type' => 'leaflet-draw',
        'options' => [
            'provider' => 'mapbox',
            'marker_image' => null
        ],
        'tab' => 'General'
        'hint' => '<em>You can also drag and adjust your mark by clicking</em>'
 ]);

### Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

## Credits

- [Selim Gormus](https://github.com/siberfx)