I'm building an interactive map web-app using Highmaps and Highcharts. There's a work in progress version of it here: http://s3.eu-west-2.amazonaws.com/ds-active-travel/index.html
It works fine on Desktop browsers (IE, Firefox, Chrome, Safari) however the click events don't seem to be firing when I click the map on an IOS mobile device regardless of the browser (Safari, Firefox, Chrome).
Interestingly when I use the dropdowns to select a node, it works fine. I've tried replacing the anonymous functions embedded within the map to the dropdown functions but this doesn't see to work.
Does anyone have any ideas what's causing this?
Edit. Code for the map
function buildMap (container,mapData,mapApiData,mapColor,mapTitle) {
var map = Highcharts.mapChart(container, {
chart: {
style : {
fontFamily: 'Roboto, sans-serif',
},
pinchType: 'xy'
},
credits : {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
},
},
colorAxis: {
tickPixelInterval: 100,
// minColor: "#ffffff",
maxColor: mapColor
},
title: {
text: mapTitle,
style: {
fontSize: 16,
weight: 'bold'
}
},
tooltip : {
enabled: true,
headerFormat: '',
backgroundColor: "rgba(0,0,0,0.6)",
borderWidth: 0,
borderRadius: 0,
shadow: false,
hideDelay: 1500,
style : {
color: 'white',
fontSize: '16px',
lineHeight: 20
}
},
plotOptions: {
series : {
allowPointSelect: true
}
},
series: [{
data: mapApiData[0].record.data,
mapData: mapData,
joinBy: ['CODE',0],
keys: ['CODE', 'value'],
name: 'Random data',
animation: true,
events: {
click: function (e) {
renderCharts.fromMap(e);
},
},
states: {
select: {
color: '#00ff1a'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
},
borderWidth: 0
}]
});
return map;
}