Skip to content

Custom Laravel Nova map card using Vue2Leaflet

Notifications You must be signed in to change notification settings

ArmeniaH/NovaMapCard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub release (latest by date) Packagist

NovaMapCard

Custom Laravel Nova map card 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 field? (https://github.com/iMuMz/NovaLeafletMap)

image

Installation

composer require imumz/nova-map-card

Usage

use Imumz\NovaMapCard\NovaMapCard
...
(new NovaMapCard())->width("1/2")

Available Methods

Zoom

(new NovaMapCard())
->zoom(4)

Height

(new NovaMapCard())
->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).

(new NovaMapCard())
->googleApiKey('')
->googleMapType('roadmap'), // roadmap, satellite or hybrid

Latitude / Longitude (Point)

The map will automatically center to the coordinates provided.

(new NovaMapCard())
->type('LatLon')
->point('-6.081689','145.391881')

GeoJSON

You have to manually set the GeoJson center.

(new NovaMapCard())
->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

(new NovaMapCard())
->popupName('popup')

Custom Marker Icon

(new NovaMapCard())
->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])

Screenshot 2020-10-06 at 10 09 14

About

Custom Laravel Nova map card using Vue2Leaflet

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 72.7%
  • PHP 25.5%
  • JavaScript 1.7%
  • SCSS 0.1%