none
Afetr loading map browers getting closed in IPAD RRS feed

  • Question

  • Hi Sir,

    Map is getting loaded but after loading suddenly it closes the browser in IPAD (safari brower) and user need to open agin browser

    Obesrved : if the nodes are below 150 it is working fine.if it is more than 150 it is causing the problem.

    Plz help me

    Thanks

    Tuesday, August 26, 2014 12:40 PM

Answers

  • What does this do:

    setTimeout(function(){
       canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang);
    }, 1000);
    

    Everything looks fine until this line. There isn't any information about this.

    As for creating a lot of canvas pushpins, which I don't see in your code. That would be fairly intensive and would generate a lot of extra DOM elements. The canvas pushpins should be used sparingly.


    http://rbrundritt.wordpress.com

    Wednesday, August 27, 2014 8:33 AM
  • Try using some break points in your code to figure out which line of code is causing the crash.

    http://rbrundritt.wordpress.com

    Friday, August 29, 2014 9:33 AM

All replies

  • Can you provide a bit more information, this doesn't make much sense? What nodes?

    http://rbrundritt.wordpress.com

    Tuesday, August 26, 2014 3:55 PM
  •  hi Ricky,

    Thanks for replying

    map shows Pins and used poly lines to show connection between Pins and also used Canvas Arrow image to Show direction.

    If i comment code of Showing canvas image, it works fine. I think it is taking time to Generate canvas image.

    It works if Pins are 100 to 150.if it is more than 150 browser is atomically getting closed

    For Your reference ..i will paste the code here

    function createCanvasPins(){
            instance = BrowserWindow.Launch(uri);
            instance.CloseOnPlaybackCleanup = false;
            var pinInfoBox;  //the pop up info box
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            var pinLayer = new Microsoft.Maps.EntityCollection();
          //  var apiKey = "";
         //
          //  map = new Microsoft.Maps.Map(document.getElementById("surveyMap"), {credentials: apiKey});
            
            map.setView({ zoom:4, center: new Microsoft.Maps.Location(39.2102, -81.6642) })
            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);
            
            var method = base_url+'surveys/get_geo_influence_data';
            
            //var queryName    = $.trim($('#chartFooter').find('td:eq(1) input[type="text"]').val());
            //if(queryName!=""){
                
                
            var data    = $('#searchFiltersContainer').find('form').serialize();
            data        += '&survey_id='+surveyId;
                $.ajax({
                    type: "post",
                    dataType:"json",
                    data: data,
                    url: base_url+'surveys/get_geo_influence_data',
                    success: function(returnData){
                
                        //if(returnData.selectedState!=''){
                            // map.setView({ zoom:6, center: new Microsoft.Maps.Location(returnData.selectedState.selectedLat, returnData.selectedState.selectedLang) })
                        //}
                        if(returnData.kols==null){
                            
                             $('#surveyMapsContent').block({message: 'No KOLS found ',width:'200px'});
                             return false;
                        }
                        if(returnData.kols!=null){
                            kols1 = returnData;
                            kols=JSON.stringify(returnData.kols) ;
                        }
                        
                        var pushpinOptions = {icon: base_url+'/images/image1.png', width: 30, height: 50};
                        $.each(returnData,function(key,value){
                            //Loop through each kol and get the Latitude and Longitude
                            $.each(value,function(key,value){
                                //create a point by setting the Latitude and Longitude values
                                //var point = new GLatLng(value.Latitude, value.Longitude);
                                var offset = new Microsoft.Maps.Point(0, 5);
                                //var pushpinOptions = {icon: "http://localhost/kolm_otsuka/images/user3.png", visible: true, textOffset: offset };
                                //var pushpinOptions = {width: null, height: null, htmlContent: "<div class='tooltip-demo tooltop-right microViewIcon Male'><a class='tooltipLink' rel='tooltip' href='#' data-original-title='Profile Snapshot'>&nbsp</a></div>"};    
                                var latLon = new Microsoft.Maps.Location(value.nomineLat, value.nominelang);
                                var pin = new Microsoft.Maps.Pushpin(latLon,pushpinOptions);
                                pin.id = value.id;//usually title of the infobox
                                pin.type = 'nominee';
                                pin.name = value.nom_name;
                                pinLayer.push(pin);
                                
                                if(agent!='Apple iPad'){
                                      Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                                      /*  Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayEventInfo);
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseout', function clear(){
                                        //    pinInfobox.setOptions({visible:false});
                                            clearTimeout(myTimer);
                                            setTimeout(clear1,1000);
                                        });*/
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseout', pinMouseOut);
                                        
                                }else{
                                    pin.ipad=true;
                                    Microsoft.Maps.Events.addHandler(pin, 'click', showInfoBox);
                                }
                                
                                var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(value.nomineLat, value.nominelang),new Microsoft.Maps.Location(value.resoLat,value.resoLang)], {strokeThickness:1,strokeColor: new Microsoft.Maps.Color(200, 0, 0, 255)},null);
                                
                                //map.setView( {zoom:8});
                                map.entities.push(polyline);
                      
                                var latLon1 = new Microsoft.Maps.Location(value.resoLat,value.resoLang);
                                var pin1 = new Microsoft.Maps.Pushpin(latLon1,pushpinOptions);
                                // pin.Title = name;//usually title of the infobox
                                //pin.Description = "<div id=kolImage>"+"<img class='micro_view_icon' width='80' title='MicroView' src='"+base_url+"images/kol_images/resized/"+value.profile_image+"'>"+" <br /> <a target='_new' href='"+base_url+"organizations/view/"+value.id+"'><img width='80' height='20' style='padding-left:1px;' src='"+base_url+"images/view.gif'/></a></div>"+"<div id=addrssInfo>"+"<b>"+value.name+"<br/></b><br/>"+value.address+"<br/>"+value.city+", "+value.postal_code+" <br/>"+value.region+" "+value.country+"</div> " ;; //information you want to display in the infobox
                                pin1.id = value.id;//usually title of the infobox
                                pin1.type = 'respondent';
                                pin1.name = value.resp_name;
                                //pin.Description = "<div id=kolImage>"+"<img class='micro_view_icon' width='80' title='MicroView' src='"+base_url+"images/kol_images/resized/"+value.profile_image+"'>"+" <br /> <a target='_new' href='"+base_url+"organizations/view/"+value.id+"'><img width='80' height='20' style='padding-left:1px;' src='"+base_url+"images/view.gif'/></a></div>"+"<div id=addrssInfo>"+"<b>"+value.name+"<br/></b><br/>"+value.address+"<br/>"+value.city+", "+value.postal_code+" <br/>"+value.region+" "+value.country+"</div> " ;; //information you want to display in the infobox
                                   // pin1.Description = "<div id=kolImage>"+value.resp_name+value.resoLat+"</div>";
                                pinLayer.push(pin1); //add pushpin to pinLayer
                                if(agent!='Apple iPad'){
                                    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
                                    Microsoft.Maps.Events.addHandler(pin1, 'mouseover', pinMouseOver);
                                    Microsoft.Maps.Events.addHandler(pin1, 'mouseout', pinMouseOut);
                                }else{
                                    pin1.ipad=true;
                                    Microsoft.Maps.Events.addHandler(pin1, 'click', showInfoBox);
                                }
                             // setTimeOut("canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang)",200);
                                //Canvas Image
                              setTimeout(function(){
                                  canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang);
                              }, 1000);
                                
                                
                             });
                         });
                        map.entities.push(pinLayer);
                        map.entities.push(infoboxLayer);
                        $('#surveyMapsContent').unblock();
                    }
                });
            //}else{
            //    jAlert('Query name should not be empty');
            //}
        }

    Thanks in advance

    Vinayak


    • Edited by Ricky_Brundritt Wednesday, August 27, 2014 8:24 AM removed bing maps key
    Wednesday, August 27, 2014 4:17 AM
  • It happiness only in I PAD and works fine for Other Browsers
    Wednesday, August 27, 2014 4:24 AM
  • What does this do:

    setTimeout(function(){
       canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang);
    }, 1000);
    

    Everything looks fine until this line. There isn't any information about this.

    As for creating a lot of canvas pushpins, which I don't see in your code. That would be fairly intensive and would generate a lot of extra DOM elements. The canvas pushpins should be used sparingly.


    http://rbrundritt.wordpress.com

    Wednesday, August 27, 2014 8:33 AM
  • Hi ,

    setTimeout(function(){
       canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang);
    }, 1000);

    Above code added because, the canvas image id was taking some time to genearte.

    But i have commented that and tried but still it is not working

    I will paste complete code here..

    function getSurveyGeoData(){
            
            //animateMicroviewBoxHide();
            //$("#map-log").html("");
            //$('#surveyMapsContent').block({ message: ' ',overlayCSS: { backgroundColor: '#F7F7F7',cursor:'default'},css:{ backgroundImage:'url(../images/ajax-loader-round.gif)',backgroundPosition:'center',backgroundRepeat:'no-repeat',backgroundColor:'transparent',border:'0px',height:'30%',cursor:'default'}});

         
            
            map = new Microsoft.Maps.Map(document.getElementById("surveyMap"), {credentials: apiKey,mapTypeId: Microsoft.Maps.MapTypeId.road,enableSearchLogo:false,enableClickableLogo:false});
                    
            map.setView({ zoom:4, center: new Microsoft.Maps.Location(39.2102, -81.6642) });
            
            var pin, img;
           
              //Register and load the Canvas Pushpin Module
                Microsoft.Maps.registerModule("CanvasPushpinModule", base_url+"/js/surveys/canvas.js");
                Microsoft.Maps.loadModule("CanvasPushpinModule", {
                    callback: function () {
                        //Create Canvas Entity Collection
                        canvasLayer = new CanvasLayer();
                        map.entities.push(canvasLayer);

                        //Create the canvas pushpins
                        createCanvasPins();
                }});
        }
        
        var kol1={};
        var kols={};
        function createCanvasPins(){
            
            var pinInfoBox;  //the pop up info box
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            var pinLayer = new Microsoft.Maps.EntityCollection();
          //  var apiKey = "Ar8w95fg_ASilxr_0WM12V18M3vRQ9RC3hE0zbHzvXztyzbURm9qK7x5JEt3yn2b";
         //
          //  map = new Microsoft.Maps.Map(document.getElementById("surveyMap"), {credentials: apiKey});
            
            map.setView({ zoom:4, center: new Microsoft.Maps.Location(39.2102, -81.6642) })
            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);
            
            var method = base_url+'surveys/get_geo_influence_data';
            
            //var queryName    = $.trim($('#chartFooter').find('td:eq(1) input[type="text"]').val());
            //if(queryName!=""){
                
                
            var data    = $('#searchFiltersContainer').find('form').serialize();
            data        += '&survey_id='+surveyId;
                $.ajax({
                    type: "post",
                    dataType:"json",
                    data: data,
                    url: base_url+'surveys/get_geo_influence_data',
                    success: function(returnData){
                
                        //if(returnData.selectedState!=''){
                            // map.setView({ zoom:6, center: new Microsoft.Maps.Location(returnData.selectedState.selectedLat, returnData.selectedState.selectedLang) })
                        //}
                        if(returnData.kols==null){
                            
                             $('#surveyMapsContent').block({message: 'No KOLS found ',width:'200px'});
                             return false;
                        }
                        if(returnData.kols!=null){
                            kols1 = returnData;
                            kols=JSON.stringify(returnData.kols) ;
                        }
                        
                        var pushpinOptions = {icon: base_url+'/images/image1.png', width: 30, height: 50};
                        $.each(returnData,function(key,value){
                            //Loop through each kol and get the Latitude and Longitude
                            $.each(value,function(key,value){
                                //create a point by setting the Latitude and Longitude values
                                //var point = new GLatLng(value.Latitude, value.Longitude);
                                var offset = new Microsoft.Maps.Point(0, 5);
                                //var pushpinOptions = {icon: "http://localhost/kolm_otsuka/images/user3.png", visible: true, textOffset: offset };
                                //var pushpinOptions = {width: null, height: null, htmlContent: "<div class='tooltip-demo tooltop-right microViewIcon Male'><a class='tooltipLink' rel='tooltip' href='#' data-original-title='Profile Snapshot'>&nbsp</a></div>"};    
                                var latLon = new Microsoft.Maps.Location(value.nomineLat, value.nominelang);
                                var pin = new Microsoft.Maps.Pushpin(latLon,pushpinOptions);
                                pin.id = value.id;//usually title of the infobox
                                pin.type = 'nominee';
                                pin.name = value.nom_name;
                                pinLayer.push(pin);
                                
                                if(agent!='Apple iPad'){
                                      Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                                      /*  Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayEventInfo);
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseout', function clear(){
                                        //    pinInfobox.setOptions({visible:false});
                                            clearTimeout(myTimer);
                                            setTimeout(clear1,1000);
                                        });*/
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);
                                        Microsoft.Maps.Events.addHandler(pin, 'mouseout', pinMouseOut);
                                        
                                }else{
                                    pin.ipad=true;
                                    Microsoft.Maps.Events.addHandler(pin, 'click', showInfoBox);
                                }
                                
                                var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(value.nomineLat, value.nominelang),new Microsoft.Maps.Location(value.resoLat,value.resoLang)], {strokeThickness:1,strokeColor: new Microsoft.Maps.Color(200, 0, 0, 255)},null);
                                
                                //map.setView( {zoom:8});
                                map.entities.push(polyline);
                      
                                var latLon1 = new Microsoft.Maps.Location(value.resoLat,value.resoLang);
                                var pin1 = new Microsoft.Maps.Pushpin(latLon1,pushpinOptions);
                                // pin.Title = name;//usually title of the infobox
                                //pin.Description = "<div id=kolImage>"+"<img class='micro_view_icon' width='80' title='MicroView' src='"+base_url+"images/kol_images/resized/"+value.profile_image+"'>"+" <br /> <a target='_new' href='"+base_url+"organizations/view/"+value.id+"'><img width='80' height='20' style='padding-left:1px;' src='"+base_url+"images/view.gif'/></a></div>"+"<div id=addrssInfo>"+"<b>"+value.name+"<br/></b><br/>"+value.address+"<br/>"+value.city+", "+value.postal_code+" <br/>"+value.region+" "+value.country+"</div> " ;; //information you want to display in the infobox
                                pin1.id = value.id;//usually title of the infobox
                                pin1.type = 'respondent';
                                pin1.name = value.resp_name;
                                //pin.Description = "<div id=kolImage>"+"<img class='micro_view_icon' width='80' title='MicroView' src='"+base_url+"images/kol_images/resized/"+value.profile_image+"'>"+" <br /> <a target='_new' href='"+base_url+"organizations/view/"+value.id+"'><img width='80' height='20' style='padding-left:1px;' src='"+base_url+"images/view.gif'/></a></div>"+"<div id=addrssInfo>"+"<b>"+value.name+"<br/></b><br/>"+value.address+"<br/>"+value.city+", "+value.postal_code+" <br/>"+value.region+" "+value.country+"</div> " ;; //information you want to display in the infobox
                                   // pin1.Description = "<div id=kolImage>"+value.resp_name+value.resoLat+"</div>";
                                pinLayer.push(pin1); //add pushpin to pinLayer
                                if(agent!='Apple iPad'){
                                    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
                                    Microsoft.Maps.Events.addHandler(pin1, 'mouseover', pinMouseOver);
                                    Microsoft.Maps.Events.addHandler(pin1, 'mouseout', pinMouseOut);
                                }else{
                                    pin1.ipad=true;
                                    Microsoft.Maps.Events.addHandler(pin1, 'click', showInfoBox);
                                }
                             // setTimeOut("canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang)",200);
                                //Canvas Image
                             // setTimeout(function(){
                                  canvas(value.resoLat,value.resoLang,value.nomineLat, value.nominelang);
                              //}, 1000);
                                
                                
                             });
                         });
                        map.entities.push(pinLayer);
                        map.entities.push(infoboxLayer);
                        $('#surveyMapsContent').unblock();
                    }
                });
            //}else{
            //    jAlert('Query name should not be empty');
            //}
        }
        
        function canvas(resoLat,resoLang,n1,n2){
            
             
            pin = new CanvasPushpin(new Microsoft.Maps.Location(resoLat,resoLang), function (pin, context) {
                 $('#hidden').focus();
                img = new Image();
                img.src = base_url+'images/bluearrow.png';
                img.onload = function () {
                    //alert(context);
                    if (context) {
                        //alert("in");
                        var angle = calculateBearing(n1, n2,resoLat,resoLang);
                        //Calculate the new dimensions of the the canvas after the image is rotated
                        var dx = Math.abs(Math.cos(angle * Math.PI / 180));
                        var dy = Math.abs(Math.sin(angle * Math.PI / 180));                              
                        var width = Math.round(img.width * dx + img.height * dy);
                        var height = Math.round(img.width * dy + img.height * dx);
                        
                        //Set the dimensions of the canvas
                        context.width = width;
                        context.height = height;
                        
                        //Offset the canvas such that we will rotate around the center of our arrow
                        //context.translate(width * 0.5, height * 0.5);
                        //context.translate(width * 0.5, height * 0.5);
                        //Rotate the canvas by the desired heading
                        //alert(pin.Metadata.heading * Math.PI / 180);
                        //context.rotate(90* Math.PI / 180);

                        //Return the canvas offset back to it's original position
                    //    context.translate(-img.width * 0.5, -img.height * 0.5);

                        //Draw the arrow image
                    //    context.drawImage(img, -15,23);
                        //context.drawImage(img,0,0);
                        context.save();
                        context.translate(5,30);
                        

                        context.translate(img.width/2, img.height/2);
                        
                        
                        context.rotate(angle * Math.PI / 180);
                        context.drawImage(img, -img.width/2, -img.height/2);
                        context.restore();                            //context.drawImage(img,0,35);
                    }else{
                        
                        $('#mapButton').click();
                    }
                    
                };
            });

            //Give the pushpin a random heading
            pin.Metadata = {
                heading: Math.random() * 360
            };

            canvasLayer.push(pin);
            
        }
        
        function calculateBearing(lat1,lang1,lat2,lang2){    
            var latlong1={};
            var latlong2={};
        
            latlong1.Latitude = lat1;
            latlong1.Longitude =lang1;
            
            latlong2.Latitude = lat2;
            latlong2.Longitude =lang2;
            var lat1 = DegtoRad(latlong1.Latitude);    
            var lon1 = latlong1.Longitude;    
            var lat2 = DegtoRad(latlong2.Latitude);    
            var lon2 = latlong2.Longitude;    
            var dLon = DegtoRad(lon2-lon1);    
            var y = Math.sin(dLon) * Math.cos(lat2);    
            var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);

            var brng = (RadtoDeg(Math.atan2(y, x))+360)%360;    
            return brng;
        }

        function DegtoRad(x){
            return x*Math.PI/180;
        }

        function RadtoDeg(x){
            return x*180/Math.PI;
        }
        
         function hide(e){
                
             var polygon= map.entities.get(map.entities.getLength()-1);
             //set the visible property to true to view polygon
            // polygon.setOptions({visible: false});
       }

    Thursday, August 28, 2014 4:27 AM
  • Hi ,

    Following is my observation..

    First it will generate the map with Pushpins and draw the connection between Pushpins using poly lines.once it is done, before it start drawing canvas image on map, it is coming out of the browser(Browser is getting closed).

    Thanks

    Vinayak

    Thursday, August 28, 2014 6:26 AM
  • Try using some break points in your code to figure out which line of code is causing the crash.

    http://rbrundritt.wordpress.com

    Friday, August 29, 2014 9:33 AM