<maplink> and/or <mapframe>: clickable marker area too big
Closed, ResolvedPublic

Description

The clickable areas of the markers are twice in height as necessary. This is usually not expected. Sometimes the transparent area overlaps other markers, and a wrong popup is shown. I think the reason is to simply position markers of different sizes. The problems I think arise from the marker shadow. But maybe this shadow is not necessary and covers sometimes map details.

Proposed solution

Crop the marker active area to half of its height plus 10px. Some examples below showing the current (highlighted in blue) and proposed (marked in red) active areas.

In T141750#2515440, the following code was proposed for the adjustment:

img.style.clip = 'rect(auto auto ' + (size.y / 2 + 10 ) + 'px' + ' auto)';

It was also mentioned that in recent versions of mapbox libraries, the issue may be solved, which may be relevant in case such update of libraries is planned.

Restricted Application added a project: Discovery. · View Herald TranscriptAug 1 2016, 4:57 AM

According to: https://github.com/mapbox/mapbox.js/issues/480, this could be fixed by updating mapbox.js code but mapbox refused to for legacy reasons.

As suggested, adding:

img.style.clip = 'rect(auto auto ' + (size.y / 2 + 10 ) + 'px' + ' auto)';

to mapbox-lib.js#L3473 seems to fix it nicely. We can try it!

Yurik renamed this task from <maplink> and/or <mapframe>: clickable marker area to big to <maplink> and/or <mapframe>: clickable marker area too big.Sep 15 2016, 5:08 PM
Yurik removed Yurik as the assignee of this task.
Yurik moved this task from Unsorted to UI tasks on the Maps (Kartographer) board.
Yurik removed a project: Maps.Dec 15 2016, 4:40 AM
debt triaged this task as Normal priority.Dec 20 2016, 10:28 PM

I took a look, and it seems that the active area of the markers expand to the bottom much more than what it should. Below is an example of the Prague map on Wikivoyage:

In the example, the active area for the marker 7 is highlighted, and partially overlaps with marker 5. The extra space at the bottom of the active area should be reduced to a similar size as the space on the other sides.

jmatazzoni lowered the priority of this task from Normal to Lowest.Feb 21 2018, 11:00 PM
jmatazzoni assigned this task to Pginer-WMF.
jmatazzoni added a subscriber: jmatazzoni.

Pau, please spec out what the marker size should be and then move this along to RFP. Thanks.

Pau, please spec out what the marker size should be and then move this along to RFP. Thanks.

I think we cannot use a fixed pixel size since there are markers, of different size. Based on T141750#2515440, it seems that the underlying issue is that the marker images are created to make sure the active point is in the middle of the image, which makes marker images twice the height we need. following the formula suggested makes sense ("size.y / 2 + 10 "): crop the marker image to half of the vertical size and add 10px of extra margin.

I recreated two examples for different markers, the blue highlight is the current size and the red line represents the adjustment proposed:


I'll add these conclusions to the description and move to RFP, but feel free to undo if more details are needed.

Pginer-WMF updated the task description. (Show Details)Feb 22 2018, 12:17 PM
Pginer-WMF updated the task description. (Show Details)
jmatazzoni raised the priority of this task from Lowest to Low.Feb 27 2018, 12:04 AM

Change 420235 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Kartographer@master] Cut the marker clickable space by half height

https://gerrit.wikimedia.org/r/420235

I implemented the requested solution, but just head's up -- we may be having compatibility issues with IE11, Edge 16/17 and opera mini. See https://caniuse.com/#search=css%20clip

MaxSem added a subscriber: MaxSem.Mar 18 2018, 6:17 PM

What's the plan with library updates? Just remember to repply the fix manually?

Change 420235 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Cut the marker clickable space by half height

https://gerrit.wikimedia.org/r/420235

Yurik added a comment.Mar 18 2018, 6:46 PM

I merged it - as it seemed a valid patch. @MaxSem could you think of a better alternative to dynamically patch upstream lib? We could also submit it upstream.

What's the plan with library updates? Just remember to repply the fix manually?

This is a really good point... I thought about this again, and I have an alternative in the new patch. This one uses the 'map.doWhenReady' call to add the 'clip' CSS rule, so it won't be dependent on library fixes.

I'm still a little meh about using "clip" since it won't support IE11, Edge 16/17 and Opera mini, but it's better than nothing.

Change 420255 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Kartographer@master] Followup I39c13145: Clip selection area outside the mapbox library

https://gerrit.wikimedia.org/r/420255

Change 420255 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Followup I39c13145: Clip selection area outside the mapbox library

https://gerrit.wikimedia.org/r/420255

Etonkovidova added a subscriber: Etonkovidova.EditedMar 19 2018, 7:16 PM

@Mooeypoo In betalabs, the clickable marker area still looks big:

The clickable area for a marker seems to be still 35x90; the grab hand changes to the pointing hand quite far away from the clickable element:

@Pginer-WMF please let me know if the following should be filed as a separate tickets (although the issues seem to relate to the big clickable area):

(1) the tooltip appears when the hand changes to the pointing hand - far away from the clickable element.


(2) when editing the layers, the marker outline is big.

@Pginer-WMF please let me know if the following should be filed as a separate tickets (although the issues seem to relate to the big clickable area):

These seem the same issue: the active area being larger than the image of the marker. Solving them as part of the same ticket or with separate ones I guess it is more in the hands of engineers depending on whether this can be fixed on a single place or multiple interventions are needed in the code.

@Mooeypoo - should there be some separate ticket(s)?

This is a really weird bug that seems to have different behaviors in different places.

  • Take a look here: https://en.wikivoyage.org/wiki/Kastellorizo : If you inspect the pins, the area they take seem to be too big -- however, if you hover your mouse (without inspecting) and check when the hand icon changes to a pointer, the transition is correctly done just around the pin marker.
  • However, with this map: https://www.mediawiki.org/wiki/Maps#/map/0 (full screen so it isn't the static map) -- if you inspect, the area is too big, and if you hover, the area is indeed too big.

This inconsistency is weird, especially since I've been using the same browser (Chrome Version 64.0.3282.140 (Official Build) (64-bit)) in both cases.

The clickable area for a marker seems to be still 35x90; the grab hand changes to the pointing hand quite far away from the clickable element:

@Etonkovidova I'm researching this further, can you tell me:

  1. Where you are looking for this map in the picture? Is that the one in mediawiki.org/wiki/Maps ? What browser are you using would help too.
  2. Can you check if you get a sensible clicking are in the map in https://en.wikivoyage.org/wiki/Kastellorizo ?
SBisson added a subscriber: SBisson.Apr 4 2018, 2:07 PM

The clickable area is also too big here: https://en.wikivoyage.org/wiki/Kastellorizo#/map/0

Is it a difference between fullscreen and thumb?

Gah. Possibly... Checking.

But in Elena's screenshots, it doesn't look like it's the fullscreen version, either.

The clickable area is also too big here: https://en.wikivoyage.org/wiki/Kastellorizo#/map/0

Is it a difference between fullscreen and thumb?

That 'clip' style isn't being applied to a full screen map -- I'm fixing that -- but Elena's screenshots are concerning, since it seems like it looks/behaves as too large even when it's a small map.

@Etonkovidova can you recheck -- does this only happen in fullscreen? can you look at the map in https://en.wikivoyage.org/wiki/Kastellorizo (non full screen) and see if the mouse hover works well?

Several issues that need to be sorted here:

(1) The issue in the ticket was reported based on the dev tool Inspector displaying a large area around a marker - it's still in place (https://en.wikipedia.beta.wmflabs.org/wiki/Mavetuna - the map of Swiss):


(2) In my opinion the indicated (the shaded) area does not correlate anymore to the behavior of the pointer - the grab hand will change to the pointing hand much closer than before - the same screenshot as above. The pointed hand is at the farthest position from the marker.

(3) Regarding the link https://en.wikivoyage.org/wiki/Kastellorizo - the behavior looks quite acceptable to me.
a) the grab hand in the closest position to the marker(before changing to the pointing hand):


b) the pointing hand is at the farthest position from the market (before changing to the grab hand)

(4) Full map view issue - the following is, indeed, true:

However, with this map: https://www.mediawiki.org/wiki/Maps#/map/0 (full screen so it isn't the static map) -- if you inspect, the area is too big, and if you hover, the area is indeed too big.

(5) Editing maps in VE - the marker area is large and the pointing hand changes far away from the marker:

Summary:

  • Let's consider (2) and (3) in scope for this task and, hence, the task can be Resolved.
  • full map issue (4) should be separate
  • (5) and (1) can be also separate issues if needed (probably it's ok do not solve them).

@Mooeypoo and @Pginer-WMF - please let me know if something is amiss, otherwise, I'll Resolve this ticket and create a ticket for (4). Still not sure if (5) and (1) need to be addressed.

Several issues that need to be sorted here:

(1) The issue in the ticket was reported based on the dev tool Inspector displaying a large area around a marker - it's still in place (https://en.wikipedia.beta.wmflabs.org/wiki/Mavetuna - the map of Swiss):

I think the shape that appears in the inspector is irrelevant; Chrome isn't respecting "clip" in the inspector -- but it is respecting it with regards to actual behavior, so we should ignore whatever is going on in the inspector (irrelevant for everyone except developers) and look at how the mouse pointers actually behave.

(2) In my opinion the indicated (the shaded) area does not correlate anymore to the behavior of the pointer - the grab hand will change to the pointing hand much closer than before - the same screenshot as above. The pointed hand is at the farthest position from the marker.

That's great! that means it works.

(3) Regarding the link https://en.wikivoyage.org/wiki/Kastellorizo - the behavior looks quite acceptable to me.
a) the grab hand in the closest position to the marker(before changing to the pointing hand):


b) the pointing hand is at the farthest position from the market (before changing to the grab hand)

Perfect, I see the same.

(4) Full map view issue - the following is, indeed, true:

However, with this map: https://www.mediawiki.org/wiki/Maps#/map/0 (full screen so it isn't the static map) -- if you inspect, the area is too big, and if you hover, the area is indeed too big.

(5) Editing maps in VE - the marker area is large and the pointing hand changes far away from the marker:

Okay, so as @SBisson pointed out, the behavior should be fixed for full screen maps, and in VE.

Summary:

  • Let's consider (2) and (3) in scope for this task and, hence, the task can be Resolved.
  • full map issue (4) should be separate
  • (5) and (1) can be also separate issues if needed (probably it's ok do not solve them).

    @Mooeypoo and @Pginer-WMF - please let me know if something is amiss, otherwise, I'll Resolve this ticket and create a ticket for (4). Still not sure if (5) and (1) need to be addressed.

Agreed, except I can just work on the "full screen" map in this ticket and resubmit, seeing as it's already in "development" and we've chatted about it here -- and that it's basically a missing consistency with the previous commit.

Let's make another ticket for the VE map behavior?

Change 424143 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Kartographer@master] Clip marker size in fullscreen maps

https://gerrit.wikimedia.org/r/424143

Change 424143 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Clip marker size in fullscreen maps

https://gerrit.wikimedia.org/r/424143

Etonkovidova closed this task as Resolved.Apr 6 2018, 11:32 PM

Checked in betalabs for full-map view: