function i_world_map_settings_page()
{
?>
<form method="post" action="options.php" id="dsform">
<div class="iwm-wrap">
<div id="interactive-world-maps" class="icon32"></div>
<h2>Settings</h2>
<?php
if (isset($_GET['settings-updated']) && $_GET['settings-updated'] == "true") {
$msg = "Settings Updated";
$type = "updated";
i_world_map_message($msg);
}
?>
<p>
Edit the default settings for the maps. <br />
When creating a map, you can choose to use the default visual settings or create custom ones.<br />
</p>
<table width="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="25%" style="vertical-align:top;">
<?php
settings_fields('i-world-map-plugin-settings');
?>
<?php
$options = get_option('i-world-map-settings');
?>
<h3>
Default Visual Settings
</h3>
<table width="100%" cellpadding="2" cellspacing="2" class="stuffbox" id="default-settings-table">
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Background Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_bg_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_bg_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Border Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_border_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_border_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap"><strong>Border Width (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_border_stroke]" value="<?php
echo $options['default_border_stroke'];
?>
" size="5" onchange="drawVisualization();" type="number" min="0" max="100" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"> </td>
<td width="20%"> </td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Inactive Region Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_ina_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_ina_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Active Region Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_act_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_act_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td nowrap="nowrap" scope="row"> </td>
<td> </td>
</tr>
<tr valign="top">
<td nowrap="nowrap" scope="row"><strong>Marker Size (px)</strong></td>
<td><input name="i-world-map-settings[default_marker_size]" value="<?php
echo $options['default_marker_size'];
?>
" onchange="drawVisualization();" type="number" min="1" max="100" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"> </td>
<td width="20%"> </td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Width (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_width]" type="text" value="<?php
echo $options['default_width'];
?>
" size="5" onchange="drawVisualization();" type="number"/></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap"><strong>Height (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_height]" type="text" value="<?php
echo $options['default_height'];
?>
" size="5" onchange="drawVisualization();" type="number"/></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Keep Aspect Ratio</strong></td>
<td width="20%"><input name="i-world-map-settings[default_aspect_ratio]" id="aspratio" type="checkbox" value="1" <?php
if ($options['default_aspect_ratio'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />
</td>
<tr>
<td colspan="2" class="iwmsmall"><i class="fa fa-info-circle"></i> Tip: In color fields you can use the word 'transparent' </td>
</tr>
</tr>
</table>
<h3>Default Map Settings </h3>
<p>Values will be pre-selected when creating a new map.</p>
<table width="100%" id="default-settings-table" class="stuffbox">
<tr valign="top">
<td nowrap="nowrap" scope="row"><strong>Region to Show</strong><br />
<?php
i_world_map_build_region_select_options('i-world-map-settings[default_region]', $options['default_region'], 'drawVisualization()');
?>
</td>
</tr>
<tr valign="top">
<td scope="row"> </td>
</tr>
<tr valign="top">
<td scope="row"><strong>Display Mode</strong><br />
<select name="i-world-map-settings[default_display_mode]" onchange="drawVisualization();">
<option value="regions" <?php
if ($options['default_display_mode'] == 'regions') {
?>
selected="selected" <?php
}
?>
>Regions</option>
<option value="markers" <?php
if ($options['default_display_mode'] == 'markers') {
?>
selected="selected" <?php
}
?>
>Markers</option>
<!-- <option value="text" <?php
if ($options['default_display_mode'] == 'text') {
?>
selected="selected" <?php
}
?>
>Text Label</option> -->
</select></td>
</tr>
<tr valign="top">
<td scope="row"> </td>
</tr>
<tr valign="top">
<td scope="row"><p><strong>Interactivity<br />
</strong>
<input name="i-world-map-settings[default_interactive]" id="interactive" type="checkbox" value="1" <?php
if ($options['default_interactive'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />Enable<br />
<input name="i-world-map-settings[default_showtooltip]" id="showtooltip" type="checkbox" value="1" <?php
if ($options['default_showtooltip'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />Show Tooltip
</p>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php
_e('Save Changes');
?>
" />
</p>
</td>
<td width="75%" valign="top"><!-- <h3>Default Settings Preview</h3> <div id="visualization"></div> -->
<h3>General Settings</h3>
<table id="default-settings-table" class="stuffbox" width="100%">
<tr><td>
<p><strong>Map Projection</strong></p>
<p>
<select name="i-world-map-settings[map_projection]" id="map_projection" onchange="drawVisualization();">
<option value="mercator" <?php
if (isset($options['map_projection']) && $options['map_projection'] == 'mercator') {
echo "selected='selected'";
}
?>
>Mercator</option>
<option value="kavrayskiy-vii" <?php
if (isset($options['map_projection']) && $options['map_projection'] == 'kavrayskiy-vii') {
echo "selected='selected'";
}
?>
>Kavrayskiy-vii</option>
<option value="albers" <?php
if (isset($options['map_projection']) && $options['map_projection'] == 'albers') {
echo "selected='selected'";
}
?>
>Albers</option>
<option value="lambert" <?php
if (isset($options['map_projection']) && $options['map_projection'] == 'lambert') {
echo "selected='selected'";
}
?>
>Lambert</option>
</select>
<span class="howto"> Select the map projection format. Currently supported <a href="http://en.wikipedia.org/wiki/Mercator_projection" target="_blank">Mercator</a>, <a href="http://en.wikipedia.org/wiki/Kavrayskiy_VII_projection" target="_blank">Kavrayskiy_VII</a>, <a href="http://en.wikipedia.org/wiki/Albers_projection" target="_blank">Albers</a> and <a href="http://en.wikipedia.org/wiki/Lambert_conformal_conic_projection" target="_blank">Lambert</a>.</span>
</p>
</td></tr>
<tr><td>
<p><strong>Responsive Maps (Beta Feature)</strong></p>
<p>
<input name="i-world-map-settings[default_responsive]" id="responsive" type="checkbox" value="1" <?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
checked <?php
}
?>
/>
Redraw Map when viewport size changes<br>
<span class="howto">When enabled the script will ignore the width/height settings of the map and ocupy 100% of the available space. When the window size changes it will try to redraw the map again to fit the available size.</span>
</p>
</td></tr>
<tr><td>
<p><strong>HTML Tooltips </strong></p>
<p>
<input name="i-world-map-settings[default_usehtml]" id="usehtml" type="checkbox" value="1" <?php
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
?>
checked <?php
}
?>
/>
Render HTML in the tooltips.<br>
<span class="howto">Consider that the tooltip will inherit styles from your theme that might affect the way the tooltip displays. You can target the tooltip with CSS using the class <i>.google-visualization-tooltip</i>.</span>
</p>
</td></tr>
<tr><td>
<p><strong>Ajax Loading Fix </strong></p>
<p>
<input name="i-world-map-settings[ajax_enabled]" id="ajax_enabled" type="checkbox" value="1" <?php
if (isset($options['ajax_enabled']) && $options['ajax_enabled'] == 1) {
?>
checked <?php
}
?>
/>
Load files across site (not recommended)<br>
<span class="howto">Some themes load content via ajax and fail to load the necessary files for the map to work. With this option enabled the map files will load by default, so they exist on the page when the map needs to display. This is not recomended, unless there isn't an alternative. If your theme allows you to disable ajax loading for specific URLs that would be a better option.</span>
</p>
</td></tr>
</table>
<h3>Custom Styles & Script</h3>
<table id="default-settings-table" class="stuffbox" width="100%">
<tr><td>
<p><strong>Custom CSS</strong></p>
<p>
<textarea name="i-world-map-settings[custom_css]" id="iwm_custom_css"><?php
if (isset($options['custom_css'])) {
echo $options['custom_css'];
}
?>
</textarea>
Include this CSS in pages where maps are displayed.<br>
<span class="howto">If you want to include custom css together with your maps you can include the css here. <a href="http://cmoreira.net/interactive-world-maps-demo/advanced-customization/" target="_blank">You can see some examples of custom CSS in the official website of the plugin.</a></span>
</p>
</td></tr>
<tr><td>
<p><strong>Custom Javascript</strong></p>
<p>
<textarea name="i-world-map-settings[custom_js]" id="iwm_custom_js"><?php
if (isset($options['custom_js'])) {
echo $options['custom_js'];
}
?>
</textarea>
Include this Javascript in pages where maps are displayed.<br>
<span class="howto">If you want to include custom javascript together with your maps you can include the code here. </span>
</p>
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
<p> </p>
</div>
</form>
<?php
}
function i_world_map_settings_page()
{
?>
<div class="wrap">
<div id="interactive-world-maps" class="icon32"></div>
<h2>Settings</h2>
<?php
if (isset($_GET['settings-updated']) && $_GET['settings-updated'] == "true") {
$msg = "Settings Updated";
$type = "updated";
i_world_map_message($msg);
}
?>
<p>
Edit the default settings for the maps. <br />
When creating a map, you can choose to use the default visual settings or create custom ones.<br />
</p>
<table width="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="25%"><form method="post" action="options.php" id="dsform">
<?php
settings_fields('i-world-map-plugin-settings');
?>
<?php
$options = get_option('i-world-map-settings');
?>
<h3>
Default Visual Settings
</h3>
<table width="100%" cellpadding="2" cellspacing="2" id="default-settings-table">
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Background Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_bg_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_bg_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Border Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_border_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_border_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap"><strong>Border Width (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_border_stroke]" value="<?php
echo $options['default_border_stroke'];
?>
" size="5" onchange="drawVisualization();" type="number" min="0" max="100" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"> </td>
<td width="20%"> </td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Inactive Region Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_ina_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_ina_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Active Region Color</strong></td>
<td width="20%"><input type="text" name="i-world-map-settings[default_act_color]" class="color {hash:true, adjust:false}" value="<?php
echo $options['default_act_color'];
?>
" onchange="drawVisualization();" /></td>
</tr>
<tr valign="top">
<td nowrap="nowrap" scope="row"> </td>
<td> </td>
</tr>
<tr valign="top">
<td nowrap="nowrap" scope="row"><strong>Marker Size (px)</strong></td>
<td><input name="i-world-map-settings[default_marker_size]" value="<?php
echo $options['default_marker_size'];
?>
" onchange="drawVisualization();" type="number" min="1" max="100" /></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"> </td>
<td width="20%"> </td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Width (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_width]" type="text" value="<?php
echo $options['default_width'];
?>
" size="5" onchange="drawVisualization();" type="number"/></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap"><strong>Height (px)</strong></td>
<td width="20%"><input name="i-world-map-settings[default_height]" type="text" value="<?php
echo $options['default_height'];
?>
" size="5" onchange="drawVisualization();" type="number"/></td>
</tr>
<tr valign="top">
<td width="10%" nowrap="nowrap" scope="row"><strong>Keep Aspect Ratio</strong></td>
<td width="20%"><input name="i-world-map-settings[default_aspect_ratio]" id="aspratio" type="checkbox" value="1" <?php
if ($options['default_aspect_ratio'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />
</td>
</tr>
</table>
<h3>Map Settings </h3>
<p>Values will be pre-selected when creating a new map.</p>
<table width="100%" id="default-settings-table">
<tr valign="top">
<td nowrap="nowrap" scope="row"><strong>Region to Show</strong><br />
<?php
i_world_map_build_region_select_options('i-world-map-settings[default_region]', $options['default_region'], 'drawVisualization()');
?>
</td>
</tr>
<tr valign="top">
<td scope="row"> </td>
</tr>
<tr valign="top">
<td scope="row"><strong>Display Mode</strong><br />
<select name="i-world-map-settings[default_display_mode]" onchange="drawVisualization();">
<option value="regions" <?php
if ($options['default_display_mode'] == 'regions') {
?>
selected="selected" <?php
}
?>
>Regions</option>
<option value="markers" <?php
if ($options['default_display_mode'] == 'markers') {
?>
selected="selected" <?php
}
?>
>Markers</option>
<!-- <option value="text" <?php
if ($options['default_display_mode'] == 'text') {
?>
selected="selected" <?php
}
?>
>Text Label</option> -->
</select></td>
</tr>
<tr valign="top">
<td scope="row"> </td>
</tr>
<tr valign="top">
<td scope="row"><p><strong>Interactivity<br />
</strong>
<input name="i-world-map-settings[default_interactive]" id="interactive" type="checkbox" value="1" <?php
if ($options['default_interactive'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />Enable<br />
<input name="i-world-map-settings[default_showtooltip]" id="showtooltip" type="checkbox" value="1" <?php
if ($options['default_showtooltip'] == 1) {
?>
checked <?php
}
?>
onchange="drawVisualization();" />Show Tooltip
</p>
</td>
</tr>
</table>
<h3>Other Settings</h3>
<table id="default-settings-table" width="100%">
<tr><td>
<p><strong>Responsive (Beta Feature)</strong></p>
<p>
<input name="i-world-map-settings[default_responsive]" id="responsive" type="checkbox" value="1" <?php
if (isset($options['default_responsive']) && $options['default_responsive'] == 1) {
?>
checked <?php
}
?>
/>
Redraw Map when viewport size changes<br>
<span class="howto">This is a feature still in beta. It will ignore the width/height settings of the map and ocupy 100% of the available space. When the window size changes it will try to redraw the map again to fit the available size. You might experience speed problems if you are using Round Markers (Text Codes) mode.</span>
</p>
</td></tr>
<tr><td>
<p><strong>HTML Tooltips (Beta Feature)</strong></p>
<p>
<input name="i-world-map-settings[default_usehtml]" id="usehtml" type="checkbox" value="1" <?php
if (isset($options['default_usehtml']) && $options['default_usehtml'] == 1) {
?>
checked <?php
}
?>
/>
Render HTML in the tooltips.<br>
<span class="howto">This is a feature still in beta. Consider that the tooltip will inherit styles from your theme that might affect the way the tooltip displays. You can create custom CSS editing the styles.css of the plugin folder.</span>
</p>
</td></tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php
_e('Save Changes');
?>
" />
</p>
</form></td>
<td width="75%" valign="top"><h3>Preview</h3> <div id="visualization"></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.</div></td>
</tr>
</table>
<p> </p>
</div>
<?php
}
