Pico Leaflet: using the address meta attribute

le 16/08/2014 dans Pico CMS #dev#javascript#Leaflet#php#Pico CMS#plugin

Instead of using coordinates, you can use addresses to geolocate your blog posts.

First, you have to enable the geocoding function inside your config.php :

$config['leaflet']['geocoding'] = true;

The geocoding functionnality is based on the service provided by the OpenStreetMaps community : www.openstreetmap.org.

Then, in your .md content files you can use the meta "Address":

  • I advise to check the address on the OpenStreetMap website : if it isn't found or the first result, it won't appear or appear with wrong coordinates on your website.
  • You can specify multiple addresses using the pipe : | as separator, just like in the example below :
/*
Title: Pico Leaflet : second example
Description: Ajouter une carte à des pages articles dans Pico CMS
Author: Brice Boucard
Date: 2014/08/15
License: Creative Commons Attribution-ShareAlike 4.0 International License
Template: index
Address: 10 rue Gabriel Péri Paris|20 boulevard de la Liberté, Lille
*/

Display the map

Just like before, to display the map, you just have to edit your active theme index.html and add this to your blog posts section :

{{ map_article }}

Access the meta.address

You can now access the current page meta.address ; in your themeindex.hmtl :

{% if meta.address %}
    

Adresses :

    {% for address in meta.address %}
  • {{ address }}
  • {% endfor %}
{% endif %}

Adresses :

  • 10 rue Gabriel Péri Paris
  • 20 boulevard de la Liberté, Lille