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!

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.

In T141750#3991285, @jmatazzoni wrote:

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.

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.

In T141750#4059534, @MaxSem wrote:

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:

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.

In T141750#4069999, @Etonkovidova wrote:

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

In T141750#4069999, @Etonkovidova wrote:

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 ?

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.

In T141750#4104650, @SBisson wrote:

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

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

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

In T141750#4106298, @Etonkovidova wrote:

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

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:

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