Heremaps Infobubble CSS does not change-CodePudding

so I looked up every possible solution for changing the CSS style of the infoBubble for heremaps. I work with Angular v8 and thus far only setting the css of the Data has worked for me, but that does not influence the color of the marker.

const marker = new H.map.Marker(position);
marker.setData("<div style='width: 100px'>Hello world!</div>");

marker.addEventListener("tap", event => {const b = new H.ui.InfoBubble(event.target.getPosition(), {content: event.target. getData()}); this.ui.addBubble(b);}, false);

this.map.addObject(marker);

This css code did not work for me:

background-color: yellow;
height: 275px;
}

Anyone know as to why it is not working?

CodePudding user response：

the code you provided doesn't have any CSS style applied to it. The only CSS that is applied is the inline style on the element in the marker.setData() method. To apply a CSS style to the infoBubble, you will need to target the element using a selector and then apply the style using the .style property. example:

const marker = new H.map.Marker(position);
marker.setData("<div style='width: 100px'>Hello world!</div>");

marker.addEventListener("tap", event => {
  const b = new H.ui.InfoBubble(event.target.getPosition(), {
    content: event.target.getData()
  });
  this.ui.addBubble(b);
  // Target the infoBubble and apply the style
  document.querySelector('.h-info-bubble').style.backgroundColor = 'yellow';
}, false);

this.map.addObject(marker);

You can also use a class or ID selector to target the infoBubble and apply the style using a stylesheet. You can learn more about CSS selectors and how to apply styles in CSS here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors.