Skip to content

Custom Laravel Nova 4 map form field using Leaflet.

Notifications You must be signed in to change notification settings

operativeit/Nova4MapCoordinates

 
 

Repository files navigation

GitHub release (latest by date) Packagist

Nova4MapCoordinates

Custom Laravel Nova 4 form field for create and update using Leaflet to retrieve coordinates from a clickable map marker. Supports Search, Google Maps, map height, marker popup and custom marker icons.

image

Installation

composer require imumz/nova-4-map-coordinates

Usage

use Imumz\Nova4MapCoordinates\Nova4MapCoordinates
...
Nova4MapCoordinates::make('Coordinates')

Available Methods

Height

Nova4MapCoordinates::make('Coordinates')
->height('400px') // default is 300px

Google Maps

image

By default the provider is OpenStreetMaps.
You must set your Google Maps API key (https://developers.google.com/maps/documentation/javascript/get-api-key).

Nova4MapCoordinates::make('Coordinates')
->googleApiKey('')
->googleMapType('roadmap'), // roadmap, satellite or hybrid

Default Tile Provider

Nova4MapCoordinates::make('Coordinates')
->defaultTileProvider('google') // google, openstreetmap

Default Latitude and Longitude

Nova4MapCoordinates::make('Coordinates')
->defaultLatitude()
->defaultLongitude()

Zoom

Set the zoom level. Default is 8.

Nova4MapCoordinates::make('Coordinates')
->zoom(12)

Search

The search provider is a work in progress. Default is ESRI.

image

Search Provider Options

You can pass additional parameters to the searchProviderOptions method

Nova4MapCoordinates::make('Coordinates')
->searchProviderOptions([
  'sourceCountry' => 'ZA',
])

Show / Hide Coordinates Field

The coordinates input field can be hidden

Nova4MapCoordinates::make('Coordinates')
->showMapCoordinates(false)

Custom Marker Icon

Nova4MapCoordinates::make('Coordinates')
->markerIcon('/images/marker-icon.png')

You can pass additional parameters to set the icon size and anchor

->markerIcon('/images/marker-icon.png',[100,100],[50,50])

image

About

Custom Laravel Nova 4 map form field using Leaflet.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 71.2%
  • PHP 20.2%
  • JavaScript 8.5%
  • CSS 0.1%