NovaLeafletMap

Custom Laravel Nova map field using Vue2Leaflet. Supports Google Maps, marker clustering, height, zoom, latitude and longitude coordinates, GeoJSON, marker popup and custom marker icon.

Looking for a Laravel Nova map card? (https://github.com/iMuMz/NovaMapCard)

Installation

composer require imumz/leaflet-map

Usage

use Imumz\LeafletMap\LeafletMap
...
LeafletMap::make('Map View')

Available Methods

Zoom

LeafletMap::make('Map View')
->zoom(8)

Height

LeafletMap::make('Map View')
->height('400px') // default is 300px

Google Maps

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

LeafletMap::make('Map View')
->googleApiKey('')
->googleMapType('roadmap'), // roadmap, satellite or hybrid

Latitude / Longitude (Point)

The map will automatically center to the coordinates provided.

LeafletMap::make('Map View')
->type('LatLon')
->point($this->my_latitude,$this->my_longitude)

GeoJSON

You have to manually set the GeoJson center.

LeafletMap::make('Map View')
->type('GeoJson')
->geoJson('')
->center('-6.081689','145.391881')

GeoJson Example

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "popup": "I am a Popup"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          23.8623046875,
          -30.221101852485987
        ]
      }
    }
  ]
}

Popup

LeafletMap::make('Map View')
->popupName('popup')

Custom Marker Icon

LeafletMap::make('Map View')
->mapIconUrl('/images/marker-icon.png')

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

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