otrsw/leaflet-map

This package is abandoned and no longer maintained. The author suggests using the imumz/leaflet-map package instead.

A Laravel Nova field.

Installs: 2 091

Dependents: 0

Suggesters: 0

Security: 0

Stars: 7

Watchers: 2

Forks: 3

Open Issues: 1

Language:Vue

1.1 2021-01-20 09:05 UTC

This package is auto-updated.

Last update: 2022-06-22 09:57:46 UTC


README

GitHub release (latest by date) Packagist

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)

image

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])

Screenshot 2020-10-06 at 10 09 14