Pico Leaflet: using the coordinates meta attribute

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

Add a 'Coordinates' attribute into the page meta:

  • always start with the latitude;
  • latitudes and longitudes must follow this pattern : xx,xxxx using the comma to separate integer from decimal;
  • you can add multiple coordinates pairs, using the pipe : | as separator, just like in the example below :
/*
Title: Pico Leaflet : first 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
Tags: dev
Category: Leaflet
Template: index
Coordinates: 1.45,0.45|1.56,0.47
*/

Display the map

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

{{ map_article }}

Don't worry : leaflet scripts and stylesheets are loaded only if the coordinates meta (or the address meta -- see below) is set.

Access the meta.coordinates

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

{% if meta.coordinates %}
    

Coordinates :

    {% for coordinate in meta.coordinates %}
  • {{ coordinate }}
  • {% endfor %}
{% endif %}

Coordonnées :

  • 6.610771801269206, 3.4086906909942627
  • 6.33859359694389, 19.473631381988525