Skip to content
Embed a leaflet map to display an address with a marker
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets [new] Limit Zoom to Map Provider max Zoom Apr 22, 2019
shortcodes
templates Seems onAdminTwigTemplatePaths does not work anymore Apr 24, 2019
CHANGELOG.md
LICENSE
README.md
blueprints.yaml
languages.yaml
leaflet-address.php
leaflet-address.yaml

README.md

Leaflet Address Plugin

Leaflet Address is a Grav CMS Plugin thats add the ability to easily embed a leaflet map to display an address with a marker.

Installation

Installing the Leaflet Address plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install leaflet-address

This will install the Leaflet Address plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/leaflet-address.

Manual Installation

  • Download the zip version of this repository from GitHub.
  • Unzip it under /your/site/grav/user/plugins.
  • Rename the folder to leaflet-address.

You should now have all the plugin files under

/your/site/grav/user/plugins/leaflet-address

NOTE: This plugin is a modular component for Grav which requires Grav CMS. If available the Administration Panel with Form can be used for configuration.

Configuration

Before configuring this plugin, you should copy the user/plugins/leaflet-address/leaflet-address.yaml to user/config/plugins/leaflet-address.yaml and only edit that copy.

Here is a sample configuration:

enabled: true
address:
  country: IT
  name: name
  address: 'Street address'
  zip: 'Postal code'
  city: Locality
  phone: 'Phone number'
  email: email@address.local
  state: 'State or Province'
  subaddress: 'Additional Address'
leaflet:
  zoom: 13
  icon: Yellow
  coordinates: '41.0819847,14.252262'
cdn: true
provider: OpenStreetMap.Mapnik

Options are pretty self explanatory.

Map tiles providers

At the moment the following map tiles are available:

Please note the general terms and conditions of the designated map tiles provider. OpenStreetMap data is free for everyone to use. The tile servers are not. Do you see something on the map that needs editing? Log into OpenStreetMap to fix it and help make the map better for everyone! :)

Using the Administration Panel plugin

If you use the admin plugin, a file named leaflet-address.yaml with your configuration will be saved in the user/config/plugins/ folder once the configuration is saved.

When entering address, postcode, city and country, the coordinates search field will be completed accordingly. The search for coordinates uses the photon.komoot.de API and returns the first six matching entries. When selecting a result, the associated coordinates (longitude, latitude) are entered in the corresponding fields. You can also click on the map to change the marker position and get the latitude,longitude of the selected location.

Leaflet address configuration UI

Usage

The plugin provides two Twig template that you can include in your theme or page where you want to add the leaflet map and address. Something like:

{% include "partials/leaflet-address.html.twig" with {'config': config.plugins['leaflet-address']} %}
{% include "partials/leaflet-address-map.html.twig" with {'config': config.plugins['leaflet-address']} %}

The plugin also provide a shortcode (plugin leaflet address shortcode embed):

[place]

Options:

  • [place type="addr"] - display leaflet address (Using leaflet-address.html.twig)
  • [place type="map"] - display leaflet address map (Using leaflet-address-map.html.twig)

Credits

To Do

  • Check if zoom does not exceed maxZoom of map provider
  • Translations (EN, DE)
You can’t perform that action at this time.