Vectorial world maps plugin for Grav CMS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

World Maps Plugin

This file should be modified to describe the features, installation, configuration, and general usage of this plugin.

The World Maps Plugin is for Grav CMS. This plugin provides customizable and vectorial world maps.

Every regions of the map is clickable and editable by color and link reference.


Installing the World Maps 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.

GPM Installation (Preferred)

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

This will install the World Maps plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/world-maps.

Manual Installation

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 world-maps. You can find these files on GitHub or via

You should now have all the plugin files under


NOTE: This plugin is a modular component for Grav which requires Grav and the Error and Problems to operate.

Admin Plugin

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/world-maps/world-maps.yaml to user/config/plugins/world-maps.yaml and only edit that copy.

Here is the default configuration and an explanation of available options:

enabled: true
js_group: ''
js_priority: 80
default_id: 'world-maps-plugin'
default_class: ''
default_height: '500px'
default_width: '100%'
default_shape: 'world'
default_color: '#A9A9A9'
default_background-color: '#FFFFFF'
default_border-color: '#FFFFFF'
default_hover-color: null
default_selected-color: null
default_multiselect-region: false
default_enable-zoom: false

Note that if you use the admin plugin, a file with your configuration, and named world-maps.yaml will be saved in the user/config/plugins/ folder once the configuration is saved in the admin.


IMPORTANT: Don't forget to include you assets with {{ assets.js() }} in your base Twig template. Otherwhise the World Maps plugin will not works properly. If you are using assets groups like {{ assets.js('mygroup') }}, you can specify the group name with js_group plugin option in your user/config/plugins/world-maps.yaml file or with the admin interface.

There is two ways to integrate your map in a page. You can use it by simply add Shortcode in your page content (see ShortCode example section). Or you can populate the page headers (see Page header example section)

Shortcode or header use both a map object configuration, that can contain region children and legend children with their own configurations.

Options are available in ShortCode tag and in your Markdown header variables


  • title: Displayed map title
  • shape: Name of vectorial map to use
  • id: HTML map element id
  • class: HTML map element class
  • height: HTML map element height
  • width: HTML map element width
  • color: color used by default for map's regions
  • border_color: map's regions border color
  • background_color: map's background color
  • hover_color: map's regions hover color
  • selected_color: map's regions selected color
  • zoom_enabled: Enable or not zoom buttons
  • multi_select_region: Enable or not multi region selection


  • ref: Region/Country code name
  • color: Given region color
  • link: Link to open on region click


  • text: Legend's text/label
  • color: Color used for text/label

Page header example :

title: 'World Map'
cache_enable: false
    title: 'my world map'
    shape: world
    id: custom_id
    class: custom_class
    height: 300px
    width: 100%
    color: '#A9A9A9'
    border_color: '#FFF'
    background_color: '#FFF'
    hover_color: null
    selected_color: null
    zoom_enabled: false
    multi_select_region: false
            ref: ar
            color: '#db3434'
            link: /home
            ref: us
            color: '#4f49c9'
            link: /thankyou
            text: TEST
            color: '#db3434'
            text: TEST2
            color: '#4f49c9'

ShortCode example :

World map

[map shape="world" id="myworldmap"]
    [region ref="us" color="#666" link="thankyou"][/region]
    [region ref="in" color="#666" link="thankyou"][/region]
    [region ref="fr" color="#123456" link="thankyou"][/region]
    [region ref="au" color="#666" link="thankyou"][/region]
    [legend text="VISITED" color="#666"][/legend]
    [legend text="CURRENT" color="#123456"][/legend]

Europe map

[map shape="europe" id="myeuropedmap"]
    [region ref="ro" color="#666" link="thankyou"][/region]
    [region ref="fr" color="#123456" link="thankyou"][/region]
    [region ref="fi" color="#666" link="thankyou"][/region]
    [legend text="VISITED" color="#666"][/legend]
    [legend text="CURRENT" color="#123456"][/legend]

Blueprint import :

You can integrate the World Maps plugin blueprint as a partial element in any of your own blueprints. Just use those 3 lines in your blueprint template :

  type: partials/map
  context: blueprints:// 

Import example

title: WorldMap
# Uncomment to extend from default
#'@extends': default

            type: tabs
            active: 1


              # Inside existing tab
                  type: tab
                  title: Content

                      type: section
                      title: MAP SETTINGS
                        type: partials/map
                        context: blueprints://
              # Inside a new tab
                  type: tab
                  title: Map
                  ordering@: content # Set the Map tab after Content tab
                    type: partials/map
                    context: blueprints://

Admin render


Thanks to Peter Schmalfeldt and 10 Best Design for JQVMap development and maintenance.

To Do

  • Add missing JQVMap parameters in config and blueprint
  • Add default values in parial blueprint map.yaml from config file world-maps.yaml
  • Check incoming parameter values in map.html.twig and set default values if missing to prevent errors