otrsw / leaflet-map
A Laravel Nova field.
Installs: 2 091
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 2
Forks: 3
Open Issues: 1
Language:Vue
Requires
- php: >=7.1.0
README
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])