Spatial Map Fields for Laravel Nova

Map Field for Laravel Nova

Spatial Map Fields for Laravel Nova

Spatial Map Fields for Laravel Nova
Spatial Map Fields for Laravel Nova
Spatial Map Fields for Laravel Nova

Using this package, you can use spatial fields in Laravel Nova.



Requirements:

  • PHP 8.0.2 or higher
  • Laravel 8 or higher

Installation

  1. Install the package via composer:
    composer require mostafaznv/nova-map-field
  2. Publish config and assets:
    php artisan vendor:publish --provider="Mostafaznv\NovaMapField\NovaMapFieldServiceProvider"
  3. Done

Usage

  1. Create table with spatial fields

    <?php
    
    return new class extends Migration
    {
        public function up()
        {
            Schema::create('locations', function (Blueprint $table) {
                $table->id();
                $table->string('title', 150);
                $table->point('location')->nullable();
                $table->polygon('area')->nullable();
                $table->timestamps();
            });
        }
    };
  2. Add HasSpatialColumns trait to model

    <?php
    
    namespace App\Models;
    
    use Mostafaznv\NovaMapField\Traits\HasSpatialColumns;
    
    class Location extends Model
    {
        use HasSpatialColumns;
    }
  3. Define spatial columns of model

    <?php
    
    namespace App\Models;
    
    use MatanYadaev\EloquentSpatial\Objects\Point;
    use MatanYadaev\EloquentSpatial\Objects\Polygon;
    
    class Location extends Model
    {
        use HasSpatialColumns;
    
        protected $casts = [
            'location' => Point::class,
            'area'     => Polygon::class
        ];
    }
  4. Add map fields to resource

    <?php
    
    namespace App\Nova\Resources;
    
    use Mostafaznv\NovaMapField\Fields\MapPointField;
    use Mostafaznv\NovaMapField\Fields\MapPolygonField;
    
    class Location extends Resource
    {
        public function fields(Request $request): array
        {
            return [
                MapPointField::make('location'),
                MapPolygonField::make('area')
            ];
        }
    }
  5. Done

Map Field Methods

method Arguments description
defaultLatitude latitude float Specifies latitude of map on page load
defaultLongitude longitude float Specifies longitude of map on page load
zoom zoom integer Specifies default map zoom
withoutZoomControl status bool default: true Specifies whether zoom in/out button should display on map or not
withoutZoomSlider status bool default: true Specifies whether zoom slider should display on map or not
withFullScreenControl status bool default: true Specifies whether full screen button should display on map or not
mapHeight height integer default: 400 Map’s height
markerIcon icon integer available: 1, 2, 3 Marker icon
required Makes field required
requiredOnCreate status bool default: true Makes field required on creation
requiredOnUpdate status bool default: true Makes field required on update

Config Properties

Method Type Default Description
default-latitude bool 0 Default latitude of map
default-longitude bool 0 Default longitude of map
zoom int 12 Default zoom of map
controls.zoom-control bool true Specifies if map should display zoom controls (zoom in/out buttons) or not
controls.zoom-slider bool true Specifies if map should display zoom slider or not
controls.full-screen-control bool false Specifies if map should display full screen button or not
map-height int 400 Specifies map height
icon int 1 Specifies marker icon. available values: 1, 2, 3

Using Spatial Columns over Application

This package uses Laravel Eloquent Spatial under the hood. to use columns and querying them over the application, please read Laravel Eloquent Spatial documentation


Complete Example

<?php

namespace App\Nova\Resources;

use App\Nova\Resource;
use Illuminate\Http\Request;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use App\Models\Location as Model;
use Mostafaznv\NovaMapField\Fields\MapPointField;
use Mostafaznv\NovaMapField\Fields\MapPolygonField;

class Location extends Resource
{
    public static string $model = Model::class;

    public function fields(Request $request): array
    {
        return [
            ID::make()->sortable(),

            Text::make('Title')
                ->sortable()
                ->rules('required', 'max:255'),
                
            MapPointField::make(trans('Location'), 'location')
                ->defaultLatitude(35.6978527)
                ->defaultLongitude(51.4037269)
                ->zoom(14)
                ->withoutZoomControl()
                ->withoutZoomSlider()
                ->withFullScreenControl()
                ->mapHeight(360)
                ->markerIcon(3)
                ->required()
                ->requiredOnCreate()
                ->requiredOnUpdate()
                ->stacked(),
        ];
    }
}


License

This software is released under The MIT License (MIT).

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...