Here's the story. I've built a map, for the company I work for, using an image map(2), and you can see what it currently does, here: https://www.absa.co.za/corporate-and-investment-banking/about-us/presence/
The problem that I am having is that on IOS the areas in the map are not clickable, in fact, While making use of Browserstack on IOS, and selecting the area above the image/s, I select the image, and not the area, so the click happens on the img tag. Now, as you will be able to see, the shapes are pretty complex, and till this moment, I have not yet encountered a better way to get the same desired accuracy with something other than a .
Note: This works just as required on Windows, macOS, Android and most supported browser. This issue is just for IOS, Chrome and Safari.
I'll post the code below too, but it's dirty, because of me trying things, no luck so far.
Additional info:
The click on the map should not take you anywhere, but should just affect the element beside(desktop) or below(mobile) to show the country details.
I added in the country names below the map, to make this usable on IOS.
I have accessed quite a lot of info on the internet looking for an answer, but very very few maps make use of such functionality.
Help would be appreciated.
HTML:
<div class="interactivemap section desktop">
<div style="background: url('/content/dam/south_africa/absa/images/africa/countries/africa.svg') 0px 0px no-repeat; width: 698px; height: 700px;" class="africanMap">
<img id="AfricanOperations" src="/content/dam/south-africa/absa/images/africa/countries/africa.svg" usemap="#AfricanOperations" alt="">
<map id="_AfricanOperations" name="AfricanOperations">
<area shape="poly" alt="Botswana" title="" href="" coords="342,584,342,557,351,557,352,526,374,526,374,528,380,525,387,522,392,526,399,527,403,535,409,541,413,547,422,559,419,565,411,570,404,575,397,583,391,590,384,593,375,588,369,590,364,596,360,600,350,599,349,587,347,585">
<area shape="poly" alt="Zambia" title="" href="" coords="430,497,420,512,403,523,389,522,385,516,371,518,363,511,354,476,426,440,438,439,450,449,465,454,468,465,466,478,464,488">
<area shape="poly" alt="Mozambique" title="" href="" coords="441,603,439,561,432,500,467,490,474,471,500,473,528,463,534,490,514,556,476,588">
<area shape="poly" alt="Mauritius" title="" href="" coords="598,512,633,498,662,509,681,544,646,567,611,558,599,539">
<area shape="poly" alt="Seychelles" title="" href="" coords="612,439,603,395,631,327,682,363,688,456">
<area shape="poly" alt="Tanzania" title="" href="" coords="436,435,412,433,408,413,409,389,436,381,443,378,464,378,470,377,500,396,501,402,517,412,529,426,529,441,529,460,499,471,474,469,469,454,450,446">
<area shape="poly" alt="Uganda" title="" href="" coords="434,380,413,384,411,361,414,330,444,322,470,331,475,335,479,342,480,356,468,371,465,376,441,377">
<area shape="poly" alt="Namibia" title="" href="" coords="339,613,334,617,323,617,317,611,309,615,295,616,249,497,367,518,384,519,383,521,350,523,348,553,339,556">
<area shape="poly" alt="Nigeria" title="" href="" coords="189,333,186,233,303,230,315,253,275,346">
<area shape="poly" alt="South-africa" title="" href="" coords="294,618,311,617,317,614,323,619,335,618,342,615,341,587,347,588,349,601,361,601,371,592,378,591,382,595,391,592,405,578,416,569,425,559,437,563,438,594,439,604,450,604,469,608,464,663,423,682,308,687">
<area shape="poly" alt="Kenya" title="" href="" coords="471,373,482,357,482,342,469,328,468,311,502,305,553,308,578,360,545,427,503,401,502,394">
<area shape="poly" alt="Ghana" title="" href="" coords="183,232,116,260,118,345,185,348">
</map>
<map id="_AfricanOperationsMobile" name="AfricanOperationsMobile">
<area shape="poly" alt="Botswana" title="" href="" coords="166,236,161,241,161,255,157,255,156,267,160,273,165,276,171,270,178,271,194,257,197,257,196,245">
<area shape="poly" alt="Zambia" title="" href="" coords="213,214,211,207,202,204,197,196,162,213,167,236,197,244,196,229,209,222">
<area shape="poly" alt="Mozambique" title="" href="" coords="215,216,209,224,197,229,200,257,201,275,213,274,238,249,250,209,230,217">
<area shape="poly" alt="Mauritius" title="" href="" coords="266,238,289,225,311,235,313,256,292,266,273,256">
<area shape="poly" alt="Seychelles" title="" href="" coords="268,179,288,154,319,165,319,200,284,208">
<area shape="poly" alt="Tanzania" title="" href="" coords="216,174,228,182,235,190,250,189,251,209,241,212,229,216,215,216,213,208,203,204,193,184,193,174">
<area shape="poly" alt="Uganda" title="" href="" coords="215,173,220,163,215,151,199,142,183,156,193,174">
<area shape="poly" alt="Namibia" title="" href="" coords="165,235,115,228,131,284,155,283,156,255">
<area shape="poly" alt="Nigeria" title="" href="" coords="84,111,115,97,152,115,151,146,126,165,89,155">
<area shape="poly" alt="South-africa" title="" href="" coords="156,284,156,269,159,274,164,278,171,271,178,272,194,258,198,258,200,276,220,275,213,297,190,320,136,320,116,285">
<area shape="poly" alt="Kenya" title="" href="" coords="221,163,215,149,232,139,257,148,256,190,236,189,229,181,216,172">
<area shape="poly" alt="Ghana" title="" href="" coords="88,155,83,111,48,108,45,155">
</map>
<div class="bc-textimage-height"> </div>
<div class="bc-clear"></div>
</div>
</div>
Script:
function goDesktop() {
if ($(window).width() < 768) {
this.img.attr('usemap', 'AfricanOperationsMobile');
this.container.css({'width': '320px', 'height': '321px'});
}
var ua = navigator.userAgent,
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(scope.length !== 0){
var _path = $('#AfricanOperations').attr('src'),
_imgLoc = _path.split('africa.')[0];
$('.africanMap').css('background', 'url(' + _path + ') no-repeat 0 0');
$('body').append('<div class=\'hovertool\'></div>');
$('.hovertool').css('display', 'none');
$('#_AfricanOperations').on(pickclick, 'area', function(e) {
e.preventDefault();
e.stopPropagation();
var _alt = $(this).attr('alt'),
_counter = 0,
_adCounter,
_country = _alt.toLowerCase();
_country = _country.replace(' ', '-');
$('.africanMap img').attr('src', _imgLoc + 'over_' + _country + '.svg');
$('.tabs-map-description .tabs-nav-item').each(function() {
var _countryHead = $(this).find('.text-wrapper').html();
_counter = _counter + 1;
_adCounter = _counter + 1;
_countryHead = _countryHead.toLowerCase();
_countryHead = _countryHead.replace(' ', '-');
if (_country == _countryHead) {
var _targetNav = $('.tabs-map-description .tabs-nav-item:nth-child(' + _counter + ')');
var _targetCon = $('.tabs-map-description .tabs-content:nth-child(' + _adCounter + ')');
_targetNav.addClass('is-active');
_targetNav.siblings('.tabs-nav-item').removeClass('is-active');
_targetCon.removeClass('is-hidden');
_targetCon.siblings('.tabs-content').addClass('is-hidden');
}
});
});
$('#_AfricanOperations area').hover(function(e){
e.preventDefault();
e.stopPropagation();
$('.hovertool').html($(e.target).attr('alt'));
$('.hovertool').css('display', 'block');
},function(e){
$('.hovertool').html('');
$('.hovertool').css('display', 'none');
});
$("body").mousemove(function(e) {
var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
$('.hovertool').css('top', y + 'px');
$('.hovertool').css('left', (x + 20) + 'px');
});
$('#_AfricanOperationsMobile').on(pickclick, 'area', function(e){
e.preventDefault();
e.stopPropagation();
var _alt = $(this).attr('alt'),
_counter = 0,
_adCounter,
_country = _alt.toLowerCase();
_country = _country.replace(' ', '-');
$('.africanMap img').attr('src', _imgLoc + 'over_' + _country + '.svg');
$('.tabs-map-description .tabs-nav-item').each(function() {
var _countryHead = $(this).find('.text-wrapper').html();
_counter = _counter + 1;
_adCounter = _counter + 1;
_countryHead = _countryHead.toLowerCase();
_countryHead = _countryHead.replace(' ', '-');
if (_country == _countryHead) {
var _targetNav = $('.tabs-map-description .tabs-nav-item:nth-child(' + _counter + ')');
var _targetCon = $('.tabs-map-description .tabs-content:nth-child(' + _adCounter + ')');
_targetNav.addClass('is-active');
_targetNav.siblings('.tabs-nav-item').removeClass('is-active');
_targetCon.removeClass('is-hidden');
_targetCon.siblings('.tabs-content').addClass('is-hidden');
}
});
});
}
};
this.scope = $('.interactivemap');
this.container = this.scope.find('.africanMap');
this.img = this.container.find('#AfricanOperations');
this.goDesktop(this.scope);
CSS:
.reference-africa-map {
width: 698px;
width: 43.624875rem;
display: block;
float: left;
margin-left: calc((100% - 1058px)/ 2);
cursor: pointer;
}
@media only screen and (max-width:767px) {
.africanMap {
max-width: 320px;
}
}
.reference-africa-map .map {
width: auto !important;
position: absolute;
top: 0;
left: 0;
margin-left: -9px;
margin-top: -40px;
cursor: pointer;
display: inline-block;
}
.reference-africa-map area {
outline: 0;
cursor: pointer;
}
@media (max-width:1060px) {
.reference-africa-map {
margin-left: calc((100vw - 698px)/ 2)
}
}
@media only screen and (max-width:767px) {
.reference-africa-map {
margin-left: calc((100vw - 320px)/ 2);
max-width: fit-content
}
}
.tabs-map-description {
width: 360px;
width: 22.49975rem;
margin-top: 6.2496875rem;
display: inline-block !important
}
@media only screen and (min-width:768px) {
.tabs-map-description .tabs-nav {
display: none;
}
}
.tabs-map-description .tabs-nav {
overflow-x: scroll;
position: static;
}
.tabs-map-description ::-webkit-scrollbar {
display: none;
}
.tabs-map-description .tabs-nav-switcher {
background: white;
border: 0;
-webkit-box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
box-shadow: 0px 0px 68px 34px rgba(255,255,255,1);
-webkit-animation: ArrowAnimation 1s infinite; /* Safari 4+ */
-moz-animation: ArrowAnimation 1s infinite; /* Fx 5+ */
-o-animation: ArrowAnimation 1s infinite; /* Opera 12+ */
animation: ArrowAnimation 1s infinite; /* IE 10+, Fx 29+ */
transition: all .5s ease;
}
@-webkit-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@-moz-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@-o-keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
@keyframes ArrowAnimation {
0% { padding-right: 0px;
padding-left: 0px;}
50% { padding-right: 5px;
padding-left: 5px;}
100% { padding-right: 0px;
padding-left: 0px;}
}
.tabs-map-description .tabs-nav-switcher:before {
color: #BE0028;
padding: 12px 0px;
}
.tabs-map-description .tabs-nav .text-wrapper {
font-size: 18px;
color: black !important;
}
.tabs-map-description .tabs-nav-list {
width: max-content;
}
.tabs-map-description .tabs-nav .tabs-nav-item {
border: 0;
background: white;
}
.tabs-map-description .tabs-nav .tabs-nav-item.is-active .text-wrapper {
color: #BE0028 !important;
}
.tabs-map-description .tabs-content {
border: 0
}
.tabs-map-description .tabs-content .h3,
.tabs-map-description .tabs-content .pseudo-h3,
.tabs-map-description .tabs-content h3 {
line-height: 95px;
line-height: 5.9373125rem;
font-size: 48px;
font-size: 2.9999375rem;
font-family: SourceSansPro-Black, Arial, Helvetica, sans-serif;
letter-spacing: .44px;
border-bottom: 1px solid #BE0028
}
.tabs-map-description .tabs-content p,
.tabs-map-description .tabs-content p a {
font-size: 16px;
font-size: .9996875rem;
line-height: 28px;
line-height: 1.75rem;
letter-spacing: .5px
}
.tabs-map-description .tabs-content p .read-more-arrow,
.tabs-map-description .tabs-content p a .read-more-arrow {
letter-spacing: 2px
}
@media (max-width:1060px) {
.tabs-map-description {
margin-top: 0;
margin-left: calc((100vw - 360px)/ 2)
}
}
.hovertool {
position: absolute;
width: 100px;
padding: 10px;
text-align: center;
border-radius: 2px;
background: white;
z-index: 1000;
border: 1px solid #BE0028;
}
Problem here was in the HTML. It did not handle it like any other browser, and I had to move each map to it's only parent div.