function i_world_map_build_form($type, $id, $alert)
{
$options = get_option('i-world-map-settings');
global $apiver;
$projection = array_key_exists('map_projection', $options) ? $options['map_projection'] : "mercator";
if ($type == 'post-map') {
$message = "Fill out the form and follow the instructions to create your Interactive Map";
$formname = "addimap";
settings_fields('i-world-map-plugin-settings');
$title = " Add New Interactive Map";
$name = "";
$description = "";
$use_defaults = 1;
$border_color = $options['default_border_color'];
$border_stroke = $options['default_border_stroke'];
$bg_color = $options['default_bg_color'];
$ina_color = $options['default_ina_color'];
$act_color = $options['default_act_color'];
$marker_size = $options['default_marker_size'];
$width = $options['default_width'];
$height = $options['default_height'];
$aspect_ratio = $options['default_aspect_ratio'];
$interactive = $options['default_interactive'];
$tooltipt = $options['default_showtooltip'];
$region = $options['default_region'];
$display_mode = $options['default_display_mode'];
$places = "";
$customcss = "";
$map_action = 'none';
$custom_action = '';
$submit_action = "addmap";
$submit_bt_value = "CREATE MAP";
}
if ($type == 'edit-map') {
global $wpdb;
global $table_name_imap;
$mapdata = $wpdb->get_row("SELECT * FROM {$table_name_imap} WHERE id = {$id}", ARRAY_A);
$title = "Edit Map";
$message = "To add this map to your website, just use the shortcode <span id='shc'>[show-map id='" . $id . "']</span> on your posts, pages or widgets, or add <span id='shc'><?php build_i_world_map(" . $id . "); ?></span> to your template.";
if (defined('WPB_VC_VERSION')) {
$message .= "<p> You can also use the <img src='" . plugins_url('interactive-world-maps/imgs/visual_composer.png') . "'> VISUAL COMPOSER to add this map to your page, by choosing the option 'Add Element > Interactive Map'.</p>";
}
$formname = "addimap";
$name = $mapdata['name'];
$description = $mapdata['description'];
$use_defaults = $mapdata['use_defaults'];
$border_color = $mapdata['border_color'];
$border_stroke = $mapdata['border_stroke'];
$bg_color = $mapdata['bg_color'];
$ina_color = $mapdata['ina_color'];
$act_color = $mapdata['act_color'];
$marker_size = $mapdata['marker_size'];
$width = $mapdata['width'];
$height = $mapdata['height'];
$aspect_ratio = $mapdata['aspect_ratio'];
$interactive = $mapdata['interactive'];
$tooltipt = $mapdata['showtooltip'];
$region = $mapdata['region'];
$display_mode = $mapdata['display_mode'];
$places = $mapdata['places'];
$customcss = $mapdata['custom_css'];
$map_action = $mapdata['map_action'];
$custom_action = $mapdata['custom_action'];
$submit_action = "editmap";
$submit_bt_value = "UPDATE MAP";
}
?>
<div id="iwm-visit"><i class="fa fa-info-circle"></i> Visit the <a href="http://cmoreira.net/interactive-world-maps-demo/" target="_blank">Plugin Demo Site</a> for more information and tips on how to use it.</div>
<div class="wrap">
<div id="interactive-world-maps" class="icon32"></div>
<h2><?php
echo $title;
?>
</h2>
<?php
if ($alert != "") {
?>
<div id="message" class="updated"><?php
echo $alert;
?>
</div>
<?php
}
?>
<div id="iwm-message-intro"><?php
echo $message;
?>
</div>
<form method="post" action="" id="<?php
echo $formname;
?>
" name="<?php
echo $formname;
?>
">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="25%" style="min-width:180px;" valign="top"><h3>Details
</h3>
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="stuffbox" id="name-table">
<tr valign="top">
<td>Name <br><input type="text" name="name" value="<?php
echo $name;
?>
" /></td>
</tr>
<tr valign="top">
<td>Description<br>
<textarea name="description" cols="20" rows="3"><?php
echo $description;
?>
</textarea></td>
</tr>
</table>
<h3>Visual Settings </h3>
<table width="100%" border="0" cellpadding="2" cellspacing="2" class="stuffbox" id="add-table">
<tr valign="top">
<td colspan="2"><input name="use_defaults" id="use_defaults" type="radio" value="1" <?php
if ($use_defaults == 1) {
?>
checked="checked"<?php
}
?>
onclick="hidecustomsettings();" />
Default
<input name="use_defaults" id="use_defaults" type="radio" value="0" <?php
if ($use_defaults == 0) {
?>
checked="checked"<?php
}
?>
onclick="showcustomsettings();"/>
Custom</td>
</tr></table>
<div id="default-settings-table-add" class="stuffbox" style="display:none;">
<table>
<td>Background Color <br> <input type="text" name="bg_color" class="color {hash:true, adjust:false}" value="<?php
echo $bg_color;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr>
<td class="iwmsmall"><i class="fa fa-info-circle"></i> <?php
echo __('Tip: In color fields you can also use the word "transparent" instead of a color code.');
?>
</td>
</tr>
<tr valign="top">
<td>Border Color<br><input type="text" name="border_color" class="color {hash:true, adjust:false}" value="<?php
echo $border_color;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td>Border Width (px)<br><input type="text" name="border_stroke" value="<?php
echo $border_stroke;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td>Inactive Region Color<br><input type="text" name="ina_color" class="color {hash:true, adjust:false}" value="<?php
echo $ina_color;
?>
"onchange="drawVisualization();" /><input type="hidden" name="act_color" class="color {hash:true, adjust:false}" value="<?php
echo $act_color;
?>
"onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<td>Marker Size<br><input type="text" name="marker_size" value="<?php
echo $marker_size;
?>
"onchange="drawVisualization();" /></td>
</tr>
<?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
<tr valign="top" >
<td><span class="howto">The settings bellow will be ignored, since the Responsive Mode is ON.</span>
<input type="hidden" name="responsivemode" value="on">
</td>
</tr>
<?php
} else {
?>
<input type="hidden" name="responsivemode" value="off">
<?php
}
?>
<input type="hidden" name="mapprojection" value="<?php
echo $projection;
?>
">
<tr valign="top" >
<td>Width (px)<br><input type="text" name="width" value="<?php
echo $width;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<td>Height (px)<br><input type="text" name="height" value="<?php
echo $height;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<td><input name="aspect_ratio" id="aspratio" type="checkbox" value="1" <?php
if ($aspect_ratio == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" /> Keep Aspect Ratio</td>
</tr>
</table>
</div>
<p class="submit">
<input type="submit" class="button-primary" value="<?php
echo $submit_bt_value;
?>
" />
</p>
</td>
<td width="75%" valign="top"><h3>Map Settings</h3>
<table width="100%" border="0" cellspacing="5" cellpadding="5" class="stuffbox" id="add-table">
<tr valign="top" >
<td><strong>Region to Display</strong>
<span class="howto">Choose the region you want the map to focus on</span>
</td>
<td><strong>Display Mode</strong>
<span class="howto">Choose what type of interactive elements you will apply</span>
</td>
<td><strong>Active Region Action </strong>
<span class="howto">What to do when user clicks active region/marker</span>
</td>
</tr>
<tr valign="top" >
<td>
<?php
i_world_map_build_region_select_options('region', $region, 'isolinkcheck()');
?>
<br />
</td>
<td>
<select name="display_mode" onchange="isolinkcheck();">
<option value="regions" <?php
if ($display_mode == 'regions') {
?>
selected="selected" <?php
}
?>
>Regions</option>
<option value="markers" <?php
if ($display_mode == 'markers') {
?>
selected="selected" <?php
}
?>
>Round Markers (Text Code)</option>
<option value="markers02" <?php
if ($display_mode == 'markers02') {
?>
selected="selected" <?php
}
?>
>Round Markers (Coordinates)</option>
<option value="text" <?php
if ($display_mode == 'text') {
?>
selected="selected" <?php
}
?>
>Text Labels</option>
<option value="text02" <?php
if ($display_mode == 'text02') {
?>
selected="selected" <?php
}
?>
>Text Labels (Coordinates)</option>
</select></td>
<td>
<?php
i_world_map_build_actions_select_options('map_action', $map_action, 'isolinkcheck()');
?>
</td>
</tr>
<tr> <td colspan="3"><input name="interactive" type="checkbox" id="interactive" onchange="drawVisualization();" value="1" <?php
if ($interactive == 1) {
?>
checked <?php
}
?>
/> Enable Region Hover effect
<br />
Tooltip <select name="tooltipt" id="tooltipt" onchange="drawVisualization();">
<option value="1" <?php
if ($tooltipt == 1) {
?>
selected="selected" <?php
}
?>
>Display on Hover</option>
<option value="2" <?php
if ($tooltipt == 2) {
?>
selected="selected" <?php
}
?>
>Display on Click</option>
<option value="0" <?php
if ($tooltipt == 0) {
?>
selected="selected" <?php
}
?>
>None</option>
</select><span class="iwmsmall"> (In Regions Mode 'Region Hover Effect' must be enabled for tooltip to work)</span>
<?php
if (!isset($options['default_usehtml'])) {
?>
<br />
<span class="iwmsmall"> If you plan to use HTML code in your tooltips, you should enable the HTML Tooltips in the settings</span>
<?php
}
?>
</td> </tr>
</table>
<span id="iso-code-msg"></span>
<div class="stuffbox" id="custom-action">
<table>
<tr><td><strong>Insert Custom Javascript Action Here</strong><br />
<textarea name="custom_action" cols="50" rows="4"><?php
echo stripcslashes($custom_action);
?>
</textarea></td><td><span class="iwmsmall">You can use Javascript and the array ivalue_<?php
if (isset($_GET['map'])) {
echo $_GET['map'];
} else {
echo "ID";
}
?>
[selectedRegion] where variable selectedRegion is the code of the region clicked, and ivalue[selectedRegion] corresponds to the value inserted in the "Action Value" field. Example: alert(ivalue_<?php
if (isset($_GET['map'])) {
echo $_GET['map'];
} else {
echo "ID";
}
?>
[selectedRegion]); // will display a custom alert message.</span></td></tr></table></div>
<div id="latlondiv">
<table width="100%" border="0" cellspacing="5" cellpadding="5" class="latlon">
<tr>
<td><strong>Use the form below to help you get the coordinates values</strong><br /><i class="fa fa-globe"></i> Convert Address into Lat/Lon:
<label for="mapsearch">
<input type="text" name="mapsearch" id="mapsearch">
<input type="button" class="button-secondary" name="convert" id="convert" value="Convert" onClick="getAddress()">
</label> <span id="latlonvalues"></span></td>
</tr>
</table>
</div>
<h3>Interactive Regions </h3><br />
<a class="activeb" id="shsimple" onclick="showsimple()" >Simple</a> <a class="inactiveb" id="shadvanced" onclick="showadvanced()" >Advanced</a>
<div id="simple-table">
<table width="100%" class="stuffbox" id="add-table">
<tr valign="top">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Region Code: </td>
<td> Title: </td>
<td>Tooltip: </td>
<td>Action Value: </td>
<td> Color: </td>
<td valign="baseline"></p></td>
</tr>
<tr>
<td valign="top"><input name="cd" type="text" id="cd" size="15" /><br />
<span class="iwmsmall">Follow the suggestions <br />above.<br />
MANDATORY
</span></td>
<td valign="top"><input name="c" type="text" id="c" size="15" /><br />
<span class="iwmsmall">It will be the first line <br />of the tooltip.</span></td>
<td valign="top"><input name="t" type="text" id="t" size="20" /><br />
<span class="iwmsmall">It will be the second line <br />of the tooltip.</span></td>
<td valign="top"><input name="u" type="text" id="u" size="20" />
<br />
<span class="iwmsmall">Paramater for the action. <br />
Ex. Url for Open Url Action. <br />
Simple HTML can
be used.<br />
</span></td>
<td valign="top"><input name="cl" type="text" id="cl" size="15" class="color {hash:true, adjust:false}" value="<?php
echo $act_color;
?>
" /></td>
<td valign="top"><input type="button" class="button-secondary" value="Add" onclick="addPlaceToTable();" /></td>
</tr>
</table>
<div id="htmlplacetable"></div>
</td>
</tr>
<input name="action" type="hidden" value="<?php
echo $submit_action;
?>
" />
<?php
if ($type == 'edit-map') {
?>
<input name="id" type="hidden" value="<?php
echo $id;
?>
" />
<?php
}
?>
</table>
</div>
<div id="advanced-table">
<table width="100%" border="0" cellspacing="5" cellpadding="5" id="add-table-advanced">
<tr>
<td><strong>Advanced Data Editor</strong><br />
<span class="iwmsmall"> Here you can add or edit the CSV (comma-separated values) data that will be parsed to build the map. <br />
It should follow this format:<br />
Region Code, Tooltip Title, Tooltip Text, Action Value, HTML Color Value;<br />
It should not use quotes. Example:<br />
US, USA, Click to visit the White House Website, http://www.whitehouse.gov/,#6699CC;<br />
PT, Portugal, Click to visit Portugal's Government Website, http://www.portugal.gov.pt/,#660000;</span> </td>
</tr>
<tr>
<td><textarea name="places" id="places" onchange="dataToTable();"><?php
echo htmlspecialchars($places);
?>
</textarea><br />
<input type="button" class="button-secondary" value="Preview" onclick="dataToTable();" /></td>
</tr>
</table>
</div>
<h3>Preview </h3>
<span class="iwmsmall"> <i class="fa fa-file-code-o"></i> The 'Active Region Action' will not work on this preview.
When an active region is clicked an alert message with the value inserted will display for debugging, or no alert, if no value exists. </span>
<?php
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
?>
<br>
<span class="iwmsmall"><i class="fa fa-comment"></i> The HTML tooltip might look different on your site since it can inherit CSS rules from your theme. <br> You can create your own CSS rules to target the tooltip using the class '.google-visualization-tooltip'</span>
<?php
}
?>
</div>
<?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
<div id="iwm-wrap-preview" >
<div id="visualization-wrap-responsive" >
<div id="visualization"></div>
</div>
</div>
<?php
} else {
?>
<div id="iwm-wrap-preview" class="stuffbox" >
<div id="visualization"></div>
</div>
<?php
}
?>
<div>
<?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
//Code to break down custom css json
$cssarray = json_decode(stripslashes($customcss), true);
?>
<h3> Custom CSS Generator (Beta) </h3>
<span class="iwmsmall"><strong>The options below are not supported by the Google Geochart API (which the plugin uses to generate the maps), so using these CSS techniques is an alternative unsuported solution that might not work as expected and has limitations. Use at your own risk.</strong> These customizations will not reflect on the image preview of the map. </span>
<div id="iwmexpandcss"><a onclick="expandcustomcss()"><i class="fa fa-chevron-circle-right fa-lg"></i></i> Expand Custom CSS Options Box</a></div>
<div class="stuffbox" id="iwm-custom-css">
<div>
<h4><i class="fa fa-square"></i> Change Crop / Zoom Effect </h4>
<div id="iwm-control-box" class="stuffbox">
Zoom <a onclick="iwmcsscontrol('widthplus')"><i class="fa fa-search-plus fa-2x"></i></a>
<a onclick="iwmcsscontrol('widthminus')"><i class="fa fa-search-minus fa-2x"></i></a>
Move <a onclick="iwmcsscontrol('down')"><i class="fa fa-arrow-circle-down fa-2x"></i></a>
<a onclick="iwmcsscontrol('up')"><i class="fa fa-arrow-circle-up fa-2x"></i></a>
<a onclick="iwmcsscontrol('left')"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
<a onclick="iwmcsscontrol('right')"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
Height <a onclick="iwmcsscontrol('verticalplus')"><i class="fa fa-long-arrow-down fa-2x"></i></a>
<a onclick="iwmcsscontrol('verticalminus')"><i class="fa fa-long-arrow-up fa-2x"></i></a>
Reset Values <a onClick="clearCropValues()"><i class="fa fa-times-circle fa-2x"></i></a>
</div>
<span class="iwmsmall"><strong>The controls above will influence these values</strong>. Changing the following values will allow you change the crop of the map or create a zoom effect by hidding uncessary parts of the map with the overflow:hidden; rule. One of the biggest limitations of this hack is that it will also hide tooltips, if they display on the overflow area.</span>
<br> <br>
<table>
<tr>
<td class="iwm_stronger">Width/Height overflow: </td>
<td><input type="number" name="iwm_size" size="10" value="<?php
if (isset($cssarray['iwm_size'])) {
echo $cssarray['iwm_size'];
}
?>
" onchange="redrawcrop()"> % </td>
<td><span class="iwmsmall">100% is the default. Exciding size will be hidden, so bigger values will allow you do concentrate on different parts of the map.</span></td>
</tr><tr>
<td class="iwm_stronger">Viewport Height: </td>
<td><input type="number" step="any" name="iwm_hsize" size="10" value="<?php
echo $cssarray['iwm_hsize'];
?>
" onchange="redrawcrop()"> %</td>
<td><span class="iwmsmall">Default is 61.7 (~ 5:3 aspect ratio). This field will manipulate the aspect ratio of the map viewport.</span></td>
</tr><tr>
<td class="iwm_stronger">Left Margin</td>
<td><input type="number" name="iwm_left" size="10" value="<?php
echo $cssarray['iwm_left'];
?>
" onchange="redrawcrop()"> % </td>
<td><span class="iwmsmall">These values will move the map horizontaly. Use negative values to move the map left and positive to move the map to the right.</span></td>
</tr><tr>
<td class="iwm_stronger">Top Margin: </td>
<td><input type="number" name="iwm_top" size="10" value="<?php
echo $cssarray['iwm_top'];
?>
" onchange="redrawcrop()"> % </td>
<td><span class="iwmsmall">These values will move the map verticaly. Use negative values to move the map up and positive to move the map down.</span></td>
</tr>
</table>
</div>
<div>
<h4><i class="fa fa-square"></i> Hover Options for Active Elements</h4>
<span class="iwmsmall"> These options will create css that target the map shapes that do not have the inactive regions colour. The biggest limitation of this hovering hack, is that it will only apply the hover effect to map shapes, it is not capable of recognizing the full region shapes. For example, when hovering a group of islands, only the hovered island will change colour.</span>
<br> <br>
<table>
<tr>
<td class="iwm_stronger">Hover Colour: </td>
<td><input name="hovercolor" type="text" id="hovercolor" size="15" class="color {hash:true, adjust:false}" value="<?php
echo $cssarray['hovercolor'];
?>
" onchange="redrawcrop()" /></td>
<td><span class="iwmsmall">The active hovered map shapes will change to this colour.</span></td>
</tr><tr>
<td class="iwm_stronger">Display Hand Cursor:</td>
<td><input name="showcursor" id="showcursor" type="checkbox" value="1" onchange="redrawcrop()" <?php
if ($cssarray['showcursor'] == '1') {
echo "checked";
}
?>
/></td>
<td><span class="iwmsmall">Active elements, like active regions, markers or text labels, will display the hand cursor.</span></td>
</tr>
</table>
<h4><i class="fa fa-square"></i> Region Border Options </h4>
<span class="iwmsmall"> These options will target the SVG path shapes and change their fill and stroke values.</span>
<br> <br>
<table>
<tr>
<td class="iwm_stronger">Borders Colour: </td>
<td><input name="bcolor" type="text" id="bcolor" size="15" class="color {hash:true, adjust:false}" value="<?php
echo $cssarray['bcolor'];
?>
" onchange="redrawcrop()" /></td>
<td><span class="iwmsmall">Country or region borders colour.</span></td>
</tr><tr>
<td class="iwm_stronger">Stroke Width (all): </td>
<td><input type="number" step="1" name="bwidth" size="10" value="<?php
echo $cssarray['bwidth'];
?>
" onchange="redrawcrop()"></td>
<td><span class="iwmsmall">Default is 1 for normal stage and 2 when hovering. Changing this will affect both stages of the shape.</span></td>
</tr>
<tr>
<td class="iwm_stronger">Stroke Width (Inactive Only): </td>
<td><input type="number" step="1" name="biwidth" size="10" value="<?php
echo $cssarray['biwidth'];
?>
" onchange="redrawcrop()"></td>
<td><span class="iwmsmall">With this option we target only the inactive regions borders.</span></td>
</tr>
</table>
<h4><i class="fa fa-square"></i> Background Options </h4>
<span class="iwmsmall"> You can also use an image as a background to your map. This will make the background colour transparent and add the image as the background of the map's container.</span>
<br> <br>
<table style="padding-bottom:20px;">
<tr>
<td class="iwm_stronger">Background Image: </td>
<td><input type="text" name="bgimage" id="bgimage" value="<?php
echo $cssarray['bgimage'];
?>
" size="10" onchange="redrawcrop()"></td>
<td><span class="iwmsmall">Please include full URL to the image you want to use.</span></td>
</tr><tr>
<td class="iwm_stronger">Background Repeat: </td>
<td><input name="bgrepeat" id="bgrepeat" type="checkbox" value="1" onchange="redrawcrop()" <?php
if ($cssarray['bgrepeat'] == '1') {
echo "checked";
}
?>
/></td>
<td><span class="iwmsmall">If active, image will repeat. If disabled image will strech to 100% so it's also responsive.</span></td>
</tr>
</table>
<h4><i class="fa fa-square"></i> Tooltip Options </h4>
<?php
if (!isset($options['default_usehtml'])) {
?>
<i class="fa fa-exclamation-triangle" style="color:red;"></i> <span class="iwmsmall">These settings will not take effect since HTML tooltips are disabled in the settings.</span>
<?php
} else {
?>
<span class="iwmsmall">You can create more rules creating custom css for the class .google-visualization-tooltip</span>
<?php
}
?>
<br> <br>
<table style="padding-bottom:20px;">
<tr>
<td class="iwm_stronger">Font-Family: </td>
<td><input type="text" name="tooltipfontfamily" id="tooltipfontfamily" value="<?php
echo $cssarray['tooltipfontfamily'];
?>
" size="10" onchange="redrawcrop()"></td>
<td><span class="iwmsmall">Specify the font for the tooltip</span></td>
</tr><tr>
<td class="iwm_stronger">Font-size: </td>
<td><input name="tooltipfontsize" id="tooltipfontsize" type="text" value="<?php
echo $cssarray['tooltipfontsize'];
?>
" onchange="redrawcrop()" /></td>
<td><span class="iwmsmall">You should use the unit value also, like 12px or 1em.</span></td>
</tr><tr>
<td class="iwm_stronger">Background Colour: </td>
<td><input name="tooltipbg" id="tooltipbg" type="text" onchange="redrawcrop()" value="<?php
echo $cssarray['tooltipbg'];
?>
" class="color {hash:true, adjust:false}" /></td>
<td><span class="iwmsmall"></span></td>
</tr>
<tr>
<td class="iwm_stronger">Width: </td>
<td><input name="tooltipminwidth" id="tooltipminwidth" value="<?php
echo $cssarray['tooltipminwidth'];
?>
" type="text" onchange="redrawcrop()" /></td>
<td><span class="iwmsmall">Set a minimum width for the tooltip. You should also use the unit value also, like 12px or 1em.</span></td>
</tr><tr>
<td class="iwm_stronger">Border Colour: </td>
<td><input name="tooltipbordercolor" id="tooltipbordercolor" type="text" onchange="redrawcrop()" value="<?php
echo $cssarray['tooltipbordercolor'];
?>
" class="color {hash:true, adjust:false}" /></td>
<td><span class="iwmsmall"></span></td>
</tr>
<tr>
<td class="iwm_stronger">Border Width: </td>
<td><input name="tooltipborderwidth" id="tooltipborderwidth" value="<?php
echo $cssarray['tooltipborderwidth'];
?>
" type="text" onchange="redrawcrop()" /></td>
<td><span class="iwmsmall">Set a minimum width for the tooltip. You should also use the unit value also, like 12px or 1em.</span></td>
</tr><tr>
<td class="iwm_stronger">Hide Title:</td>
<td><input name="tooltiphidetitle" id="tooltiphidetitle" type="checkbox" value="1" onchange="redrawcrop()" <?php
if ($cssarray['tooltiphidetitle'] == '1') {
echo "checked";
}
?>
/></td>
<td><span class="iwmsmall">When active, first line of the tooltip (the title field) will not display.</span></td>
</tr>
</table>
<h4><i class="fa fa-square"></i> FontIcon Usage </h4>
<span class="iwmsmall">The Geochart API doesn't allow us to use custom markers. However we can use the text labels mode and use fonticons. The plugin includes 'FontAwesome' and <a target="_blank" href="http://cmoreira.net/interactive-world-maps-demo/use-font-icon-as-marker/">you can read more about this technique here.</a></span>
<br> <br>
<table style="padding-bottom:20px;">
<tr>
<td class="iwm_stronger">Include FontAwesome:</td>
<td><input name="fontawesomeinclude" id="fontawesomeinclude" type="checkbox" value="1" onchange="redrawcrop()" <?php
if (isset($cssarray['fontawesomeinclude']) && $cssarray['fontawesomeinclude'] == '1') {
echo "checked";
}
?>
/></td>
<td><span class="iwmsmall">If active fontAwesome file will be included with the map. If your page already has fontAwesome included, you don't need to include it here.</span></td>
</tr>
<tr>
<td class="iwm_stronger">Apply FontAwesome:</td>
<td><input name="fontawesomeapply" id="fontawesomeapply" type="checkbox" value="1" onchange="redrawcrop()" <?php
if (isset($cssarray['fontawesomeapply']) && $cssarray['fontawesomeapply'] == '1') {
echo "checked";
}
?>
/></td>
<td><span class="iwmsmall">When active Text Labels can use FontAwesome icons (<a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">cheatsheet</a>)</span></td>
</tr>
</table>
<input type="button" class="button-secondary" name="iwm-custom-clear" id="iwm-custom-clear" value="Clear Values" onClick="clearCssValues()">
<input type="submit" class="button-primary" value="<?php
echo $submit_bt_value;
?>
" />
</div>
</div>
<?php
}
?>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<input type="hidden" name="mapimage" id="mapimage" value="">
<input type="hidden" name="customcss" id="customcss" value="<?php
echo $customcss;
?>
">
</form>
</div>
<?php
$apiv = "1";
$usehtml = "0";
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
$apiv = $apiver;
$usehtml = "1";
}
?>
<script type='text/javascript'>
/* <![CDATA[ */
var iwmparam = [{"apiversion":"<?php
echo $apiv;
?>
","usehtml":"<?php
echo $usehtml;
?>
"}];
/* ]]> */
</script>
<?php
}
function i_world_map_build_form($type, $id, $alert)
{
$options = get_option('i-world-map-settings');
global $apiver;
if ($type == 'post-map') {
$message = "Fill out the form and follow the instructions to create your Interactive Map";
$formname = "addimap";
settings_fields('i-world-map-plugin-settings');
$title = " Add New Interactive Map";
$name = "";
$description = "";
$use_defaults = 1;
$border_color = $options['default_border_color'];
$border_stroke = $options['default_border_stroke'];
$bg_color = $options['default_bg_color'];
$ina_color = $options['default_ina_color'];
$act_color = $options['default_act_color'];
$marker_size = $options['default_marker_size'];
$width = $options['default_width'];
$height = $options['default_height'];
$aspect_ratio = $options['default_aspect_ratio'];
$interactive = $options['default_interactive'];
$tooltipt = $options['default_showtooltip'];
$region = $options['default_region'];
$display_mode = $options['default_display_mode'];
$places = "";
$map_action = 'none';
$custom_action = '';
$submit_action = "addmap";
$submit_bt_value = "CREATE MAP";
}
if ($type == 'edit-map') {
global $wpdb;
global $table_name_imap;
$mapdata = $wpdb->get_row("SELECT * FROM {$table_name_imap} WHERE id = {$id}", ARRAY_A);
$title = "Edit Map";
$message = "To add this map to your website, just use the shortcode <span id='shc'>[show-map id='" . $id . "']</span> on your posts, pages or widgets, or add <span id='shc'><?php build_i_world_map(" . $id . "); ?></span> to your template.";
$formname = "addimap";
$name = $mapdata['name'];
$description = $mapdata['description'];
$use_defaults = $mapdata['use_defaults'];
$border_color = $mapdata['border_color'];
$border_stroke = $mapdata['border_stroke'];
$bg_color = $mapdata['bg_color'];
$ina_color = $mapdata['ina_color'];
$act_color = $mapdata['act_color'];
$marker_size = $mapdata['marker_size'];
$width = $mapdata['width'];
$height = $mapdata['height'];
$aspect_ratio = $mapdata['aspect_ratio'];
$interactive = $mapdata['interactive'];
$tooltipt = $mapdata['showtooltip'];
$region = $mapdata['region'];
$display_mode = $mapdata['display_mode'];
$places = $mapdata['places'];
$map_action = $mapdata['map_action'];
$custom_action = $mapdata['custom_action'];
$submit_action = "editmap";
$submit_bt_value = "UPDATE MAP";
}
?>
<div class="wrap">
<div id="interactive-world-maps" class="icon32"></div>
<h2><?php
echo $title;
?>
</h2>
<?php
if ($alert != "") {
?>
<div id="message" class="updated"><?php
echo $alert;
?>
</div>
<?php
}
?>
<div id="iwm-message-intro"><?php
echo $message;
?>
</div>
<form method="post" action="" id="<?php
echo $formname;
?>
" name="<?php
echo $formname;
?>
">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="25%" valign="top"><h3>Details
</h3>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="add-table">
<tr valign="top">
<th align="left" scope="row">Name</th>
<td><input type="text" name="name" value="<?php
echo $name;
?>
" /></td>
</tr>
<tr valign="top">
<th align="left" scope="row">Description</th>
<td><textarea name="description" cols="20" rows="3"><?php
echo $description;
?>
</textarea></td>
</tr>
</table>
<h3>Visual Settings </h3>
<table width="100%" border="0" cellpadding="2" cellspacing="2" id="add-table">
<tr valign="top">
<th align="left">Visual Settings</th>
<td><input name="use_defaults" id="use_defaults" type="radio" value="1" <?php
if ($use_defaults == 1) {
?>
checked="checked"<?php
}
?>
onclick="hidecustomsettings();" />
Default
<input name="use_defaults" id="use_defaults" type="radio" value="0" <?php
if ($use_defaults == 0) {
?>
checked="checked"<?php
}
?>
onclick="showcustomsettings();"/>
Custom</td>
</tr></table>
<div id="default-settings-table-add" style="display:none;">
<table>
<th >Background Color</th>
<td><input type="text" name="bg_color" class="color {hash:true, adjust:false}" value="<?php
echo $bg_color;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<th scope="row">Border Color</th>
<td><input type="text" name="border_color" class="color {hash:true, adjust:false}" value="<?php
echo $border_color;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<th scope="row">Border Width (px)</th>
<td><input type="text" name="border_stroke" value="<?php
echo $border_stroke;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<th scope="row">Inactive Region Color</th>
<td><input type="text" name="ina_color" class="color {hash:true, adjust:false}" value="<?php
echo $ina_color;
?>
"onchange="drawVisualization();" /><input type="hidden" name="act_color" class="color {hash:true, adjust:false}" value="<?php
echo $act_color;
?>
"onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<th scope="row">Marker Size</th>
<td><input type="text" name="marker_size" value="<?php
echo $marker_size;
?>
"onchange="drawVisualization();" /></td>
</tr>
<?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
<tr valign="top" >
<td colspan="2"><span class="howto">The width and height settings will be ignored, since the Responsive Mode is ON</span></td>
</tr>
<?php
}
?>
<tr valign="top" >
<th scope="row">Width (px)</th>
<td><input type="text" name="width" value="<?php
echo $width;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<th scope="row">Height (px)</th>
<td><input type="text" name="height" value="<?php
echo $height;
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top" >
<th scope="row">Keep Aspect Ratio</th>
<td><input name="aspect_ratio" id="aspratio" type="checkbox" value="1" <?php
if ($aspect_ratio == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" /></td>
</tr>
</table>
</div>
<p class="submit">
<input type="submit" class="button-primary" value="<?php
echo $submit_bt_value;
?>
" />
</p>
</td>
<td width="75%" valign="top"><h3>Map Settings</h3>
<table width="100%" border="0" cellspacing="5" cellpadding="5" id="add-table">
<tr valign="top" >
<td><strong>Region to Display</strong></td>
<td><strong>Display Mode</strong></td>
<td class="totalp" ><strong>Interactivity<br />
</strong></td>
<td scope="row"><strong>Active Region Action </strong></td>
</tr>
<tr valign="top" >
<td>
<?php
i_world_map_build_region_select_options('region', $region, 'isolinkcheck()');
?>
<br />
</td>
<td width="33%">
<select name="display_mode" onchange="isolinkcheck();">
<option value="regions" <?php
if ($display_mode == 'regions') {
?>
selected="selected" <?php
}
?>
>Regions</option>
<option value="markers" <?php
if ($display_mode == 'markers') {
?>
selected="selected" <?php
}
?>
>Round Markers (Text Code)</option>
<option value="markers02" <?php
if ($display_mode == 'markers02') {
?>
selected="selected" <?php
}
?>
>Round Markers (Coordinates Code)</option>
<!-- <option value="text" <?php
if ($display_mode == 'text') {
?>
selected="selected" <?php
}
?>
>Text Marker (Beta Feature)</option> -->
</select></td>
<td nowrap="nowrap" class="totalp" >Enable
<input name="interactive" type="checkbox" id="interactive" onchange="drawVisualization();" value="1" <?php
if ($interactive == 1) {
?>
checked <?php
}
?>
/>
<br />
Show Tooltip
<input name="tooltipt" type="checkbox" id="tooltipt" onchange="drawVisualization();" value="1" <?php
if ($tooltipt == 1) {
?>
checked <?php
}
?>
/></td>
<td scope="row">
<?php
i_world_map_build_actions_select_options('map_action', $map_action, 'isolinkcheck()');
?>
<span class="howto">What to do when user clicks active region/marker</span>
</td>
</tr>
</table>
<span id="iso-code-msg"></span>
<div id="custom-action">
<table>
<tr><td><strong>Insert Custom Javascript Action Here</strong><br />
<textarea name="custom_action" cols="50" rows="4"><?php
echo stripcslashes($custom_action);
?>
</textarea></td><td><span class="iwmsmall">You can use Javascript and the array ivalue_<?php
if (isset($_GET['map'])) {
echo $_GET['map'];
} else {
echo "ID";
}
?>
[selectedRegion] where variable selectedRegion is the code of the region clicked, and ivalue[selectedRegion] corresponds to the value inserted in the "Action Value" field. Example: alert(ivalue_<?php
if (isset($_GET['map'])) {
echo $_GET['map'];
} else {
echo "ID";
}
?>
[selectedRegion]); // will display a custom alert message.</span></td></tr></table></div>
<div id="latlondiv">
<table width="100%" border="0" cellspacing="5" cellpadding="5" class="latlon">
<tr>
<td><strong>Use the form below to help you get the coordinates values</strong><br />Convert Address into Lat/Lon:
<label for="mapsearch">
<input type="text" name="mapsearch" id="mapsearch">
<input type="button" name="convert" id="convert" value="Convert" onClick="getAddress()">
</label> <span id="latlonvalues"></span></td>
</tr>
</table>
</div>
<h3>Interactive Regions </h3><br />
<a class="activeb" id="shsimple" onclick="showsimple()" >Simple</a> <a class="inactiveb" id="shadvanced" onclick="showadvanced()" >Advanced</a>
<div id="simple-table">
<table width="100%" id="add-table">
<tr valign="top">
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Region Code: </td>
<td> Title: </td>
<td>Tooltip: </td>
<td>Action Value: </td>
<td> Color: </td>
<td valign="baseline"></p></td>
</tr>
<tr>
<td valign="top"><input name="cd" type="text" id="cd" size="15" /><br />
<span class="iwmsmall">Follow the suggestions <br />above.<br />
MANDATORY
</span></td>
<td valign="top"><input name="c" type="text" id="c" size="15" /><br />
<span class="iwmsmall">It will be the first line <br />of the tooltip.</span></td>
<td valign="top"><input name="t" type="text" id="t" size="20" /><br />
<span class="iwmsmall">It will be the second line <br />of the tooltip.</span></td>
<td valign="top"><input name="u" type="text" id="u" size="20" />
<br />
<span class="iwmsmall">Paramater for the action. <br />
Ex. Url for Open Url Action. <br />
Simple HTML can
be used.<br />
</span></td>
<td valign="top"><input name="cl" type="text" id="cl" size="15" class="color {hash:true, adjust:false}" value="<?php
echo $act_color;
?>
" /></td>
<td valign="top"><input type="button" value="Add" onclick="addPlaceToTable();" /></td>
</tr>
</table>
<div id="htmlplacetable"></div>
</td>
</tr>
<input name="action" type="hidden" value="<?php
echo $submit_action;
?>
" />
<?php
if ($type == 'edit-map') {
?>
<input name="id" type="hidden" value="<?php
echo $id;
?>
" />
<?php
}
?>
</table>
</div>
<div id="advanced-table">
<table width="100%" border="0" cellspacing="5" cellpadding="5" id="add-table-advanced">
<tr>
<td><strong>Advanced Data Editor</strong><br />
<span class="iwmsmall"> Here you can add or edit the CSV (comma-separated values) data that will be parsed to build the map. <br />
It should follow this format:<br />
Region Code, Tooltip Title, Tooltip Text, Action Value, HTML Color Value;<br />
It should not use quotes. Example:<br />
US, USA, Click to visit the White House Website, http://www.whitehouse.gov/,#6699CC;<br />
PT, Portugal, Click to visit Portugal's Government Website, http://www.portugal.gov.pt/,#660000;</span> </td>
</tr>
<tr>
<td><textarea name="places" id="places" onchange="dataToTable();"><?php
echo htmlspecialchars($places);
?>
</textarea><br />
<input type="button" value="Preview" onclick="dataToTable();" /></td>
</tr>
</table>
</div>
<h3>Preview </h3>
<span class="iwmsmall">The 'Active Region Action' will not work on this preview. <br />
When an active region is clicked an alert message with the value inserted will display for debugging, or no alert, if no value exists. </span>
<?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
<br>
<span class="iwmsmall">The Responsive Features will not work on this preview. It will render the Width/Height settings for testing purposes.</span>
<?php
}
?>
<?php
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
?>
<br>
<span class="iwmsmall">The HTML tooltip might look different on you site since it can inherit CSS rules from your theme.</span>
<?php
}
?>
<div id="visualization-wrap"><div id="visualization"></div></div><div id="visit">Read the <a href="<?php
echo plugins_url('interactive-world-maps/documentation/index.html');
?>
" target="_blank">Documentation</a> or visit the <a href="http://cmoreira.net/interactive-world-maps-demo/" target="_blank">Plugin Demo Site</a> for more information and tips on how to use it.<br />
<p>
<span class="iwmsmall">If you want to make advanced CSS customizations to the output of your map, <a href="http://cmoreira.net/interactive-world-maps-demo/advanced-customization/" target="_blank">check this page on the official plugin website</a>.</span>
</p>
</div></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</form>
</div>
<?php
$apiv = "1";
$usehtml = "0";
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
$apiv = $apiver;
$usehtml = "1";
}
?>
<script type='text/javascript'>
/* <![CDATA[ */
var iwmparam = [{"apiversion":"<?php
echo $apiv;
?>
","usehtml":"<?php
echo $usehtml;
?>
"}];
/* ]]> */
</script>
<?php
}
