PHPackages                             imokhles/map-drawing-field-for-backpack - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. imokhles/map-drawing-field-for-backpack

ActiveLibrary[Admin Panels](/categories/admin)

imokhles/map-drawing-field-for-backpack
=======================================

Draw coordinates and save the values easily to your database using Google Map API v3 for Backpack for Laravel

1.0(4y ago)4102MITBlade

Since Oct 12Pushed 4y ago1 watchersCompare

[ Source](https://github.com/iMokhles/map-drawing-field-for-backpack)[ Packagist](https://packagist.org/packages/imokhles/map-drawing-field-for-backpack)[ Docs](https://github.com/imokhles/map-drawing-field-for-backpack)[ RSS](/packages/imokhles-map-drawing-field-for-backpack/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Map Drawing Field for Backpack 4
================================

[](#map-drawing-field-for-backpack-4)

[![Latest Version on Packagist](https://camo.githubusercontent.com/7cee6d5ac960ac3498e9e1c66721e400e1779745714da011793f8f8d56eae773/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696d6f6b686c65732f6d61702d64726177696e672d6669656c642d666f722d6261636b7061636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/imokhles/map-drawing-field-for-backpack)[![Total Downloads](https://camo.githubusercontent.com/d59aa08dd69c92edb1c04ecfd98b35fe4e11dc7382d1d7b03cc837d2b99ca3b5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f696d6f6b686c65732f6d61702d64726177696e672d6669656c642d666f722d6261636b7061636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/imokhles/map-drawing-field-for-backpack)

This package provides a `Map Drawing` field type for the [Backpack for Laravel](https://backpackforlaravel.com/) administration panel. The `Map Drawing` field allows admins to **draw coordinates for specific areas on the map directly**. It uses [Google Map (Drawing) API V3](https://developers.google.com/maps/documentation/javascript/drawinglayer).

Video
-----

[](#video)

    Enregistrement.de.l.ecran.2021-10-12.a.08.54.55.mov    Requirements
------------

[](#requirements)

- [Laravel MySQL Spatial extension](https://github.com/grimzy/laravel-mysql-spatial)

How to use ( Polygon Example )
------------------------------

[](#how-to-use--polygon-example-)

- Edit your Model after installing [Laravel MySQL Spatial extension](https://github.com/grimzy/laravel-mysql-spatial)
- Use `SpatialTrait` within your model
- Add your area column name inside `$spatialFields`

```
use Grimzy\LaravelMysqlSpatial\Eloquent\SpatialTrait;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Zone extends Model
{
    // You need to use SpatialTrait
    use HasFactory, SoftDeletes, SpatialTrait;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'is_active',
    ];

    // area's column name
    protected $spatialFields = [
        'coordinates'
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'id' => 'integer',
        'is_active' => 'boolean',
    ];
}
```

- Edit your xxxCrudController
- Import `LineString`, `Point`, `Polygon`

```
use Grimzy\LaravelMysqlSpatial\Types\LineString;
use Grimzy\LaravelMysqlSpatial\Types\Point;
use Grimzy\LaravelMysqlSpatial\Types\Polygon;
```

- Overwrite `CreateOperation's` and `UpdateOperation's` `store` and `update` functions to reformat the data before saving it

```
    use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation { store as traitStore; }
    use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation { update as traitUpdate; }

    public function store()
    {
        $this->crud->setRequest($this->crud->validateRequest());
        $req = $this->crud->getRequest();

        // do something before validation, before save, before everything
        $this->crud->setRequest($req);
        $this->crud->unsetValidation(); // validation has already been run
        $response = $this->traitStore();
        // do something after save
        $this->handleCoords($req, $this->crud->getCurrentEntry());
        return $response;
    }

    public function update()
    {
        $this->crud->setRequest($this->crud->validateRequest());
        $req = $this->crud->getRequest();

        // do something before validation, before save, before everything
        $this->crud->setRequest($req);
        $this->crud->unsetValidation(); // validation has already been run
        $response = $this->traitUpdate();
        // do something after save
        $this->handleCoords($req, $this->crud->getCurrentEntry());

        return $response;
    }

    /**
     * @param $request
     * @param Zone $item
     */
    protected function handleCoords($request, Zone $item) {
        $value = $request->coordinates;
        foreach(explode('),(',trim($value,'()')) as $index=>$single_array){
            if($index == 0)
            {
                $lastcord = explode(',',$single_array);
            }
            $coords = explode(',',$single_array);
            $polygon[] = new Point($coords[0], $coords[1]);
        }

        $polygon[] = new Point($lastcord[0], $lastcord[1]);
        $item->coordinates = new Polygon([new LineString($polygon)]);
        $item->save();
    }
```

Installation
------------

[](#installation)

Via Composer

```
composer require imokhles/map-drawing-field-for-backpack
```

Usage
-----

[](#usage)

Inside your custom CrudController:

```
$this->crud->addField([
    'name' => 'coordinates',
    'label' => 'Coordinates',
    'type' => 'map-drawing',
    'default_lat' => 30.193000747841246, // default latitude
    'default_lng' => 31.139526309011586, // default longitude
    'api_key' => 'GOOGLE_MAP_API_KEY',
    'view_namespace' => 'map-drawing-field-for-backpack::fields',
]);
```

Notice the `view_namespace` attribute - make sure that is exactly as above, to tell Backpack to load the field from this *addon package*, instead of assuming it's inside the *Backpack\\CRUD package*.

Change log
----------

[](#change-log)

Please see the [changelog](changelog.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [contributing.md](contributing.md) for details and a todolist.

Security
--------

[](#security)

If you discover any security related issues, please email [the author](composer.json) instead of using the issue tracker.

Credits
-------

[](#credits)

- [iMokhles](https://github.com/imokhles) - created the map-drawing field;
- [Cristian Tabacitu](https://github.com/tabacitu) - Backpack for Laravel;
- [Google](https://developers.google.com/maps/documentation/javascript/drawinglayer) - Google Map API;
- [All Contributors](../../contributors)

License
-------

[](#license)

MIT. Please see the [license file](license.md) for more information.

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1674d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/57b8493865caa43e232d5ed05770d2b848e13ee9c39aec0de3f7ebd12dab2882?d=identicon)[iMokhles](/maintainers/iMokhles)

---

Top Contributors

[![iMokhles](https://avatars.githubusercontent.com/u/1247248?v=4)](https://github.com/iMokhles "iMokhles (3 commits)")

---

Tags

laraveladdonadmin-panelbackpackBackpack for LaravelGoogle Map DrawingMap DrawingDrawing Library

### Embed Badge

![Health badge](/badges/imokhles-map-drawing-field-for-backpack/health.svg)

```
[![Health](https://phpackages.com/badges/imokhles-map-drawing-field-for-backpack/health.svg)](https://phpackages.com/packages/imokhles-map-drawing-field-for-backpack)
```

###  Alternatives

[ziming/json-field-for-backpack

A Json Editor Field for Backpack

3597.3k](/packages/ziming-json-field-for-backpack)[izica/relations-widgets-for-backpack

Widgets for preview model relations in laravel backpack

2927.3k](/packages/izica-relations-widgets-for-backpack)[digitallyhappy/toggle-field-for-backpack

Easily toggle boolean attributes with a new field type.

2138.4k](/packages/digitallyhappy-toggle-field-for-backpack)[backpack/revise-operation

Backpack interface for venturecraft/revisionable

43279.9k1](/packages/backpack-revise-operation)[backpack/pagemanager

Create admin panels for presentation websites on Laravel, using page templates and Backpack\\CRUD.

371522.6k6](/packages/backpack-pagemanager)[backpack/backupmanager

Admin interface for managing backups in Backpack, on Laravel 5.2+

340375.9k2](/packages/backpack-backupmanager)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)