Repository navigation
Click events for openlayers seem to not be working with Android 4 devices #268
Description
When using the code below with my desktop browser (Chrome) it indeed works with both openlayers and googlev3.
I have tested the same code with two Android 4 devices (one mobile and one tablet) and the problem is the same i.e. it only works with googlev3, but the Android 4 problem with openlayers is the same with either using Chrome or Firefox.
(there seem to never be a response to the click events at the markers since no javascript alert is displayed)
So, since the problem seem to exist in only Android 4 devices (well, at least not in my Windows 7 desktop browser) and in different Android browsers (Chrome and Firefox) and only in openlayers but not googlev3,
then I think the problem should be a bug in the code for either mapstraction or openlayers.
(I have not tested the openlayers API directly since I just started to experiment with a mapping API and then chose the mapstraction API, i.e. I am not familiar with how to use openlayers API directly)
If this problem is a known limitation and there is some known workaround for how to make marker clicks in openlayers work with android 4 devices too, then I would suggest some added information about marker clicks for openlayers at these pages:
https://github.com/mapstraction/mxn/wiki/Map-Provider-Gotchas
http://mapstraction.com/tutorial/markers
http://mapstraction.com/tutorial/events
The code I have been testing with:
var mapstraction = new mxn.Mapstraction('map', 'openlayers'); // if using 'googlev3' instead then it works for Android 4 browsers
var marker = new mxn.Marker(new mxn.LatLonPoint(51.50733, -0.12769));
marker.click.addHandler(function(eventName, eventSource, eventArgs) {
alert("The marker was clicked");
});
mapstraction.addMarker(marker);
mapstraction.autoCenterAndZoom();
Activity
gilesc50 commentedon Jul 23, 2013
Hi, which branch of mapstraction are you seeing this issue in?
doppi commentedon Jul 23, 2013
Hi,
I am including the following file in the script tag:
http://mapstraction.com/mxn/build/latest/mxn.js?(openlayers,googlev3)
(as suggested in page http://mapstraction.com/tutorial/)
According to the top of that script, it is version 2.0.18.
The other script files I was using with the code example are these two for openlayers and googlev3:
http://openlayers.org/api/OpenLayers.js
http://maps.google.com/maps/api/js?sensor=false
Regarding the branches, why are there so many branches which never seem to have become released ?
In the download page at:
https://github.com/mapstraction/mxn/downloads
then the latest released version 2.0.18 is a year old (and named as a "pre-release"), while the github does not seem to actually have any 2.0 branch, but rather unreleased (?) branches 2.1, 2.1-marker-events, 2.1-openlayers, and 3.0.
I would like to suggest that the download page provides some information about what version an end user should be using.
The problem I am reporting is here is about marker events for openlayers, which kind of indicates that I maybe should be using some merged version of "2.1-marker-events" AND "2.1-openlayers" ...
vicchi commentedon Jul 23, 2013
I should probably chime in here with some explanation ...
mapstraction.com/mxn/build/latestis a copy of the most recent formal release of Mapstraction, which is indeed v2.0.18 and which is also found atmapstraction.com/mxn/build/2.0.18./latestis as close to a symlink to/2.0.18as GitHub Pages (which hostsmapstraction.com) will allow and actually it's not a symlink, it's a direct copy, but this is as good as we can get with GitHub Pages.There's a lot of branches because that's how development of Mapstraction is done; see https://github.com/mapstraction/mxn/wiki/Branching
Yes, it's been a while since a formal Mapstraction release was done, but as there's (currently) only two active members of the "community" (myself and @gilesc50) we're doing the best we can to keep the project moving, to deal with issues and pull requests and to slowly make our way towards a formal release of v3.0 of the project.
The
release-3.0branch will be what v3.0 will come from, this is what you'll find atmapstraction.com/mxn/build/dev. Therelease-2.1-*branches will be cleaned up and pruned once v3.0 is released and merged back into themainbranch.I'd recommend you try using the
/devbranch to see if that resolves the issue and please let us know if it doesn't, but with the caveat that, as far as I know, Mapstraction hasn't been tested for working on mobile browsers and what mobile functionality and support there is, will be provided out of the box with the underlying mapping provider.Hope this helps with the confusion.
doppi commentedon Jul 23, 2013
Okay thank you for explaining and suggesting the dev branch.
I have now tested with "dev" version instead of "build" and it works better for the Android mobile but worse for the desktop browser.
However, the behaviour now seem to be more consistent for desktop and android which I see as a good thing.
To be more specific, let me begin with describing how the "dev" version now works with the browsers installed at my Windows 7 desktop computer (and the situation I am describing below for the desktop is the same for Chrome, Firefox and Internet Explorer, so it is not browser specific behaviour).
The cursor has changed from an arrow (in "build") to a hand cursor (in "dev").
In the "build" version it was easy with the arrow to click multiple times at the same marker, but in the "dev" version it is only easy to click with the hand cursor the first time I click a marker.
For later clicks, then the actually clickable area seem to be much smaller and it seems as you need to click at just at the border of the default yellow icon which is used by openlayers, i.e. if you click in the middle of the icon, then there seem to be no event triggered.
I have tested with multiple markers (see code below you can paste for yourself and experiment with).
When using desktop browsers (and indeed also mobile Android 4 browsers) with "dev" code, it is very easy to click each of the markers one first time, but for later clicks it is more difficult to click in some spot at the border of the icon.
Regarding the behaviour with Android 4, the "dev" seem to be working in the same way, i.e. it is easy to click each of the marker one first time, but then it becomes more difficult to click in a right spot.
One difference beween the desktop and the mobile is that in the mobile you do not have any cursor, so the arrow versus hand (difference between build and dev versions) is not visually applicable.
Another interesting difference between desktop and mobile (in "dev" version) is that for the mobile (Android 4) is that when you do a zoom or pan in the map, then this seems to trigger some kind of "reset" of the greater clickable area (inside of all the icon) since it becomes easier to click again after a zoom or pan.
If you do not zoom or pan, then it is possible (but very difficult) also with the mobile to make more than one click at a marker.
In other words, for the mobile (and the desktop) the first click is always easy, but later clicks are then always more difficult (with smaller clickable area) for the desktop,
while you can (as a workaround for mobile end users) do a small pan with the mobile to make it easier to do another click at the same marker you have already clicked.
This workaround does not apply for the desktop browsers, i.e. if you do a small pan, it does not help you to get a larger clickable area, but still difficult to click in a spot just at the border of the icon.
Maybe someone with other computers/tabs/mobiles can confirm the above described behaviour with the dev version, i.e. it is easy to click one first time for each marker but then more difficult ?
You can experiment with the below code and see that it is easy to click one time at each of the markers:
var mapstraction = new mxn.Mapstraction('map', 'openlayers');
var marker1 = new mxn.Marker(new mxn.LatLonPoint(51.50733, -0.12769));
var marker2 = new mxn.Marker(new mxn.LatLonPoint(51.50833, -0.12869));
marker1.click.addHandler(function(eventName, eventSource, eventArgs) {
alert("The marker 1 was clicked");
});
marker2.click.addHandler(function(eventName, eventSource, eventArgs) {
alert("The marker 2 was clicked");
});
mapstraction.addMarker(marker1);
mapstraction.addMarker(marker2);
mapstraction.autoCenterAndZoom();
mapstraction.addLargeControls();
(and include in the script tag the following version: "http://mapstraction.com/mxn/build/dev/mxn.js?(openlayers)" )
vicchi commentedon Jul 23, 2013
Can you provide this as a self contained test case, preferably as a Gist, so we can be 100% sure we're testing precisely what you're testing? The code above leaves too much ambiguity as we can't see what scripts are being loaded, what CSS is being loaded and so on.
doppi commentedon Jul 23, 2013
I am not familiar with Gist and also do not understand what you mean with test case, as if I would write some kind of test with Selenium or something like that which would automate a test simulating different browsers...
Well, that is overkill for me, and do not even know how/if that is possible...
I might have pasted the entire html page into the textbox, but as far as I see there is no feature here in github issues to surround the text with code tags for avoiding it to become rendered.
But the page I was using is very simple as described below:
Two "script src" (within head tag) with these urls:
http://openlayers.org/api/OpenLayers.js
http://mapstraction.com/mxn/build/dev/mxn.js?(openlayers)
The following CSS within head/style tage
#map {
height: 400px; width: 400px;
}
Within the body: One div tag with id=map (i.e. div id="map" ) and then also script tags with the javascript code I provided in my previous comment.
Otherwise, there are only surrounding html/head/body tags as in a normal html page.
(in the first and second posting in the issue I was also experiment with googlev3, but in my previous posting above only openlayers and therefore not included more than 'mxn.js?(openlayers)' and also neither included the script for googlev3 api)
vicchi commentedon Jul 23, 2013
What you've written above kind of shows the point I was trying to make. You can surround small snippets of code in backticks, which is supported by GitHub flavoured Markdown, but that makes for large and cumbersome posts when you're putting a whole file's worth of HTML, CSS and JS. As you haven't used Markdown, GitHub has (helpfully) stripped all of your tags out of your posts.
As you've already got GitHub credentials it's easy to create a Gist from this link: https://gist.github.com/. This is the sort of test case I was talking about ... https://gist.github.com/vicchi/5476881. It's a self contained HTML file with all the CSS and JS needed. I didn't mean a browser based test case using Selenium or something similar. Just exactly the code you're using.
If you could do that, I can try and replicate this, rather than following your instructions which describe the code you're using but doesn't actually show the code you're using.
By creating a Gist there's no scope for any ambiguity and I can see precisely what you have and try to see what the problem is.
doppi commentedon Jul 23, 2013
Okay, now here it is:
https://gist.github.com/doppi/6062812
vicchi commentedon Jul 23, 2013
Great. Thank you. I'll take a look at this as soon as I'm able to.