AnsweredAssumed Answered

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

Question asked by marquan03 on Oct 8, 2014
Latest reply on Jul 27, 2017 by rralbritton

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:

 

<script>

      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-Azure.png",30,30);          

          var p;

          var g;

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

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

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

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

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

              map.graphics.add(g);

              //console.log(caseArray[i].lat+' ARG '+caseArray[i].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>

Outcomes