I can't get my map onClick events to fire on an iPhone

TrevorScott1 · ‎10-08-2014

Using iOS 8, and it works in the browser. This is an extremely urgent and important problem - any guidance or input would be greatly appreciated. Thank you in advance!

Here is my code if you are curious:

var map;

var graphic;

var currLocation;

var watchId;

var caseArray = [

<apex:repeat value="{!cwlist}" var="cw">

{id:"{!cw.c.id}",lat:"{!cw.Latitude}",long:"{!cw.longitude}",description:"{!cw.description}",subject:"{!cw.subject}",img:"{!cw.img}",requestDate:"{!cw.infoDate}",address:"{!cw.c.Address__c}",icon:"{!cw.c.Icon_String__c}"},

</apex:repeat>

];

require([

"esri/map",

"esri/geometry/Point",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"esri/Color",

"esri/layers/GraphicsLayer",

"dojo/domReady!"

], function(

Map, Point, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, GraphicsLayer,Color

) {

var lastItemIndex = caseArray.length-1;

map = new Map("map", {

basemap: "streets",

autoResize:false,

center: [caseArray[lastItemIndex].long,caseArray[lastItemIndex].lat],

zoom: 14

});

//MAP ON LOAD CODE

map.on("load", function() {

//default icon

var s = new esri.symbol.PictureMarkerSymbol("https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Azur...",30,30);

var p;

var g;

for(var i = 0; i < caseArray.length; i++) {

console.log('adding graphic...');

p = new Point(caseArray.long,caseArray.lat);

s = new esri.symbol.PictureMarkerSymbol('https://na10.salesforce.com' + caseArray.icon,30,30);

g = new Graphic(p, s).setAttributes({'id':caseArray.id,'subject':caseArray.subject,'description':caseArray.description,'img':caseArray.img,'requestDate':caseArray.requestDate,'longitude':caseArray.long,'latitude':caseArray.lat,'address':caseArray.address,'icon':caseArray.icon});

map.graphics.add(g);

//console.log(caseArray.lat+' ARG '+caseArray.long);

}

//map.addLayer(gl);

map.graphics.enableMouseEvents();

dojo.connect(map.graphics, "onClick", function(e) {

showRecord(e.graphic.attributes);

});

if(navigator.geolocation ) {

navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);

watchId = navigator.geolocation.watchPosition(showLocation, locationError);

} else {

alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");

}

}); //End map on load

map.on('reposition', function(evt) {

console.log(evt.x+','+evt.y);

});

function locationError(error) {

//error occurred so stop watchPosition

if( navigator.geolocation ) {

navigator.geolocation.clearWatch(watchId);

}

switch (error.code) {

case error.PERMISSION_DENIED:

alert("Location not provided");

break;

case error.POSITION_UNAVAILABLE:

alert("Current location not available");

break;

case error.TIMEOUT:

alert("Timeout");

break;

default:

alert("unknown error");

break;

}

function zoomToLocation(location) {

currentLongitude = location.coords.longitude;

currentLatitude = location.coords.latitude;

var pt = new Point(location.coords.longitude, location.coords.latitude);

addGraphic(pt);

map.centerAndZoom(pt, 15);

}

function showLocation(location) {

//zoom to the users location and add a graphic

var pt = new Point(location.coords.longitude, location.coords.latitude);

if ( !graphic ) {

addGraphic(pt);

} else { // move the graphic if it already exists

graphic.setGeometry(pt);

}

map.centerAt(pt);

}

function addGraphic(pt){

var symbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

12,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([210, 105, 30, 0.5]),

8

),

new Color([210, 105, 30, 0.9])

);

graphic = new Graphic(pt, symbol);

map.graphics.add(graphic);

}

});

var is1 = true;

function showInfoPanel(name, hideName, attributes) {

//if (attributes.img != '') $('.'+name).find('.media-object').attr('src','/resource/'+attributes.img);

$('.'+name).find('.media-object').attr('src',attributes.icon);

$('.'+name).find('.media-heading').html(attributes.subject);

$('.'+name).find('.media-date').html(attributes.requestDate);

//$('.'+name).find('.media-text').html(attributes.description);

console.log('Address:'+attributes.address);

$('.'+name).find('.media-address').html(attributes.address);

$('.'+name).attr('onclick','setCaseViewContent(\''+attributes.id+'\',\''+attributes.subject+'\',\''+attributes.description+'\',\''+attributes.latitude+'\',\''+attributes.longitude+'\',\''+attributes.img+'\',\''+attributes.requestDate+'\',\''+attributes.address+'\',\''+attributes.icon+'\');navigateTo(\'CaseView\');');

$('.'+name).removeClass('fadeOutDown');

$('.'+name).addClass('animated fadeInUp');

$('.'+name).show();

$('.'+hideName).removeClass('fadeInUp');

$('.'+hideName).addClass('fadeOutDown');

}

function showRecord(attributes) {

console.log(attributes);

console.log(attributes.id);

if(is1) {

console.log('is1 is true');

showInfoPanel('caseInfoPanel','caseInfoPanel2',attributes);

is1 = false;

}else {

console.log('is1 is false');

showInfoPanel('caseInfoPanel2','caseInfoPanel',attributes);

is1 = true;

}

/*

if($('.caseInfoPanel').is(":visible")) {

console.log('info is showing');

$('.caseInfoPanel').removeClass('animated fadeInUp');

$(".caseInfoPanel" ).fadeOut( "50", function() {

$('.caseInfoPanel').addClass('animated fadeInUp');

$('.caseInfoPanel').show();

});

}else{

}*/

}

</script>

RachelAlbritton · ‎07-27-2017

I know this is pretty old but did you ever figure this out? I'm having the same issue.