Мне нужны совместимые с Ad a кликабельные полигоны области карты
Это интересный. У меня есть клиент с интерактивной картой с регионами штата, которые ссылаются и открывают раздел под картой с биографией своих сотрудников, которые обслуживают этот регион. Мне нужно, чтобы карта соответствовала требованиям ADA. Пользователи клавиатуры должны иметь возможность перемещаться по регионам и нажимать, чтобы открыть соответствующий регион ниже. и сосредоточить внимание на 1-й ссылке в этом регионе. Я знаю, что это много кода, но я надеюсь, что кто-то может помочь. Вот оно...
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
//print_r($field_1_image);die;
$PlotFromDb = explode('*',trim($field_2_textarea_text));
//$bID = $controller->bID;
$ih = Loader::helper('image');
//$image = File::getByID($field_1_image);
$blockURL = $this->getBlockURL();
$th = Loader::helper('text');
?>
<?php if(!$c->isEditMode()){?>
<script type="text/javascript" src="<?php echo BASE_URL.$blockURL ?>/auto_js/jquery.maphilight.min.js"></script>
<?php } ?>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 whole-reps">
<div class="bios_expand hidden-xs">
<p> <strong>Click on a county </strong>to view the contact for that region.</p>
<div id="mainImage" style="position:relative;" class="canvas">
<?php if (!empty($field_1_image)): ?>
<img alt="Minnesota map by region" src="<?php echo $field_1_image->src; ?>" class="map maphighlights<?php echo intval($bID); ?>" usemap="#Plat_Map_<?php echo intval($bID); ?>" />
<?php endif; ?>
</div>
</div>
<?php
$sortArray = array();
$i = 1;
foreach($PlotFromDb as $_plot){
$phone = $email = $experience = $interests = $image = $details = '';
$plotDetails = explode('||', $_plot);
if($plotDetails[5]!=''){
$phone = '</strong><a title="Phone number" href="tel:'.$plotDetails[5].'">'.$plotDetails[5].'</a>';
}
if($plotDetails[4]!=''){
$email= '<a href="mailto:'.trim($plotDetails[4]).'" class="mail">'.trim($plotDetails[4]).'</a>';
}
if($plotDetails[6]!=''){
$experience ='<p><strong>About: </strong>'.trim($plotDetails[6]).'</p>';
}
if($plotDetails[8]!=''){
$interests ='<p><strong>Interests: </strong>'.trim($plotDetails[7]).'</p>';
}
if($plotDetails[3]!=''){
$imgpath = (is_object(File::getByID($plotDetails[3]))?$ih->getThumbnail(File::getByID($plotDetails[3]),307,404,true)->src:'');
if($imgpath != ''){
$image ='<img class="img-responsive" src="'.$imgpath.'" />';
}
}
//print_r($plotDetails);
$sortArray[$i]['content']='<div class="bios_expand_one">
<a name="'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'" style="display:none" class="exp"></a>
<a href="#'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'" class="map-highlight exp" id="'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'">
<h3>'.$plotDetails[1].'</h3>
<h4>'.$plotDetails[2].'</h4></a>
'.$details.'</div>';
$sortArray[$i]['sortorder'] = $plotDetails[7];
$result = explode(',', $plotDetails[0]);
$x = array();
$y = array();
foreach ($result as $key => $value) {
if ($key % 2 == 0) {
$x[] = $value;
} else {
$y[] = $value;
}
}
if(is_array($x)){
$ox=min($x)+20;
}
if(is_array($y)){
$ycoordinate=min($y);
}
$j = $i-1;
$map_area.='<area shape="polygon" tabindex="'.$j.'" alt="'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="Tooltip on bottom" href="#'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'" id="'.strtolower(str_replace('---','-',str_replace(array(' ',' '),'-',$plotDetails[1]))).'" coords="'.$plotDetails[0].'" title="'.$plotDetails[1].'" /><div class="tooltip top" style="top:'.$ycoordinate.'px;left:'.$ox.'px;" role="tooltip">
</div><a name="'.str_replace(array(' ',' '),'-',$plotDetails[1]).'"></a>';
?>
<?php $i++; }?>
<?php
$db = Loader::db();
$akID = $db->query("SELECT akID FROM AttributeKeys WHERE akHandle = 'team_category'");
while($row=$akID->fetchrow()){
$akIDc = $row['akID'];
}
$akv = $db->execute("SELECT * FROM atSelectOptions WHERE akID = $akIDc");
while($row=$akv->fetchrow()){
$values[$row['ID']]=$row['value'];
}
if(sizeof($values)>0 && is_array($values)){?>
<div class="teams">
<?php foreach($values as $value){
echo '<div class="bios_expand_one" id="map_expand_'.strtolower(str_replace(array(' ',' '),'-',$value)).'" >';
echo '<a href="javascript:void(0)" id="'.strtolower(str_replace(array(' ',' '),'-',$value)).'" rel="region-cover-'.strtolower(str_replace(array(' ',' '),'-',$value)).'" class="map-highlight exp">';
echo '<h3>'.$value.'</h3>';
echo '</a>';
$pl = new PageList();
$pl->filterByTeamManagementSection(1);
$section = $pl->get();
if(is_array($section) && sizeof($section)>0){
echo '<div class="region-cover-'.strtolower(str_replace(array(' ',' '),'-',$value)).'">';
foreach($section as $_section){
$pl1 = new PageList();
$pl1->filterByParentID($_section->cID);
$childrens = $pl1->get();
if(is_array($childrens) && sizeof($childrens)>0){
foreach($childrens as $children){
$thumbnail = $children->getAttribute('image_team');
if(is_object($thumbnail)){
$thumbnail = $children->getAttribute('image_team')->getRelativePath();
}
$categories = $children->getAttribute('team_category');
if(is_array($categories->getOptions()) && sizeof($categories->getOptions())>0){
$options = array();
//print_r($categories->getOptions());
foreach($categories->getOptions() as $_option){
$options[] = strtolower(str_replace(array(' ',' '),'-',$_option->value));
}
}
//$th->handle(implode(' ',$options).'-'.$children->getCollectionName())
echo '<div class="rep_top down_white '.implode(' ',$options).' '.$th->handle($children->getCollectionName()).'" id="">
<h3>'.$children->getCollectionName().'</h3>
<span>'.$children->getAttribute('member_designation').'
</span>
<a title="Phone number" href="tel:'.$children->getAttribute('phone_number').'">'.$children->getAttribute('phone_number').'</a>
<a href="mailto:'.$children->getAttribute('email').'" class="mail">'.$children->getAttribute('email').'</a>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 right_space">
'.$children->getAttribute('description').'
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<img class="img-responsive" alt="'.$children->getCollectionName().'" src="'.$thumbnail.'">
</div>
</div>
</div>';
//print_r($options);die;
}//die;
}
}
echo '</div>';
}
echo '</div>';
}?>
</div>
<?php }
//$pl = new PageList();
// $pl->filterByTeamManagementSection(1);
// $section = $pl->get();
// if(is_array($section) && sizeof($section)>0){}
?>
</div>
</div>
</div>
<div style="position:relative;float:left;width:100%;" >
<div class="map visible-lg">
<map name="Plat_Map_<?php echo intval($bID); ?>">
<?php echo $map_area;?>
</map></div>
</div>
<?php if(!$c->isEditMode()){?>
<script type="text/javascript">$(function() {
$('.map').maphilight();
});</script>
<?php } ?>
<script type="text/javascript">
$(document).ready(function(){
$('.down_white').hide();
$(window).on('hashchange', function() {
showcurrentRegionContent();
});
$('.map-highlight').click(function(){
$('.rep_top').hide();
var id = $(this).attr('id');
var rel = $(this).attr('rel');
if(id){
if($(this).hasClass('active')){
console.log(id);
$(this).removeClass('active');
}else{
console.log('fsfs');
$('.'+rel+' .rep_top.'+id).slideDown(500);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
$(this).addClass('active');
}
}
});
$('.map area').mouseenter(function(){
$('.tooltip').css('opacity','0');
$(this).next().css('opacity','1');
});
$('.map area').mouseleave(function(){
$('.tooltip').css('opacity','0');
});
$('map').each(function(){
// calculateCenterPoint($('map'));
});
$('.read_less ').on('click', function () {
$(this).parent().hide(500);
$(this).parent().parent().find('a.map-highlight').removeClass("active");
$('html, body').animate({
scrollTop: $(this).parent().parent().offset().top
}, 2000);
});
//$('.whole-reps').find('.bios_expand_one .map-highlight').eq(0).trigger("click");
});
$(window).load(function(){
if(window.location.hash!=''){
showcurrentRegionContent();
}else{
$('.teams .bios_expand_one').eq(0).find('.rep_top').show();
$('.teams .bios_expand_one .map-highlight').eq(0).addClass('active');;
}
});
function showcurrentRegionContent(){
$('.map-highlight').removeClass('active');
$('.rep_top').hide();
var ID = window.location.hash.replace('#','');
$('.hide-childrens').hide();
if(ID){
$('html, body').animate({
scrollTop: $('div#map_expand_'+ID).offset().top
}, 2000);
$('ul#'+ID).show();
$('div#map_expand_'+ID+' .map-highlight').addClass('active');
$('div#map_expand_'+ID+' .region-cover-'+ID+' .'+ID).show(500);
}
}
function calculateCenterPoint(areas) {
var maxX = 0,
minX = Infinity,
maxY = 0,
minY = Infinity;
Array.prototype.forEach.call(areas, function (e) {
var i = 0,
coords = e.getAttribute('coords').split(',');
while (i < coords.length) {
var x = parseInt(coords[i++],10),
y = parseInt(coords[i++],10);
if (x < minX) minX = x;
else if (x > maxX) maxX = x;
if (y < minY) minY = y;
else if (y > maxY) maxY = y;
}
});
console.log(minX + (maxX - minX) / 2);
console.log(minY + (maxY - minY) / 2);
}
</script>
<style type="text/css">
area:hover .tooltip.top {
opacity:1;
}
.main_wrap .bios_part .bios_expand.remove_pad {
border-bottom:0px;
}
.main_wrap .rep_top {
display:none;
}
.category {
float: left;
width: 100%;
}
.category h2 {
font-size: 29px;
text-transform: uppercase;
margin: 6px;
font-weight: 600;
}
</style>