Skip to content


Repository files navigation

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.


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


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.


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
  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'
  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 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


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 type="addr"] - display leaflet address (Using leaflet-address.html.twig)
  • [place type="map"] - display leaflet address map (Using leaflet-address-map.html.twig)


To Do

  • Check if zoom does not exceed maxZoom of map provider
  • Translations (EN, DE)