CODEWITHSUNDEEP
eventscanvasbing-mapspushpin
savan_03
savan_03

Reputation: 67

Set events on canvas pushpin of Bing Map

I am facing one issue while setting event on Pushpin which was created by canvas. To set the environment please goto Bing Map - Pushpin Event Example. And copy below code in Javascript tab and run the example.

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    icon: createRedArrow(110),
    anchor: new Microsoft.Maps.Point(12, 12)
});
map.entities.push(pushpin);
function createRedArrow(heading) {
    var c = document.createElement('canvas');
    c.width = 24;
    c.height = 24;
    var ctx = c.getContext('2d');
    // Offset the canvas such that we will rotate around the center of our arrow
    ctx.translate(c.width * 0.5, c.height * 0.5);
    // Rotate the canvas by the desired heading
    ctx.rotate(heading * Math.PI / 180);
    //Return the canvas offset back to it's original position
    ctx.translate(-c.width * 0.5, -c.height * 0.5);
    ctx.fillStyle = '#f00';
    // Draw a path in the shape of an arrow.
    ctx.beginPath();
    ctx.moveTo(12, 0);
    ctx.lineTo(5, 20);
    ctx.lineTo(12, 15);
    ctx.lineTo(19, 20);
    ctx.lineTo(12, 0);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    // Generate the base64 image URL from the canvas.
    return c.toDataURL();
}

// Binding the events
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { highlight('pushpinClick'); });
Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', function () { highlight('pushpinDblclick'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { highlight('pushpinMousedown'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () { highlight('pushpinMouseout'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { highlight('pushpinMouseover'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', function () { highlight('pushpinMouseup'); });
// Setting up the printout panel
document.getElementById('printoutPanel').innerHTML =
    '<div id="pushpinClick">click</div><div id="pushpinDblclick">dblclick</div><div id="pushpinMousedown">mousedown</div><div id="pushpinMouseout">mouseout</div><div id="pushpinMouseover">mouseover</div><div id="pushpinMouseup">mouseup</div>';
function highlight(id) {
    document.getElementById(id).style.background = 'LightGreen';
    setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
}

You can notice that all pushpin events are working on canvas's width/height (24/24) area as shown in below image enter image description here

And as per my requirement events should only work on drawn part of canvas and also canvas w/h will be like 100. So, how do I achieve that?

Also, if two or more pushpins are nearer (see below image) and if both canvas are overlap to each other then how we can identify both pushpins are different for pushpin event?

enter image description here

Here, I have provided my requirement with Bing Map's exisiting example. But here is actual pushpin secnario.

Upvotes: 0

Views: 361

Answers (1)

rbrundritt
rbrundritt

Reputation: 18013

Unfortunately this is a limitation in how pushpins are rendered in Bing Maps. There is an option to modify the click area to be round rather than square which will help a bit here. See the roundClickableArea pushpin option: https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/pushpinoptions-object

Upvotes: 0

Related Questions