Plugin to put leaflet map on a page
MIT License
The Map Leaflet Plugin is for Grav CMS. Embed a map with markers using fontawesome icons or letters/numbers. Uses open source Leaflet js library with data from OpenStreetMap. Extra-Marker Leaflet plugin is used for the markers. Enhanced map styling can be obtained from Thunderforest or MapBox, but requires an api key (royalty free options are available).
Google changed its policy - effective June 2018 - about maps so that a credit card account had to be provided to access parts of the map api. OpenStreetMap provides map data as a community service, and Leaflet provides an opensource js library to access the map data. Maps can be enhanced by other third-party providers, who - like Google (at the time of writing) - require an apikey, but unlike Google do not require bank details.
This plugin was written to provide an alternative to the map-google
plugin and is based on map-quest
.
Since OpenStreetMap provides tiles without charge, there are limitations on use and the service should be treated with respect.
Installing the Map Leaflet plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.
The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's terminal (also called the command line). From the root of your Grav install type:
bin/gpm install map-leaflet
This will install the Map Leaflet plugin into your /user/plugins
directory within Grav. Its files can be found under /your/site/grav/user/plugins/map-leaflet
.
To install this plugin, just download the zip version of this repository and unzip it under /your/site/grav/user/plugins
. Then, rename the folder to map-leaflet
. You can find these files on GitHub or via GetGrav.org.
You should now have all the plugin files under
/your/site/grav/user/plugins/map-leaflet
NOTE: This plugin is a modular component for Grav which requires Grav and the Error and Problems to operate.
If you use the admin plugin, you can install directly through the admin plugin by browsing the Plugins
tab and clicking on the Add
button.
Before configuring this plugin, you should copy the user/plugins/map-leaflet/map-leaflet.yaml
to user/config/plugins/map-leaflet.yaml
and only edit that copy.
Here is the default configuration and an explanation of available options:
enabled: true
provider: opensteetmap
variant:
apikey:
Note that if you use the admin plugin, a file with your configuration, and named map-leaflet.yaml will be saved in the user/config/plugins/
folder once the configuration is saved in the admin.
The following example demonstrates how to embed an interactive map and place on it two sets of markers.
The plugin provides two shortcodes:
[map-leaflet]
classes
to the class attribute of the div containing the map. Defaults to ''.
classes
is defined, then it is assumed one of the classes sets the width and height of the div (to allow for responsive map sizing). width and height must be set by a class in order for the map to be generated.marker
codes.[a-markers]
markerColor
-- one of colors listed below (default = 'blue') iconColor
-- an HTML colour code, (default = 'white')draggable
-- see MapLeaflet documentation. By default False. True if either option is present, or given as draggable=Truespin
-- the icon spins (default = False), can be set as for draggable{"title": "popup text", "lat": 122.222, "lng": 22.9, "markerColor": "red" , "icon": "coffee" }
lat
and lng
are mandatory, and the others are optional. If not included, the default value is given to them.
title
-- the text for the popup of the marker (default = '')text
-- the text inside the marker (default = '') Should be kept short.markerColor
, iconColor
,draggable
and spin
can be set in the hash or a default set in the shortcode.Markers are coloured images, so only a finite number are possible. The following colors are provided:
red | orange | green | blue |
purple | darkred | darkblue | darkgreen |
darkpurple | cadetblue | lightred | beige |
lightgreen | lightblue | pink | salmon |
white | lightgray | gray | black |
The colours correspond to:
The following code is in /user/pages/03.map/default.md
---
title: Maps
cache_enable: false
---
# London Neighbourhoods
[map-leaflet lat=51.505 lng=-0.09 zoom=13 mapname=neighbourhood variant=neighbourhood scale ]
[a-markers markerColor="darkblue"
iconColor="white"
]
[{ "lat": 37.7749, "lng": -122.4194, "icon": "home", "title": "Home Position" } ]
[/a-markers]
[a-markers icon=""]
[ { "lat": 51.505, "lng": -0.09 , "text": 1, "draggable": true },
{ "lat": 51.515, "lng": -0.1 , "text": 2, "markerColor": "cadetblue" },
{ "lat": 51.515, "lng": -0.14, "text": 3, "spin": true },
{ "lat": 51.505, "lng": 0, "text": 4, "spin": false },
{ "lat": 51.525, "lng": -0.01, "icon": "coffee", "markerColor": "red", "title": "Lovely bistro"}
]
[/a-markers]
[/map-leaflet]
# San Fransisco Transport
[map-leaflet lat=37.7749 lng=-122.4194 zoom=13 mapname=transd variant=transport-dark ]
[a-markers markerColor="lightblue"
iconColor="white"
]
[{ "lat": 37.7749, "lng": -122.4194, "icon": "home", "title": "Home Position" } ]
[/a-markers]
[a-markers icon=""]
[ { "lat": 37.775, "lng": -122.48 , "text": 1, "draggable": true },
{ "lat": 37.77, "lng": -122.414 , "text": 2, "markerColor": "pink" },
{ "lat": 37.765, "lng": -122.409, "text": 3, "spin": true },
{ "lat": 37.76, "lng": -122.3995, "text": 4, "spin": false },
{ "lat": 37.755, "lng": -122.499, "icon": "coffee", "markerColor": "lightred", "title": "Lovely bistro"}
]
[/a-markers]
[/map-leaflet]
First try this with OpenStreetMap. There are no styles, so the extra style information is discarded.
Next, get an apikey from Thunderforest Sign in and add it to the plugin configuration.
Next look at the maps in the example to see how styling can dramatically improve perception.
Since the style
can be changed inside the shortcode, different map styles can be given to the user to choose (for the two 3-party providers here). For example, a drop down box can be created in a form, and when the user responds with a map style change, it is included via Twig in the shortcode.
In the example, the map style is taken from the page header.
The coordinates in this illustration have no meaning.