This is an interactive map of Africa without showing the other continents:

The default map of Africa shows all surrounding continents. To hide all of them, you will an additional CSS rule. If you want to add it to an existing map, then follow these steps:

1. Open your map in the map builder
2. Click on “Map Template”.
3. Append the following CSS to your existing styles:

   #{cssid} svg g:nth-child(1) > g:nth-child(1) > path:nth-child(n+1):nth-child(-n+518) {
     display: none;
   }
   

4. Click on “Update Preview” to see the changes.

This will manually hide all elements within the SVG graphic that belong to the other continents. If you haven’t created a map yet, you skip the steps from above and import the following:

×Close

Download map

• Import data
• Help & Instructions

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

{"name":"Africa alone","description":"","js_options":"{\"background_color\":\"#ffffff\",\"border_color\":\"#666666\",\"border_width\":\"0\",\"dataless_regions_color\":\"#f5f5f5\",\"enable_region_interactivity\":\"true\",\"height\":\"350\",\"keep_aspect_ratio\":\"true\",\"region\":\"002\",\"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":"[]","display_mode":"regions","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} {\n \n}\n#{cssid} svg g:nth-child(1) > g:nth-child(1) > path:nth-child(n+1):nth-child(-n+518) {\n display: none;\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} {
 
}
#{cssid} svg g:nth-child(1) > g:nth-child(1) > path:nth-child(n+1):nth-child(-n+518) {
  display: none;
}

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