Page MenuHomePhabricator

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

Assigned To
Authored By
RolandUnger
Aug 1 2016, 4:57 AM
Referenced Files
F16768163: Screen Shot 2018-04-06 at 4.32.04 PM.png
Apr 6 2018, 11:32 PM
F16680242: Screen Shot 2018-04-04 at 11.49.02 AM.png
Apr 4 2018, 7:22 PM
F16679969: Screen Shot 2018-04-04 at 11.56.42 AM.png
Apr 4 2018, 7:22 PM
F16680263: Screen Shot 2018-04-04 at 12.12.31 PM.png
Apr 4 2018, 7:22 PM
F16679667: Screen Shot 2018-04-04 at 11.57.32 AM.png
Apr 4 2018, 7:22 PM
F16680249: Screen Shot 2018-04-04 at 11.49.33 AM.png
Apr 4 2018, 7:22 PM
F16680275: Screen Shot 2018-04-04 at 12.16.17 PM.png
Apr 4 2018, 7:22 PM
F15949489: Screen Shot 2018-03-21 at 10.05.23 PM.png
Mar 21 2018, 6:17 PM
Tokens
"Like" token, awarded by Liuxinyu970226.

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.

marker70.png (198×554 px, 201 KB)
marker90.png (279×582 px, 218 KB)

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.

Event Timeline

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.
debt triaged this task as Medium 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:

Screen Shot 2018-02-13 at 13.00.04.png (215×595 px, 186 KB)

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 Medium to Lowest.
jmatazzoni subscribed.

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:

marker70.png (198×554 px, 201 KB)

marker90.png (279×582 px, 218 KB)

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

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

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

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

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

Screen Shot 2018-03-19 at 10.37.38 PM.png (262×559 px, 49 KB)

Screen Shot 2018-03-19 at 10.41.25 PM.png (351×516 px, 187 KB)

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:

Screen Shot 2018-03-21 at 10.05.23 PM.png (437×546 px, 353 KB)

Screen Shot 2018-03-21 at 10.10.57 PM.png (269×682 px, 178 KB)

@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.

Screen Shot 2018-03-21 at 8.51.31 PM.png (522×898 px, 254 KB)

(2) when editing the layers, the marker outline is big.
Screen Shot 2018-03-21 at 8.01.51 PM.png (516×914 px, 159 KB)

@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:

Screen Shot 2018-03-21 at 10.05.23 PM.png (437×546 px, 353 KB)

@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 ?

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):

Screen Shot 2018-04-04 at 11.57.32 AM.png (443×533 px, 163 KB)

(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.
Screen Shot 2018-04-04 at 11.56.42 AM.png (354×378 px, 206 KB)

(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):

Screen Shot 2018-04-04 at 11.49.02 AM.png (442×430 px, 101 KB)

b) the pointing hand is at the farthest position from the market (before changing to the grab hand)
Screen Shot 2018-04-04 at 11.49.33 AM.png (437×427 px, 101 KB)

(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.

Screen Shot 2018-04-04 at 12.12.31 PM.png (474×434 px, 361 KB)

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

Screen Shot 2018-04-04 at 12.16.17 PM.png (503×528 px, 216 KB)

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):

Screen Shot 2018-04-04 at 11.57.32 AM.png (443×533 px, 163 KB)

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.

Screen Shot 2018-04-04 at 11.56.42 AM.png (354×378 px, 206 KB)

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):

Screen Shot 2018-04-04 at 11.49.02 AM.png (442×430 px, 101 KB)

b) the pointing hand is at the farthest position from the market (before changing to the grab hand)
Screen Shot 2018-04-04 at 11.49.33 AM.png (437×427 px, 101 KB)

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.

Screen Shot 2018-04-04 at 12.12.31 PM.png (474×434 px, 361 KB)

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

Screen Shot 2018-04-04 at 12.16.17 PM.png (503×528 px, 216 KB)

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

Checked in betalabs for full-map view:

Screen Shot 2018-04-06 at 4.32.04 PM.png (512×854 px, 584 KB)

I was wondering where the 10 in the custom clipping code came from. The marker icons as well as all image files required to create the markers can be found in the makizushi library, see https://github.com/wikimedia/makizushi. The relevant file is mask/pin.svg, see https://github.com/wikimedia/makizushi/blob/master/markers-src/mask/pin.svg. When I measure the actual size of the pin + shadow I get:

sizeactual size of the .pngcurrent formula height / 2 + 10actual visible size (height * 0.6)
s20x5020x3520x30
m30x7030x4530x42
l35x9035x5535x54

Change 877096 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Fix slightly to large map marker click region

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

Change 877096 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Fix slightly to large map marker click region

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