maloja/pico-leaflet

Interactive maps for Pico CMS.

v1.1 2020-02-24 18:09 UTC

Requires

• php: >=5.3.6

MIT

• Maloja

• maps
• tracks
• picocms
• pico
• picocms-plugin
• pico-leaflet

README

The further development of PicoCMS was discontinued a long time ago. This means that also this project has come to its end. The repository “maloja/pico-leaflet" will be removed in the near future. If you would like to continue using any useful lines of code from this repository, please copy them into your own project.

PicoLeaflet

Interactive maps for Pico CMS. This plugin is based on Leaflet the leading open-source JavaScript library for mobile-friendly interactive maps. In addition, markers, waypoints and routes can be easily added.

Screenshot

Installation

Copy the files from Github https://github.com/maloja/pico-leaflet into your Pico CMS plugins folder plugins/PicoLeaflet.

or clone directly from Github in plugins/PicoLeaflet

cd plugins
git clone https://github.com/maloja/pico-leaflet

or, if you installed Pico CMS with composer

composer require maloja/pico-leaflet

Usage

Add the following expression in your Markdown file. The expression will be replaces by the corresponding map.

(% map:
	width = 400,
	height = 200,
	center = 0.00000 0.00000,
	zoom= 16,
	marker = 0.00 0.00 Add a text label,
	marker = 0.00 0.00 Add a text label,
	markerfile = "/path/to/the/markerfile.txt",
    gpxfile = "/path/to/the/trackfile.gpx",
%)

Options

• width = nnn,: Maximum width of the map. Either a numeric value which means pixels or a percentage value of the page width e.g.50%. If the viewport is smaller than this size, the map will be reduced accordingly. Default is 100%

• height = nnn,: Height of the map in pixels. Values less than 1 are treated as a ratio of the card width. e.g. 0.75. Default is 300px.

• center = lat lon,: Initial geographic center of the map. Represents a geographical point with a certain latitude and longitude. Default is somewhere in switzerland.

• zoom = nn: Initial map zoom level. The greater the value, the greater the magnification. Default 10

• marker = lat lon text,: Places a text marker at the given latitude/longitude position on the map. This line may appear several times for several markings.

• markerfile = "filename": For multiple map markers, the markers can also be saved in a text file. The format is the same as for the individual markers. One line for each marker. The markerfile line may appear several times.

• gpxfile = filename: Routes can also be shown on the maps. The data must be in GPX v1.0 or GPX v1.1 format. The gpxfile line may appear several times

Adding a CSS id or class

It is also possible to add a CSS id or class according to the markdown syntax.
Examples:

(% map ..... %){#id}
(% map ..... %){.class}

Additional Ccmponents

This package contains the following JavaScript components:

Name	Version	URL
Leaflet	1.6.0	https://leafletjs.com/
Leaflet plugin for fullscreen mode	1.6.0	https://github.com/brunob/leaflet.fullscreen
Leaflet plugin for GPX Routes	1.5.0	https://github.com/mpetazzoni/leaflet-gpx
Leaflet plugin for gesture handling	1.1.8	https://github.com/elmarquis/Leaflet.GestureHandling