How to pass mouse events through canvas overlay, and invoke bing maps v8 mouse events RRS feed

  • Question

  • Hi, I'm creating an application that has an html5 canvas overlay on top of bing maps.

    Currently I'm registering the handlers so that I can console.log and verify the bing maps events are firing, and it looks like my event passthrough is working.

    Microsoft.Maps.Events.addHandler(map, 'click', function () { 
         console.log('BING: mapClick'); 
     Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { 
          console.log('BING: mapMouseDown'); 
     Microsoft.Maps.Events.addHandler(map, 'mouseup', function () { 
          console.log('BING: mapMouseUp'); 
     Microsoft.Maps.Events.addHandler(map, 'mousemove', function () { 
          console.log('BING: mapMouseMove'); 

    And on the canvas overlay:

    canvas.on('mouse:down', function(options) {
                  if ( {
                    console.log('CANVAS: an object was clicked! ',;
                  } else {
                    console.log('CANVAS: map mousedown was invoked! ', map);
                    Microsoft.Maps.Events.invoke(map, 'mousedown');

                canvas.on('mouse:up', function(options) {
                  if ( {
                    console.log('CANVAS: an object was mouseUpped! ',;
                  } else {
                    console.log('CANVAS: map mouseup was invoked! ', map);
                    Microsoft.Maps.Events.invoke(map, 'mouseup');

                canvas.on('mouse:move', function(options) {
                  if ( {
                    console.log('CANVAS: an object was mouseMoved?! ',;
                  } else {
                    console.log('CANVAS: map mousemove was invoked! ', map);
                     Microsoft.Maps.Events.invoke(map, 'mousemove', options.e);  options.e = MouseEvent {isTrusted: true, screenX: 420, screenY: -520, clientX: 348, clientY: 491…}

    The events exposed via the Bing API are getting called, as I have verified this in my console.

    The question I have is, what parameters do I need to pass when I invoke the 'mousemove' event exposed via the Bing Maps API in order to actually get the map to move, via this passthrough overlay event trigger? 

    Do I need to get the pixel location, and convert it into a Microsoft.Maps.Location object, and pass that as an arg to the invocation? 

    I've looked at the documentation here:

    And it says the signature is: 

    invoke(target:object, evenName:string,args:object)  (there is a misspelling in your docs, btw -- evenTname is missing a 't').

    So it appears that I would be invoking this correctly... Any tips on how to resolve this would be greatly appreciated. We'd like our customers to be able to use our annotation framework seamlessly with the new API, without having to "toggle" the overlay off and on. 

    Thanks in advance!

    Tuesday, June 28, 2016 6:34 PM


All replies

  • This isn't supported and won't work, even if you do pass in correct information into the invoke functions, as those only trigger event handlers you attached to the map and not the native event handlers for the map itself. We will be exposing a way to create custom rendering layers using a Canvas or DOM elements in a few months.

    What kind of rendering are you trying to achieve that requires using an HTML5 canvas? The map already renders everything using an HTML5 canvas.

    [Blog] [twitter] [LinkedIn]

    Tuesday, June 28, 2016 9:46 PM
  • I'm building annotations that indicate property locations, as well as various data points about the properties. The annotations themselves look like a speech bubble, essentially, where the "bubble" contains property data, and the "tail" is a pointer to the property location on the map. The "bubble" can be moved, rotated, resized, etc, independently of the tail, which can also be moved, and rotates around the "bubble" so that the users of the program can "customize" their annotation layout. Users can also "free draw", highlight areas (which I'll be using the v8 api's drawing tools to do), add icons, and customize the colors of their annotations.

    Our company is porting a desktop product to the web, and the desktop product uses Atalasoft's SDK to do the annotations currently. I'm trying to replace that with a framework that functions on the web. I hope that clarifies things.

    Are you suggesting that the canvas layer that I'm using as an "overlay" is unnecessary?

    From what I could find in the documentation and prototyping, I'm not able to achieve this level of customization solely from using the v8 API. I'd LOVE to be wrong about that, by the way!

    But I just couldn't figure out a way to place custom canvas elements inside the bing map, and then programmatically access everything that I need to about them in order to provide the functionality that I need to provide. I was able to use canvas to draw images for pushpins, then place them on the map, but that's about as much as I was able to accomplish, in regard to integrating these annotations with the bing maps canvas.

    Thanks for the reply, by the way! :)

    Tuesday, June 28, 2016 11:10 PM
  • What might be a good option, is to use the Infobox class. It is similar to annotations, but doesn't have all the customizations you mentioned, but does support custom HTML which you could use to create what you are trying to achieve. Here are a few basic examples:

    If the user doesn't need to be able to change the shape of the annotation, you could also use a custom pushpin and inline SVG:

    Another option, is to display a custom canvas like you are doing during the editing process, but once editing it done, display the rendered annotation as an infobox of pushpin. Here is an example of using an Canvas to generate a pushpin:

    [Blog] [twitter] [LinkedIn]

    Wednesday, June 29, 2016 6:10 PM
  • Was there any better resolution to this yet?  We are adding custom SVG drawing on top of the Bing map, which works; however, when our CustomOverlay DOM element is beneathLabels we don't get the proper mouse events and when not beneathLabels, than the map cannot pan.


    Monday, January 29, 2018 5:33 AM