This is an example map of France that is devided into the provinces. Each province can be colored individually. The whole map was generated with the Interactive Map Builder.

A province can be selected and edited by simply clicking on it in the map preview. This is a complete list of all available provinces for France:

• Alsace
• Aquitaine
• Auvergne
• Basse-Normandie
• Bourgogne
• Bretagne
• Centre
• Champagne-Ardenne
• Corse
• Franche-Comté
• Haute-Normandie
• Île-de-France
• Languedoc-Roussillon
• Limousin
• Lorraine
• Midi-Pyrénées
• Nord-Pas-de-Calais
• Pays de la Loire
• Picardie
• Poitou-Charentes
• Provence-Alpes-Côte d’Azur
• Rhône-Alpes

The map can be further customized with click actions. Whenever a highlighted province is clicked, it allows to execute custom JavaScript code. These could be opening a link, jumping to anchors on the site, opening a lightbox, etc.

The map configuration can be found here:

×Close

Download map

• Import data
• Help & Instructions

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

{"name":"Map of France","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\":\"FR\",\"marker_opacity\":1,\"marker_size\":\"6\",\"resolution\":\"provinces\",\"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\":\"FR-E\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#6397ce\",\"size\":\"1\",\"tooltip_title\":\"Bretagne\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"},{\"location\":\"FR-P\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#72d365\",\"size\":\"1\",\"tooltip_title\":\"Basse-Normandie\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"},{\"location\":\"FR-Q\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#d6c566\",\"size\":\"1\",\"tooltip_title\":\"Haute-Normandie\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"},{\"location\":\"FR-U\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#cc6167\",\"size\":\"1\",\"tooltip_title\":\"Provence-Alpes-C\\u00f4te d\\u2019Azur\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"},{\"location\":\"FR-B\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#6371ce\",\"size\":\"1\",\"tooltip_title\":\"Aquitanien\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"},{\"location\":\"FR-A\",\"latitude\":\"\",\"longitude\":\"\",\"color\":\"#ce63c9\",\"size\":\"1\",\"tooltip_title\":\"Elsass\",\"tooltip_text\":\"Tooltip text.\",\"click_action_value\":\"\"}]","display_mode":"regions","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} {\n \n}","template_js":""}

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} {
 
}

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