1

I have been trying to close an info bubble when the map only is clicked, but I can't achieve it.

I have tried the following

this.map.addEventListener("tap", this.handleMapClick);

    private handleMapClick(evt: Event) {
      this.clearOpenInformationBubble();
    }

However, the tap event is triggered even when maps objects are clicked meaning that the info bubble remains closed when I click a marker.

I have also tried to add a 'blur' event listener to the bubble element, but that doesn't seem to work

const bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
      content: ...
    });

    this.ui.addBubble(bubble);

    bubble.getElement().focus()

    bubble.getElement().addEventListener('blur', evt => {
      this.clearOpenInformationBubble();
    })

I was wondering if there is a way to listen for an event triggered by a map ONLY tap.

Here's a similar implementation in Google maps.

    google.maps.event.addDomListener(map, "click", function() {
      alert('Map clicked')
    });
10 Rep
  • 2,217
  • 7
  • 19
  • 33
Tony
  • 1,414
  • 3
  • 9
  • 22

2 Answers2

1

I think I'd try the answer here. In this answer, they wanted to close any other open infobubbles first. I believe if you remove the event listener on your group, keep the one on your map, and always remove open infobubbles you would be good. Then add logic to see if the event target value has data and show an infobubble.

This assumes your doing infobubbles based on markers having a data object associated with them.

Edit: I was able to get this to work - again assuming your use case is markers to infobubbles.

map.addEventListener('tap', evt => {
    ui.getBubbles().forEach(bub => ui.removeBubble(bub));

    if(!evt.target.getData) return;
    // for all objects that it contains
    var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
        // read custom data
        content: evt.target.getData()
    });
    // show info bubble
    ui.addBubble(bubble);

});
10 Rep
  • 2,217
  • 7
  • 19
  • 33
Raymond Camden
  • 10,661
  • 3
  • 34
  • 68
  • Thank you. This worked. It's not an ideal solution as you rightly pointed out, because it falls apart if a marker isn't used to open the info-bubble. However, it works, and it's the best I have got now. – Tony Jul 20 '20 at 21:24
0

You can check the event target in the callback function.

If it is the map, then only you close the InfoBubble:

this.map.addEventListener("tap", this.handleMapClick);

private handleMapClick(evt: Event) {
  if (evt.target === this.map) {
    this.clearOpenInformationBubble();
  }
}
    ```
Tomas
  • 1,849
  • 1
  • 13
  • 13