Skip to content
Add Leaflet to Pico
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


The PicoLeaflet plugin, for Pico CMS, lets you add interactive maps, using the Leaflet JavaScript API, to your pages.

You can see it live on


/!\ No matter the way you install the plugin, it's mandatory you name the plugin folder PicoLeaflet.

Using GIT

Just move to your Pico CMS plugins directory and run:

$ git clone

and jump to the Configuration section below.


Download the latest zip archive from Github and unzip it inside the plugins/PicoLeaflet/ folder.


Parameters for the PicoLeaflet plugin can be inserted into the config/config.yml file or put in a specific .yml file inside the config folder.

PicoLeaflet.enabled: true
  # Fullscreen button : true | false
  # Default / If unset or commented : false
  fullscreen: true
  # Map layers : OSM, OSM BW, OSM France, Toner, Toner Lite, Watercolor 
  # Default / If unset or commented : OSM (OpenStreetMap)
  # Be careful : you have to use ' | ' (space-pipe-space) as separator
  layers: OSM | Toner | Toner Lite | Watercolor | OSM BW | OSM France
  # On which template the global map is available ? 
  # Default / If unset or commented : map
  global_map_templates: index | map
  # Do you need to prefix the thumb path ?
  # Default / If unset or commented : '' (empty)
  thumb_path_prefix: ../../assets/



Everything happens inside your Markdown files header; for example, this page uses this one:

Title: Et sinon c’est la peine capitale ?
Date: 2018/03/23
Template: post
Tags: neige,ski,mont Dore,typographie,c'est capital!
Thumb: mont_dore_attention.jpg
Coordinates: 45.52029, 2.82071

Geocoding addresses

First, you have to run, inside your Pico's installation root folder, this command:

$ composer require geocoder-php/google-maps-provider php-http/guzzle6-adapter php-http/message

Then, you have to use the Address meta inside your Markdown headers; for example, this page uses this one:

Title: « Impasse de la jeunesse »
Description: Aux abords de la « place de l'Avenir ». Bienvenue à Boisseuil, en Charente-Maritime...
Date: 2018/03/23
Template: post
Tags: optimisme,choix judicieux,promesse
Thumb: boisseuil_impasse_jeunesse.jpg
Address: Impasse de la jeunesse 17700 Boisseuil


The PicoLeaflet plugin adds the pll_map Twig variable:

{{ pll_map }}

/!\ You have to add a CSS rule for your map height!

.pll_map { height: 480px; }
You can’t perform that action at this time.