This is an example for a splitted map. It basically consists of two maps that are inserted next to each other on your page. We use the following HTML on our page or post where we want to use the map:

<table style="width: 100%;">
	<tr>
		<td style="width: 30%; height: 190px">
			<!-- this just fills the space above the smaller map -->
		</td>
		<td rowspan="2" style="width: 70%;">
			[interactive_map id="34"]
		</td>
	</tr>
	<tr>
		<td style="width: 30%;">
			[interactive_map id="33"]
		</td>
	</tr>
	<tr>
		<td colspan="2" class="splitted_map_value">
			<small>Please click on one of the markers</small>
		</td>
	</tr>
</table>

If you copy this, please note that both shortcodes will probably have different ids.

In this example we used a map of Spain and the Canarian island which can be downloaded at the end of this page. If you import and save them, you will find a shortcode on the “All maps” page. If you replace this in the HTML from above, you should get the same result. It might be possible that the height: 190px of the first table cell has to be replaced by a different value. This can depend on the page width. Please also note that we don’t recommend to use tooltips in splitted maps. They might get cut off if the markers are too close to the left side.

These are the two maps from this example:

Map of Spain:

×Close

Download map

• Import data
• Help & Instructions

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

{"name":"Map of Spain with custom crop","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\":\"ES\",\"marker_opacity\":1,\"marker_size\":\"10\",\"resolution\":\"provinces\",\"tooltip_enable\":\"false\",\"tooltip_color\":\"#000000\",\"tooltip_font_family\":\"<global-font-name>\",\"tooltip_font_size\":\"<global-font-size>\",\"tooltip_trigger\":\"focus\",\"tooltip_html\":\"true\",\"width\":\"auto\"}","js_table":"[{\"location\":\"Barcelona\",\"latitude\":\"41.3850639\",\"longitude\":\"2.1734035\",\"color\":\"#aabb00\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<strong>Barcelona<\\\/strong>\\n<p>Click for more information<\\\/p>\",\"click_action_value\":\"You clicked on <strong>Barcelona<\\\/strong>.\"},{\"location\":\"Madrid\",\"latitude\":\"40.4167754\",\"longitude\":\"-3.7037902\",\"color\":\"#aabb00\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<strong>Madrid<\\\/strong>\\n<p>Click for more information<\\\/p>\",\"click_action_value\":\"You clicked on <strong>Madrid<\\\/strong>.\"}]","display_mode":"marker_by_coordinates","template_id":-2,"template_html":"<div id=\"{cssid}\">\n <div class=\"map_wrap\">\n %%map%% \n <\/div>\n<\/div>","template_css":"#{cssid} {\n \toverflow: hidden;\n position: relative;\n width: 100%;\n}\n#{cssid}:after {\n\tcontent: \"\";\n display: block;\n padding-top: 61.7%;\n}\n#{cssid} .map_wrap {\n\twidth: 200%;\n\theight: 200%;\n\tmargin-left: -63%;\n\tmargin-top: -4%;\n \tposition: absolute;\n \tleft: 0;\n \ttop: 0;\n \tbottom: 0;\n \tright: 0;\n}\n#{cssid} circle {\n\tcursor: pointer;\n}","template_js":"jQuery(\".splitted_map_value\").html(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} {
 	overflow: hidden;
    position: relative;
    width: 100%;
}
#{cssid}:after {
	content: "";
    display: block;
    padding-top: 61.7%;
}
#{cssid} .map_wrap {
	width: 200%;
	height: 200%;
	margin-left: -63%;
	margin-top: -4%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	bottom: 0;
  	right: 0;
}
#{cssid} circle {
	cursor: pointer;
}

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

jQuery(".splitted_map_value").html(click_value);

Map of Canarian islands:

×Close

Download map

• Import data
• Help & Instructions

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

{"name":"Canary Islands","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\":\"ES\",\"marker_opacity\":1,\"marker_size\":\"10\",\"resolution\":\"provinces\",\"tooltip_enable\":\"false\",\"tooltip_color\":\"#000000\",\"tooltip_font_family\":\"<global-font-name>\",\"tooltip_font_size\":\"<global-font-size>\",\"tooltip_trigger\":\"focus\",\"tooltip_html\":\"true\",\"width\":\"auto\"}","js_table":"[{\"location\":\"Maspalomas\",\"latitude\":\"27.7605619\",\"longitude\":\"-15.5860172\",\"color\":\"#aabb00\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<strong>Canary Islands (Maspalomas)<\\\/strong>\\n<p>This is a tooltip<\\\/p>\",\"click_action_value\":\"You clicked on <strong>Maspalomas<\\\/strong>!\"}]","display_mode":"marker_by_coordinates","template_id":-2,"template_html":"<div id=\"{cssid}\">\n <div class=\"map_wrap\">\n %%map%% \n <\/div>\n<\/div>","template_css":"#{cssid} {\n \toverflow: hidden;\n position: relative;\n width: 100%;\n}\n#{cssid}:after {\n\tcontent: \"\";\n display: block;\n padding-top: 61.7%;\n}\n#{cssid} .map_wrap {\n\twidth: 500%;\n\theight: 200%;\n\tmargin-left: -72%;\n\tmargin-top: -254%;\n \tposition: absolute;\n \tleft: 0;\n \ttop: 0;\n \tbottom: 0;\n \tright: 0;\n}\n#{cssid} circle {\n\tcursor: pointer;\n}","template_js":"jQuery(\".splitted_map_value\").html(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} {
 	overflow: hidden;
    position: relative;
    width: 100%;
}
#{cssid}:after {
	content: "";
    display: block;
    padding-top: 61.7%;
}
#{cssid} .map_wrap {
	width: 500%;
	height: 200%;
	margin-left: -72%;
	margin-top: -254%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	bottom: 0;
  	right: 0;
}
#{cssid} circle {
	cursor: pointer;
}

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

jQuery(".splitted_map_value").html(click_value);