PicoLeaflet, adding interactive maps to Pico

le 22/07/2018 dans Pico CMS #dev#javascript#php#Pico CMS#plugin

This blog post is just a copy of the PicoLeaflet README.md from its repository on GitHub.

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 insta.momh.fr.

Installation

/!\ 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 https://github.com/bricebou/PicoLeaflet.git

and jump to the Configuration section below.

Otherwise

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

Configuration

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
pll:
  # 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/

Usage

Content

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

Theme

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; }