| Issue 4844: | Bug: Symbol markers hide click and hover events from near markers | |
| 32 people starred this issue and may be notified of changes. | Back to list |
We're developing a map that contains multiple symbol markers added as an overlay. We're using SVG symbol markers because we want the marker size to remain constant no matter what zoom level we're at. Using images is out of question because the markers can be placed at multiple angles and the fill color is dynamic, depending on some KPI's value. Where noticing some weird behavior on all browsers apart from Internet Explorer that is hiding click and/or hover functions on the markers. If you visit our live demo (http://sandbox.motionizr.com) you'll notice that we have as much as three markers on the same coordinates at different angles. The marker image can be consulted on the attachment marker.svg. Each marker has a different click event registered that outputs an alert box with its name. The problem we have is that each marker constructs a canvas much bigger that the marker itself and registers hover and click events even in the empty areas. This hides the near markers, and since in some cases we have three markers on the same position, the last marker will get all the events and completely hide the others. Please note that in IE this works as expected, i.e., every marker gets its click event. If you look at the attachment canvas_example.jpg we can clearly see the problem. While each of the three markers get a canvas with the size of the blue square, their size should be something similar to what's drawn in the black squares. As far as i can tell, there's no workaround for this problem and this is major impediment to our work and our existing costumers, whom we are migrating from the Flash API. We could try and use the MarkerShape to define the clickable area for each marker, but the canvas size isn't fixed nor configurable.
Jan 24, 2013
If you look ate the canvas_example.jpg you'll notice that the API is creating a canvas the size of the blue square, calculating a center point and then rotating the three markers around that point. In order to use the MarkerShape I would need to know where this centerX and centerY points are to then apply the rotation and calculate the final shape coodinates for each marker. The center coordinates are defined by canvasXsize/2 and canvasYsize/2. Since the canvas size is variable and I can't access it programaticaly at draw time, there's no way to calculate the center coordinates needed to define the correct MarkerShape coordinates for each of the three markers.
Jan 24, 2013
I see, thanks.
Status:
Confirmed
Labels: Internal-6875394
Jan 27, 2013
Is there any workaround for this issue, having in mind our limitations? We've tried a few overlay options but couldn't come up with one that supported markers with constant size, regardless of the zoom level, dynamic rotation angles and fill colors.
Jan 27, 2013
The only workaround is to try and form a MarkerShape. As you noted above, the only thing you were stuck on was that you didn't know the canvas size. This relies on an implementation detail, but it should suffice as a workaround for now. The API computes bounding boxes for symbols rather conservatively. You have an arc of radius 20, and a stroke weight of 2, which gives the bounding box for a symbol with no rotation as a square with size 20 * 2 + 2 = 42. With rotation, the size is max(cos(theta) - sin(theta), sin(theta) + cos(theta)) * 42. So, for a rotation of 45 degrees, the size of the box comes to 60 pixels (rounded up).
Jan 30, 2013
Hi, I've tried the suggested workaround and succeeded in creating the correct the marker shapes. The problem is that this creates three images and image maps with the place and size of the canvas (one for each marker) and the only clickable image map is the one on top. I've updated the demo (http://sandbox.motionizr.com) with the suggested workaround, so you can see what I'm talking about. The click event isn't passed through the first image, so i can never reach the 2 images behind it. So this option also doesn't work :/ Any more ideas/workarounds? |
|
| ► Sign in to add a comment |
Owner: [email protected]