leafclusterer
leafclusterer copied to clipboard
ideak
Weird issue with cluster click and Safari
Hello,
it seems there is a problem with safari firing the onClick_ event.
The clusters doesn't even have pointer cursor when hovered.
The issue is strange, i'm investigating it but the only difference I can notice with leaflet markers is that they use .on() to bind the click event.
I had the same problem as you, I managed to put this fix together for it. Hope it helps you :)
https://github.com/ideak/leafclusterer/pull/11
Hello!
On my side, your fix seems to mess up the normal markers and the clusters are still not clickable.
Screenshot : http://d.pr/i/SHnO
The marker is supposed to be where the shadow is.
Thanks for your effort!
Hello
Yes you're absolutely right, I'm experiencing the same thing here. I've got a feeling it's because I moved the marker clusters to the markerPane from the overlayPane.
I noticed the issue myself not long after I posted the pull request doh, I'm in the middle of trying to figure out a work around, but I've not finished yet.
I'm keep working on it :)
-----Original Message----- From: HooliganQC [mailto:[email protected]] Sent: 07 June 2012 15:39 To: David Wright Subject: Re: [leafclusterer] Weird issue with cluster click and Safari (#8)
Hello!
On my side, your fix seems to mess up the normal markers and the clusters are still not clickable.
Screenshot : http://d.pr/i/SHnO
The marker is supposed to be where the shadow is.
Thanks for your effort!
Reply to this email directly or view it on GitHub: https://github.com/ideak/leafclusterer/issues/8#issuecomment-6177466
Privileged/Confidential Information may be contained in this message. If you are not the addressee indicated in this message (or responsible for delivery of the message to such person), you must not copy, distribute or take any action in reliance to it. In such case, you should destroy this message and kindly notify the sender by reply email. Please advise immediately if you or your employer do not consent to Internet email for messages of this kind. Opinions, conclusions and other information in this message that do not relate to the official business of Ctrack Limited shall be understood as neither given nor endorsed by it.
Ctrack Limited, Registration no: 04643588 Park House, Headingley Office Park, 8 Victoria Rd, Leeds, LS6 1LG VAT #: 808888965
No problem sir!
I guess the marker-pane has something different than overlay-pane that makes it clickable on safari. It may be better to keep clusters in overlay-pane, but try to find the property that lack to overlay-pane.
Again, thanks for trying.
I think I've sorted it. The various elements within the markerPane (markers) and the overlayPane (paths and shapes) were causing things to get pushed out and offset. Very annoying.
So I've had the LeafClusterer create a new pane for the clusters. Add everything to that and it solves the problem.
Check out my updated pull request or my fork, let me know if you find any more problems before i do :)
Hello theLundquist,
Good idea there! I've tested it this morning, but it doesn't fix the click problem on safari. It doesn't mess up the markers anymore, but clusters are still not clickable.
Hhhmmmm
Unfortunately I've got no access to Safari, I'm using chrome at the office. I had the same problem as you and thought that the problem would be the same, maybe not :(
Have you got any tools that you can explore the DOM with? I noticed that the cluster-marker-container object was not only in the wrong place relative to the cluster icon, but had a width/height of 0. I think this is why the clusters weren't clickable.
So all my fix did was resize and reposition the container div. It might be that safari doesn't like some of the css styles I'm using to do the re-positioning or some combination of styles.
Another thing you might be able to try is there is a peiece of logic in the cluster code (about line 657) that deals with attaching a event listener, check that the correct ones are being used for safari.
If neither of these work, you might be on your own. Try using the DOM explorer and see what you can find.
Good Luck.
-----Original Message----- From: HooliganQC [mailto:[email protected]] Sent: 08 June 2012 15:59 To: David Wright Subject: Re: [leafclusterer] Weird issue with cluster click and Safari (#8)
Hello theLundquist,
Good idea there! I've tested it this morning, but it doesn't fix the click problem on safari. It doesn't mess up the markers anymore, but clusters are still not clickable.
Reply to this email directly or view it on GitHub: https://github.com/ideak/leafclusterer/issues/8#issuecomment-6204860
Privileged/Confidential Information may be contained in this message. If you are not the addressee indicated in this message (or responsible for delivery of the message to such person), you must not copy, distribute or take any action in reliance to it. In such case, you should destroy this message and kindly notify the sender by reply email. Please advise immediately if you or your employer do not consent to Internet email for messages of this kind. Opinions, conclusions and other information in this message that do not relate to the official business of Ctrack Limited shall be understood as neither given nor endorsed by it.
Ctrack Limited, Registration no: 04643588 Park House, Headingley Office Park, 8 Victoria Rd, Leeds, LS6 1LG VAT #: 808888965
I already debugged the problem. The addEventListner is never called in safari. I just don't understand why as it uses webkit so it's suppose to work, if it works with chrome. So i'm a little bit lost here. :/ thanks for you help
Did you have any luck with this bug in Safari yet Hooligan? I've had to come back and take another look at it as its doesn't work on the iPad either (although thats not really a suprise)?
Sorted it. I've got a load of junk code in my copy so after I have a break, I'll come back and put it back in. Long story short, its a problem with some of the css position:absolutes on the cluster, container and the pane. For some reason in this situation the addEventListener doesn't fire when the cluster marker, or any of its containing divs have the position:absolute css property set. You need to specify the values for translate3d before the cluster both positions itself correct AND fires the event listener.
I've not real idea why this works, but my first thought is that a load of the other elements on the map are being positioned using this (including some of the parent elements for the cluster markers) and I think that when the user clicks either safari is not making the correct calculation for the click location, or something is getting in the way of the cluster marker and is intercepting the click (but only when position:absolute is used)
I've been mashing my head against this for about aproximately 7 and half hours today >__< I think I need to lay down. I'll get the fixes up in a little while for people to have a look at.
theLundquist, Thank you for your hard work. I've tested your solution. It works for safari and safari mobile. However the positions of clusters are incorrect. maybe some conversion is needed before setting webkitTransform? what do you think?
Hi Kinhunt
You're very welcome. As for the positioning issue, I assume that you mean that the cluster is sometimes offset a little or isn't quite over the centre of the marker area?
I think that this is currently a known issue for the average position of the all the markers in a cluster https://github.com/ideak/leafclusterer/issues/5 have a look at that and see if it is a solution for you.
Hi theLundquist:
I think the problem I have is different from issue five. Please see the example:
Default leafclusterer.js http://weburner.com:8080/lab/leaflet/debug/map/map.cluster.html
Your solution: http://weburner.com:8080/lab/leaflet/debug/map/map.cluster.lq.html
you can see from the source code. I am using the markers with same lat but different lng. So the default leafcluster.js behave correctly.
hi:
i got the solution by adding
this.container_.style.position = "absolute";
before
this.container_.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(pos);
the elements have offsets before doing translate3d if not setting to absolution.
cheers
Thanks Kinhunt.
I've added that to my local copy here. I hadn't added the position:absolute css styles because it was causing me some style problems and onclick problems. I don't get them any more so it looks like my problem was a little more subtle, maybe it was the css property that the transform style was being put into that was causing the problem all along.
Not sure but just glad it works.
p.s. I'll add you change into my pull requests for the main branch.
Great job, thanks guys!
It seems to work well! Only thing I noticed but not sure if it was there in the beginning. But it seems that the cluster image shows over the markers in some case. It's not that important, just a minor look issue.
great work again!
theLundquist: position:absolute is not the source of problem. I think it's the webkit-transform: translate3d in div leaflet-map-pane causing the problem. If you can try to delete this property in console, you will see the original clusterer.js works correctly. My conclusion : top,left stle property within a webkit-transform div prevents saferi from firing events.
HooliganQC: please try to set z-index to 3 in this line:
$(".leaflet-cluster-pane").css("z-index", "3").css("position", "absolute");