Is there a way to programme bingmap's infobox close button? - bing-maps

Question

In the bingmaps documentation, you can add custom actions to the infobox. I would like to know if there's a similar way to program the default closeButton?
Ideally, I would like to be able to do something like this:
const infobox = new Microsoft.Maps.Infobox(selectedTipCoordinates, {
title: selectedTip.title,
description: selectedTip.description,
closeButton: () => console.log('hello')
});

Answer 1

Unfortunately close event handler could not be customized via InfoboxOptions object, so you could consider either to implement a custom HTML Infobox or override info window click handler. The following example demonstrates how to keep info window opened once close button is clicked and add a custom action:
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
title: "Title",
description: "Description",
actions: [
{
label: "Handler1",
eventHandler: function() {
console.log("Handler1");
}
},
{
label: "Handler2",
eventHandler: function() {
console.log("Handler2");
}
},
{
label: "Handler3",
eventHandler: function() {
console.log("Handler3");
}
}
]
});
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(infobox, 'click', handleClickInfoBox);
}
function handleClickInfoBox(e){
var isCloseAction = e.originalEvent.target.className == "infobox-close-img";
if(isCloseAction){
//keep info window open..
e.target.setOptions({visible: true});
//apply some custom actions..
console.log("Close button clicked");
}
}
body{
margin:0;
padding:0;
overflow:hidden;
}
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=&callback=loadMapScenario' async defer></script>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>

Answer 2

No, I don't think there's a way to wire the behavior of default close button differently. That said, you can approximate the desired outcome with a little more work: creating a custom infobox with the same style and then you'll have 100% control:
e.g. (notice the onClick handler on the close button div):
var center = map.getCenter();
var infoboxTemplate = '<div class="Infobox" style=""><a class="infobox-close" href="javascript:void(0)" onClick="function test(){ alert(\'test!\'); } test(); return false;" style=""><img class="infobox-close-img" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE0cHgiIHdpZHRoPSIxNHB4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Ik03LDBDMy4xMzQsMCwwLDMuMTM0LDAsN2MwLDMuODY3LDMuMTM0LDcsNyw3YzMuODY3LDAsNy0zLjEzMyw3LTdDMTQsMy4xMzQsMTAuODY3LDAsNywweiBNMTAuNSw5LjVsLTEsMUw3LDhsLTIuNSwyLjVsLTEtMUw2LDdMMy41LDQuNWwxLTFMNyw2bDIuNS0yLjVsMSwxTDgsN0wxMC41LDkuNXoiLz48L3N2Zz4=" alt="close infobox"></a><div class="infobox-body" style="max-width: 256px; max-height: 126px; width: 125px;"><div class="infobox-title" >{title}</div><div class="infobox-info" style=""><div>{description}</div></div><div class="infobox-actions" style="display: none;"><ul class="infobox-actions-list"><div></div></ul></div></div><div class="infobox-stalk" style="top: 73.8px; left: 55.5px;"></div></div>';
var infobox = new Microsoft.Maps.Infobox(center, {
htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription'),
offset: new Microsoft.Maps.Point(-64, 16)
});