This is an interactive map of France without showing the other countries:

If you pick France in the region box, you will see 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. (If you want to create a new map, you can simply skip all the steps and use the download button from below.)
2. Make sure that in the right column the resolution is set to “Province borders”. Otherwise, this method won’t work.
3. Click on “Map Template”.
4. 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+128) {
     display: none;
   }
   

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

This will manually hide all elements within the SVG graphic that belong to the other countries. 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":"France alone","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":"[]","display_mode":"regions","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} {\n \n}\n\n#{cssid} svg g:nth-child(1) > g:nth-child(1) > path:nth-child(n+1):nth-child(-n+128) {\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+128) {
  display: none;
}

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