|
|
|
Please click on one of the markers
|
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:
Copy the following text and click on "Import" in the plugin.
Map settings
Name |
Value |
Description |
Region |
Spain |
List with all available regions |
Width |
auto |
Width of the map in pixel. 'Auto' means that the map is centered in the available width. |
Height |
auto |
Height of the map in pixel. 'Auto' means that the map is centered in the available height. |
Display mode |
Markers |
Specifies the display mode of the map. |
Border resolution |
Provinces |
The resolution of the map borders. |
Tooltips |
Off |
Allows to display a tooltip for highlighted map elements. |
Tooltips: Trigger |
none |
The user interaction that causes the tooltip to be displayed. |
Tooltips: Use HTML |
On |
Specifies if the tooltips should use HTML. This allows to customize the tooltips even more. For example, if this property is on, it is possible to display images wihtin the tooltip. |
Map template
CSS |
#{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;
} |
HTML |
<div id="{cssid}">
<div class="map_wrap">
%%map%%
</div>
</div> |
JavaScript
Executed when a marker/region is clicked.
Click value can be defined for each map element.
|
jQuery(".splitted_map_value").html(click_value); |
Map elements (2)
Color |
Name |
Click Value |
|
Barcelona |
You clicked on Barcelona. |
|
Madrid |
You clicked on Madrid. |
Map of Canarian islands:
Copy the following text and click on "Import" in the plugin.
Map settings
Name |
Value |
Description |
Region |
Spain |
List with all available regions |
Width |
auto |
Width of the map in pixel. 'Auto' means that the map is centered in the available width. |
Height |
auto |
Height of the map in pixel. 'Auto' means that the map is centered in the available height. |
Display mode |
Markers |
Specifies the display mode of the map. |
Border resolution |
Provinces |
The resolution of the map borders. |
Tooltips |
Off |
Allows to display a tooltip for highlighted map elements. |
Tooltips: Trigger |
none |
The user interaction that causes the tooltip to be displayed. |
Tooltips: Use HTML |
On |
Specifies if the tooltips should use HTML. This allows to customize the tooltips even more. For example, if this property is on, it is possible to display images wihtin the tooltip. |
Map template
CSS |
#{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;
} |
HTML |
<div id="{cssid}">
<div class="map_wrap">
%%map%%
</div>
</div> |
JavaScript
Executed when a marker/region is clicked.
Click value can be defined for each map element.
|
jQuery(".splitted_map_value").html(click_value); |
Map elements (1)
Color |
Name |
Click Value |
|
Maspalomas |
You clicked on Maspalomas! |
Comments
If you need help or have questions, please leave a comment.