I am facing issues using infobubble with mouseover and mouseleave. I want show info window on mouseover and close info window on mouseleave in here map.
Asked
Active
Viewed 225 times
0
-
Hi, Can you please be more specific about your use case.? For your reference I am giving you few links to check out. – Sep 15 '21 at 10:51
-
1Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Sep 16 '21 at 04:51
2 Answers
0
Though your use case is not so clear however you can follow the below example links which will help you to use info bubbles in HERE MAP with mouse events.
https://tcs.ext.here.com/examples/v3.1/several_markers
Documentation guide for javascript https://developer.here.com/documentation/maps/3.1.29.0/dev_guide/topics/marker-objects.html
The code below shows how to add an info bubble to the map display. It creates an instance of InfoBubble, specifying the geographic coordinates of the location at which it should appear, and the HTML content, which in this case is the text string "Hello World!" in bold. The last line adds the info bubble object to the UI instance.
// Create an info bubble object at a specific geographic location:
var bubble = new H.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
content: '<b>Hello World!</b>'
});
// Add info bubble to the UI:
ui.addBubble(bubble);
https://developer.here.com/documentation/maps/3.1.29.0/dev_guide/topics/map-controls-ui.html
https://developer.here.com/blog/here-xyz-and-maps-api-for-javascript
0
You can use these event listeners. I have used "pointermove" to show the info bubble and timer to close it.
group.addEventListener('pointermove', function (e) {
const xy = map.geoToScreen(e.target.getGeometry());
let bubble = new H.ui.InfoBubble(map.screenToGeo(xy.x, xy.y - 30),{
content: "content to show in the bubble"
});
ui.addBubble(bubble)
setTimeout(() => {
bubble.close()
}, 700)
}, false);
