[Pro] Overriding map data with shortcode parameters

You are here:

It’s possible to change some data of a given map using shortcode parameters. This feature is basic and was initially implemented for development purposes. This feature is considered EXPERIMENTAL.

In the shortcode display-map id='1' you can use the extra parameters:


The meta parameter will take a JSON string containing the map meta parameters. To know what are the available parameters, in your browser console log, write:


However, since the shortcode parameters can’t contain square brackets, it won’t be possible to change data properties that contain arrays like regions or roundMarkers.

An example of usage:

[display-map id='22460' meta='{"regionDefaults":{"action":"none", "fill":"#6699CC", "hover":"#000000"}}']

The example above will set the default values for the regions.


Since it’s not possible to override the regions property in the meta parameter, the regions have their own parameter.


[display-map id='1' regions='{"id":"LA", "fill":"red", "useDefaults":0},{"id":"TH", "fill":"green", "useDefaults":0}']

In the example above we added 2 regions (Laos and Thailand) and set a specific colour. We also included the useDefaults set to 0 to make sure this colour is used and not the defaults.


You can also add round markers with the shortcode parameter using the following syntax:

[display-map id='1' roundMarkers='{"id":"Marker 01", "latitude":"10.5333", "longitude":"20.2233"},{"id":"Marker 02", "latitude":"12.5333", "longitude":"10.2233"}']


[display-map id='1' meta='{"map":"region/world/asiaLow", "mapURL":"https://cdn.amcharts.com/lib/4/geodata/region/world/asiaLow.js", "exclude":"RU", "viewport":{"zoomLevel":"1.5"}}' regions='{"id":"LA", "fill":"red", "useDefaults":0},{"id":"TH", "fill":"green", "useDefaults":0}']