This is an example map of Central America:

The following screenshot shows how the same map looks like in our plugin:

Our plugin allows highlight the following countries on the Central America map:

• Belize
• Costa Rica
• El Salvador
• Guatemala
• Honduras
• Mexico
• Nicaragua
• Panama

It is also possible to set custom colors for North America, the Carribean and South America.

If you click on one of the regions, it will open the corresponding Wikipedia article in a new window. This is achieved by saving the URL in the click value for each region. To open a new window, we only need to add the following JavaScript code to our map template:

window.open(click_value);

The map configuration can be seen here:

×Close

Download map

• Import data
• Help & Instructions

Copy the following text and click on "Import" in the plugin.

{"name":"Map of Central America","description":"","js_options":"{\"background_color\":\"#ffffff\",\"border_color\":\"#666666\",\"border_width\":\"0\",\"dataless_regions_color\":\"#f5f5f5\",\"enable_region_interactivity\":\"true\",\"height\":\"auto\",\"keep_aspect_ratio\":\"true\",\"region\":\"013\",\"marker_opacity\":1,\"marker_size\":\"6\",\"resolution\":\"countries\",\"tooltip_enable\":\"true\",\"tooltip_color\":\"#000000\",\"tooltip_font_family\":\"<global-font-name>\",\"tooltip_font_size\":\"<global-font-size>\",\"tooltip_trigger\":\"focus\",\"tooltip_html\":\"false\",\"width\":\"auto\"}","js_table":"[{\"location\":\"MX\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#db6627\",\"size\":\"1\",\"tooltip_title\":\"Mexico\",\"tooltip_text\":\"Capital: Mexico city.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Mexico\"},{\"location\":\"GT\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d89a27\",\"size\":\"1\",\"tooltip_title\":\"Guatemala\",\"tooltip_text\":\"Capital: Guatemala city.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Guatemala\"},{\"location\":\"BZ\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d8be27\",\"size\":\"1\",\"tooltip_title\":\"Belize\",\"tooltip_text\":\"Capital: Belmopan.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Belize\"},{\"location\":\"SV\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d8be27\",\"size\":\"1\",\"tooltip_title\":\"El Salvador\",\"tooltip_text\":\"Capital: San Salvador.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/El_Salvador\"},{\"location\":\"HN\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#db6627\",\"size\":\"1\",\"tooltip_title\":\"Honduras\",\"tooltip_text\":\"Capital: Tegucigalpa.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Honduras\"},{\"location\":\"NI\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d89a27\",\"size\":\"1\",\"tooltip_title\":\"Nicaragua\",\"tooltip_text\":\"Capital: Managua.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Nicaragua\"},{\"location\":\"CR\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d8be27\",\"size\":\"1\",\"tooltip_title\":\"Costa Rica\",\"tooltip_text\":\"Capital: San Jos\\u00e9.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Costa_Rica\"},{\"location\":\"PA\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d89a27\",\"size\":\"1\",\"tooltip_title\":\"Panama\",\"tooltip_text\":\"Capital: Panama City.\",\"click_action_value\":\"http:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Panama\"}]","display_mode":"regions","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} path:not([fill=\"#f5f5f5\"]){\n cursor: pointer;\n}","template_js":"window.open(click_value);"}

This explains step-by-step what you have to do:

The first step is to open the "All Maps" page. On this page you will find an "Import" button. If you click on this button, a small window should open. You have to select the "text" tab and insert the import data there. The final step is to click on "Import". The Map Builder should open with the given map. Note that you have to click on the "Save" button. Otherwise the map won't be imported.

Close

#{cssid} path:not([fill="#f5f5f5"]){
 cursor: pointer;
}

<div id="{cssid}">
  %%map%%
</div>

window.open(click_value);