none
Problem while attaching event in Firefox and Chrome using HTML5 Canvas Pushpins in JavaScript RRS feed

  • Question

  • I implemented the canvas multi-colored pushpin, but while attaching events like mouseover, click etc…. for pushpins to display infobox I’m having trouble. I have attached infobox on mouseover of pushpin, but it doesn’t works for Chrome or Firefox(latest versions) but it works fine for IE9+.

    Firefox and chrome(latest versions) do not fire the displayInfobox event at all. Used an alert in the function to confirm the same. I don't know where I'm going wrong.

    Note -: pushpin is created using the same logic as yours createCanvasPins function and transparent image

    // Create the infobox for the pushpin
     pinInfobox = new Microsoft.Maps.Infobox(location,
     {
     title: ‘Test’,
    description: ‘Test Description’,
    visible: false,
     offset: new Microsoft.Maps.Point(0, 15)
     });

    Microsoft.Maps.Events.addHandler(pushpin, ‘mouseover’, displayInfobox);

    function displayInfobox(e) {
     alert(“Infobox called”);
    if (e.targetType == ‘pushpin’) {
     //some logic here
     }
     }

    Any help would be greatly appreciated.

    Tuesday, June 11, 2013 10:54 AM

Answers

All replies

  • I also tried integrating your CustomInfoBox solution with HTML5 Canvas solution but still the problem remains the same. Here is what I did.

     function createCanvasPins(canvasLayer) {


    for (var i = 0; i < 100; i++) {
                      //Create an instance of the custom infobox control and set intial options
                      customInfobox = new CustomInfobox(map, { orientation: 1, color: '#ccc', arrowWidth: 20 });

                      //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();

    //same code to draw transparent pushpin

     //Add some mock info about the pin
                      pin.title = "Pin 1";
                      pin.description = "This is the infobox for Pin 1.<br/><span style='color:red;'>Here is some custom HTML</span>";

                      //Add a handler for the pushpin click event.
                      Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                     
                      //Add the pushpin to the Canvas Entity Collection
                      canvasLayer.push(pin);
                  }
              }

    Rest of working is same as it is in CustomInfoBox solution. This works in IE9+ but still no progress in chrome or Firefox(latest versions).

    I really don't know where i'm going wrong. When I plot normal(without colored) pushpins everything works.

    I hope someone can help me point at right direction.

    Tuesday, June 11, 2013 1:06 PM
  • This issue has been discussed many times in this forum. Take a look at this post: http://social.msdn.microsoft.com/Forums/en-US/bingmapsajax/thread/90828af4-5e58-456a-ab37-9b8c5d0a9865

    http://rbrundritt.wordpress.com

    Tuesday, June 11, 2013 1:30 PM
  • Thanks for the quick reply. Your answer solved my problem.

    This is exactly what solved the problem, in case anyone else lands up with the same problem.

     //Add a handler for the pushpin click event.
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    //for firefox , chrome an other browsers
    $('#myMap').find('.MapPushpinBase').css('pointer-events', 'auto');
    //Add the pushpin to the Canvas Entity Collection
    canvasLayer.push(pin);


    Thanks! AhmedRaza

    Wednesday, June 12, 2013 5:18 AM