Feature request:
(1) remove styles from template into css file
(2) make the whole template a bit more responsive, e.g. by replacing the table structures by floating css boxes
I just started working on this for a forum using the reseller theme - this is what I've done so far:
Added some lines of css to GoogleMap.css
#mapWindow { margin-bottom: 10px; height: 512px; }
#map_leftSidebar { white-space: nowrap; display: inline-block; padding-right: 10px; }
#map_rightSidebar { display: inline-block; white-space: nowrap; padding-left: 10px; }
#map_main { display: inline-block; width: 80%; }
#map { height: 500px; }
.mapFloatingbox { display: inline-block; padding: 5px; }
and modified GoogleMap.template.php:<?php
// Google Member Maps Modification
function template_map()
{
global $context, $modSettings, $scripturl, $txt, $settings;
if (!empty($modSettings['googleMap_Enable']))
{
echo '
<div id="main_container">
<div class="cat_bar">
<h3 class="catbg">', $txt['googleMap'], '</h3>
</div>
<div class="windowbg2">
<span class="topslice"><span></span></span>
<div class="content">';
// Show a left sidebar?
if ((!empty($modSettings['googleMap_Sidebar'])) && $modSettings['googleMap_Sidebar'] == 'left')
{
echo '
<div id="map_leftSidebar">
<div class="centertext"><em><strong>', $txt['googleMap_Pinned'], '</strong></em></div>
<hr style="width: 94%;" />
<div id="googleSidebar" class="googleMap_Sidebar" ></div>';
if (!empty($modSettings['googleMap_BoldMember']))
echo '
<div class="centertext googleMap_Legend">
<strong>' . $txt['googleMap_bold'] . '</strong> ' . $txt['googleMap_OnMove'] . '
</div>';
echo '
</div>';
}
// our map
echo '
<div id="map_main">
<div id="mapWindow">
<div id="map"></div>
<div id="googleMapReset" onclick="resetMap(); return false;" title="'. $txt['googleMap_Reset'] . '"></div>
</div>';
// Set the text for the number of pins we are, or can, show
if ($context['total_pins'] >= $modSettings['googleMap_PinNumber'] && $modSettings['googleMap_PinNumber'] != 0)
echo
sprintf($txt['googleMap_Thereare'], '<strong>(' . $modSettings['googleMap_PinNumber'] . '+)</strong>');
else
echo
sprintf($txt['googleMap_Thereare'], '<strong>(' . $context['total_pins'] . ')</strong>');
echo '
</div>';
// Show a right sidebar?
if (!empty($modSettings['googleMap_Sidebar']) && $modSettings['googleMap_Sidebar'] == 'right')
{
echo '
<div id="map_rightSidebar">
<div class="centertext"><em><strong>', $txt['googleMap_Pinned'], '</strong></em></div>
<hr style="width: 94%;" />
<div id="googleSidebar" class="googleMap_Sidebar"></div>';
if (!empty($modSettings['googleMap_BoldMember']))
echo '
<div class="centertext googleMap_Legend">
<strong>' . $txt['googleMap_bold'] . '</strong> ' . $txt['googleMap_OnMove'] . '
</div>';
echo '
</div>';
}
// Show a legend?
if (!empty($modSettings['googleMap_EnableLegend']))
{
echo '
<div class="cat_bar">
<h4 class="catbg"><span class="align_left">', $txt['googleMap_Legend'], '</span></h4>
</div>
<div class="centertext">';
if (empty($modSettings['googleMap_PinGender']))
echo '
<div class="mapFloatingbox"><img src="https://chart.apis.google.com/chart', $modSettings['npin'], '" alt="" />', $txt['googleMap_MemberPin'], '</div>';
else
echo '
<div class="mapFloatingbox"><img src="https://chart.apis.google.com/chart', $modSettings['npin'], '" alt="" />', $txt['googleMap_AndrogynyPin'], '</div>
<div class="mapFloatingbox"><img src="https://chart.apis.google.com/chart', $modSettings['mpin'], '" alt="" />', $txt['googleMap_MalePin'], '</div>
<div class="mapFloatingbox"><img src="https://chart.apis.google.com/chart', $modSettings['fpin'], '" alt="" />', $txt['googleMap_FemalePin'], '</div>';
if (!empty($modSettings['googleMap_EnableClusterer']) && ($context['total_pins'] > (!empty($modSettings['googleMap_MinMarkertoCluster']) ? $modSettings['googleMap_MinMarkertoCluster'] : 0)))
{
$codebase = 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclusterer';
$chartbase = "https://chart.apis.google.com/chart";
switch ($modSettings['cpin'])
{
case 1:
$pinsrc = $codebase . '/images/m1.png';
break;
case 2:
$pinsrc = $codebase . '/images/people35.png';
break;
case 3:
$pinsrc = $codebase . '/images/conv30.png';
break;
default:
$pinsrc = $chartbase . $modSettings['cpin'];
}
echo '
<div class="mapFloatingbox"><img src="' . $pinsrc . '" height=37 />', $txt['googleMap_GroupOfPins'], '</div>';
}
echo '
</div>';
}
echo '
<div class="centertext">';
// If they can place a pin, give them a hint
if (allowedTo('googleMap_place'))
echo '
<a href="', $scripturl, '?action=profile;area=forumprofile">', $txt['googleMap_AddPinNote'], '</a>
';
// Google earth klm output enabled?
if (!empty($modSettings['googleMap_KMLoutput_enable']))
echo '
<br><a href="', $scripturl, '?action=.kml"><img src="', $settings['default_theme_url'], '/images/google_earth_feed.gif" border="0" alt="" /></a>
';
echo '
</div>';
// Close it up jim
echo '
</div>
<span class="botslice"><span></span></span>
</div>
</div>';
// Load the scripts so we can render the map
echo '
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=' . $modSettings['googleMap_Key'] . '&sensor=false"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/markerclusterer_compiled.js"></script>
<script type="text/javascript" src="', $scripturl, '?action=googlemap;sa=.js;count='. $context['total_pins'] .'"></script>';
}
}
?>
Pls note: This is work in progress and has only been roughly tested with SMF 2.0.14 and a modified Reseller theme - YMMV.
