CODEWITHSUNDEEP
javascriptvue.jshere-api
Tony
Tony

Reputation: 1432

How to close an info bubble when there is a click outside the info bubble and marker - HERE maps API

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')
    });

Upvotes: 1

Views: 1288

Answers (2)

Tomas
Tomas

Reputation: 1887

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();
  }
}
    ```

Upvotes: 0

Raymond Camden
Raymond Camden

Reputation: 10857

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

});

Upvotes: 1

Related Questions