none
Ie8 - Canvas Pushpin is not working RRS feed

  • Question

  • Hi

    Canvas arrow mark image is not showing in IE8. earlier it was working but now it is not working.

    Please help me

    Thanks

    Vinayak

    Monday, July 14, 2014 12:47 PM

Answers

  • IE8 does not support the HTML5 canvas. To get around this you need to add in the explorer canvas which will add support for the HTML5 canvas in IE7 & 8: http://code.google.com/p/explorercanvas/

    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 1:28 PM
  • First issue is it doesn't look like you have a reference to Bing Maps. YoOu have a reference to :

    <script language="javascript" type="text/javascript" src="</script">http://localhost/kolm/js/maps/map.js"></script>

    but this isn't the Bing Maps control and unless you downloaded and modified all the JavaScript files for Bing Maps it's unlikely you have a local reference of Bing Maps. Update this to:

    <script type="text/javascript" src="</script">http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    I see that you are referencing a JS file called "canvas.js". I'll assume you renamed the file from "CanvasPushpinModule.js".

    I made a few minor modifications to the app to reference local copies of the excanvas and canvas pushpin module, however the only changes where the path to the files so this shouldn't make a difference. Running the app in IE11 it worked fine for me. The alert for the context was "[object CanvasRenderingContext2D]". Running it through the IE8 emulator in IE11 did fail, but after testing of several other projects that use excanvas that I know work in IE8 I also found that they didn't work in the emulator in IE11. This looks to be an issue with the emulator that doesn't occur in IE8.

    Note that the location you are using for your pushpin is "12.983,77.583" which is not in the USA, but on the other side of the globe in India. You will have to zoom out the map to see the generated pushpin.


    http://rbrundritt.wordpress.com


    Tuesday, July 15, 2014 10:29 AM
  • Have you looked at my last response? If you are testing using an IE8 emulator such as the IE developer tools there seems to be a bug in the emulator. This does not appear to be an issue with actual IE8. So your app won't work in the IE8 emulator but will likely work in IE8. This is based on the fact that every app I tried that uses the explorer canvas and has worked for years on IE8, does not appear to work in the IE emulator. Also, it's worth noting that majority of users on IE8 are also running Windows XP and are more than likely businesses that are in the process of upgrading their OS version, thus making them unlikely to use your site from IE8.

    http://rbrundritt.wordpress.com

    Thursday, July 17, 2014 10:46 AM

All replies

  • IE8 does not support the HTML5 canvas. To get around this you need to add in the explorer canvas which will add support for the HTML5 canvas in IE7 & 8: http://code.google.com/p/explorercanvas/

    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 1:28 PM
  • Hi Ricky,

    I have used Excanvas only..it is not working..

    whan i alert value of context it is giving null value..it works fine in Firefox

    <!--[if (IE)]>
        <script language="javascript" type="text/javascript" src="<?php echo base_url()?>js/excanvas.js"></script>
    <![endif]-->

        pin = new CanvasPushpin(new Microsoft.Maps.Location(value.resoLat,value.resoLang), function (pin, context) {
                                alert(context);
                                img = new Image();
                                img.src = base_url+'images/bluearrow.png';
                                img.onload = function () {
                                    
                                    if (context) {
                                        var angle = calculateBearing(value.nomineLat, value.nominelang,value.resoLat,value.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
                                        //jAlert(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);
                                    }
                                };
                            });
                             map.entities.push(polyline);

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

                            canvasLayer.push(pin);

    Tuesday, July 15, 2014 4:15 AM
  • Hi,,

    For you reference i ma sending full code here.


          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--[if lt IE 9]><script type="text/javascript" src="http://localhost/kolm/js/excanvas.js"></script><![endif]-->
        
        <script language="javascript" type="text/javascript" src="http://localhost/kolm/js/maps/map.js"></script>

          <script type="text/javascript">
          var base_url="http://localhost/kolm/";
            function GetMap(){
            alert("ss");
            var apiKey = "BING_MAPS_KEY";
     
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: apiKey,mapTypeId: Microsoft.Maps.MapTypeId.road,enableSearchLogo: false,showDashboard:true,showScalebar: 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();
                }});
               
          }
         
              function createCanvasPins(){
        
            var pinInfoBox;  //the pop up info box
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            var pinLayer = new Microsoft.Maps.EntityCollection();
            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);
           
          

                            pin = new CanvasPushpin(new Microsoft.Maps.Location(12.983,77.583), function (pin, context) {
                                alert(context);
                                img = new Image();
                                img.src = base_url+'images/bluearrow.png';
                                img.onload = function () {
                                    
                                    if (context) {
                                        var angle = calculateBearing(15.3544, 75.1376,12.983,77.583);
                                        //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
                                        //jAlert(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);
                                    }
                                };
                            });
                        

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

                            canvasLayer.push(pin);
                            
                
            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);
       
    }
        
     
         function clear1(){
             pinInfobox.setOptions({visible:false});
         }
        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;
        }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="; width:600px; height:600px;"></div>
       </body>
    </html>


    • Edited by Ricky_Brundritt Tuesday, July 15, 2014 10:02 AM Removed Bing Maps Key
    Tuesday, July 15, 2014 7:38 AM
  • First issue is it doesn't look like you have a reference to Bing Maps. YoOu have a reference to :

    <script language="javascript" type="text/javascript" src="</script">http://localhost/kolm/js/maps/map.js"></script>

    but this isn't the Bing Maps control and unless you downloaded and modified all the JavaScript files for Bing Maps it's unlikely you have a local reference of Bing Maps. Update this to:

    <script type="text/javascript" src="</script">http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    I see that you are referencing a JS file called "canvas.js". I'll assume you renamed the file from "CanvasPushpinModule.js".

    I made a few minor modifications to the app to reference local copies of the excanvas and canvas pushpin module, however the only changes where the path to the files so this shouldn't make a difference. Running the app in IE11 it worked fine for me. The alert for the context was "[object CanvasRenderingContext2D]". Running it through the IE8 emulator in IE11 did fail, but after testing of several other projects that use excanvas that I know work in IE8 I also found that they didn't work in the emulator in IE11. This looks to be an issue with the emulator that doesn't occur in IE8.

    Note that the location you are using for your pushpin is "12.983,77.583" which is not in the USA, but on the other side of the globe in India. You will have to zoom out the map to see the generated pushpin.


    http://rbrundritt.wordpress.com


    Tuesday, July 15, 2014 10:29 AM
  • Thanks for replying..

    I have taken updated script as per your suggestions but still it is not working..

    and for testing I also download recent scripts from http://bingmapsv7modules.codeplex.com/SourceControl/latest and exucted but in ie8 it is not working..

    following is the code which i tried to show CanvasPushpin with Arrow example

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <!--[if lt IE 9]><script type="text/javascript" src="http://localhost/kolm/js/excanvas.js"></script><![endif]-->
          <script type="text/javascript">
              var map, canvasLayer;

              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                      credentials: "BING_MAPS_KEY"
                  });

                  //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                     callback: function () {
                          //Create Canavas Entity Collection
                          canvasLayer = new CanvasLayer(map);
                          map.entities.push(canvasLayer);

                          //Create the canvas pushpins
                          createCanvasPins();
                  }});
              }

            function createCanvasPins() {
                var pin, img;

                for (var i = 0; i < 100; i++) {

                    //Create a canvas pushpin at a random location
                    pin = new CanvasPushpin(new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180), function (pin, context) {
                        img = new Image();
                        img.onload = function () {
                            if (context) {
                                //Calculate the new dimensions of the the canvas after the image is rotated
                                var dx = Math.abs(Math.cos(pin.Metadata.heading * Math.PI / 180));
                                var dy = Math.abs(Math.sin(pin.Metadata.heading * 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);

                                //Rotate the canvas by the desired heading
                                context.rotate(pin.Metadata.heading * 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, 0, 0);
                            }
                        };
                        img.src = 'images/redArrow.png';
                    });

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

                    canvasLayer.push(pin);
                }
            }          
          </script>
        <style>
            /* Bug fix for mouse events on Polylines, Polygons and custom HTML pushpins in IE11 */
            .MicrosoftMapDrawing, .MapPushpinBase {
                pointer-events: auto !important;
            }
        </style>
       </head>
       <body onload="GetMap();">
            <div id='myMap' style=";width:800px;height:600px;"></div>
       </body>
    </html>

    Thanks in advance


    • Edited by Ricky_Brundritt Wednesday, July 16, 2014 3:16 PM Removing Bing MAps Key
    Wednesday, July 16, 2014 7:47 AM
  • Hi Ricky,

    Could you please tell  me solution??

    Thanks

    Vinayak

    Thursday, July 17, 2014 5:41 AM
  • Have you looked at my last response? If you are testing using an IE8 emulator such as the IE developer tools there seems to be a bug in the emulator. This does not appear to be an issue with actual IE8. So your app won't work in the IE8 emulator but will likely work in IE8. This is based on the fact that every app I tried that uses the explorer canvas and has worked for years on IE8, does not appear to work in the IE emulator. Also, it's worth noting that majority of users on IE8 are also running Windows XP and are more than likely businesses that are in the process of upgrading their OS version, thus making them unlikely to use your site from IE8.

    http://rbrundritt.wordpress.com

    Thursday, July 17, 2014 10:46 AM
  • Thanks for reply..

    i will download IE8 and test it without using emulator..hope it works in IE8

    Thanks

    Vinayak

    Friday, July 18, 2014 5:24 AM