It is currently Mon Jun 25, 2018 4:20 am Advanced search

Pass event from overlayed div to Highmaps

Technical support, bug reports and more.

Pass event from overlayed div to Highmaps

Postby Menighin » Wed Mar 07, 2018 5:57 pm

Hi guys, me again n_n'

So,
I'm using Highmaps to show a simple map and over it I have another div with a component that draws things on top of the map (this has to be done this way, I cannot draw everything inside Highmaps, unfortunely).

Now I would like to have some interation with the map, although it is below my div. I would like to know if there is a way to trigger the click, hover, etc. events on the map when I click on the div on top of it.

I have searched Highmaps docs trying to find a method a-like trigger(ev, x, y) (like the mapZoom, that accepts mouse coordinates) but there seems to be none, right?. Then I tried a pure javascript solution using MouseEvent() and dispatchEvent() on the Map DOM, but it also didn't work.

I have set up a simple fiddle with what I want to work: http://jsfiddle.net/k11yfz58/1/

If we coment the #overlay div, we get an alert when we click in a state. I want the same behavior but clicking on the overlay div, is that possible?

It was suggested to use the pointer-events CSS property for this. That does not solve my problem because I also need the events to be triggered on the #overlay div.

Thanks!
Menighin
 
Posts: 22
Joined: Tue Feb 20, 2018 1:07 pm

Re: Pass event from overlayed div to Highmaps

Postby daniel_s » Fri Mar 09, 2018 1:19 pm

hi Menighin,

It is very problematic to achieve the effect that you described above, because there is Pointer element in Highcharts and it is controlling all clicks, mouse moves, mouse position etc, so if you place a div "over" the container and for example move your pointer over some point on the chart, the Pointer won't catch it.
I've to ask, why would you like to achieve that effect? Could you explain me more precisely what are you expecting?
Maybe you could privide me with some mock up graphic of effect that you need?

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 673
Joined: Fri Sep 01, 2017 1:01 pm

Re: Pass event from overlayed div to Highmaps

Postby Menighin » Mon Mar 12, 2018 1:38 pm

Hi Daniel, thanks for the answer.

So let me explain how I am using highmaps:
I am using Highmaps only for its capability of plotting a geojson and also because it allows me to position stuff on top of it using lat/long.

So currently I have map container and, on top of it, I have another div that holds an instance of another complex component (Vis Network to be more precisely). I use the map to position the nodes of my network on top of it and I also can drag around, zoom in and zoom out, but, as the network is drawn on top of the map, I am not being able to interact with it.

It all basically comes down to my fiddle above with a simple div on top of it. If you really want I can make some example with VisJS on top, but I dont think that adds anything new to table.

Currently I have a solution that hides my network div when the user wants to interact with the map but that's not the best usability.

Do you think there is a way of achieving what I want?

Thanks again!
Menighin
 
Posts: 22
Joined: Tue Feb 20, 2018 1:07 pm

Re: Pass event from overlayed div to Highmaps

Postby daniel_s » Tue Mar 13, 2018 5:03 pm

hi Menighin,

Thank you for your detailed description. Unfortunately, I'm afraid the effect that you expecting is very complex and hard to implement in easy way, because actually it isn't only simple delegating the events from one element to another. Those elements (Highcharts container and overlay div) are separated and not related in context of event path.

Moreover, we tried to trigger Highcharts container events from the overlay div level, but unfortunately it doesn't give expected effect. It happens because points events are added directly on SVG elements, so if you trying to hover on any of points your pointer always be over the overlay div element instead of Highcharts SVG's.

To achieve the effect that you expecting you would create a function which calculates where exactly (over which shape) is mouse pointer currently and then you would be able to call the point events manually, but that is not as simple as it sounds like, because there are many operations which are executing under the hood.
Also, you can consider try to do that in the opposite direction, I mean that the Vis Network is nothing but canvas, so something have to manage the behaviour of all their elements. Maybe you could disable all canvas events and triggering it manually from Highcharts container level. I didn't use that library before, so I don't know its capabilities, but maybe it is real to achieve that by this way.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 673
Joined: Fri Sep 01, 2017 1:01 pm

Re: Pass event from overlayed div to Highmaps

Postby Menighin » Tue Mar 13, 2018 7:20 pm

Hi Daniel,

Thanks for the reply. When I asked I knew it wouldn't be easy n_n'

I will keep in mind your suggestion and will try to experiment inverting the divs.
If you have any new ideas, please let me know!

Thanks!
Menighin
 
Posts: 22
Joined: Tue Feb 20, 2018 1:07 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests