Page MenuHomePhabricator

On the mobile site, <mapframe> autozoom doesn't work when data is drawn on top of the basemap and the sections of the page are autocollapsed
Closed, ResolvedPublic

Description

On the mobile site, mapframes display zoomed out to show the whole world if any sort of data (GEOJSON, OSM data or Commons .map pages) are displayed on top of the basemap; the page must be loaded with the relevant section collapsed (collapsing all sections is the default behaviour on phones).

Visit this example page on a phone. The maps above the section break work correctly. Most of the ones below the break do not (the only ones that do are the one where no data is being drawn on top of the base map and the one where the zoom is manually specified).

Note that all maps display correctly if the page is reloaded with the section expanded (because the section remains expanded when the page is reloaded).

QA Results - Prod

ACStatusDetails
1T192250#6045559

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Based on T193528: [mobile] Zoom controls not displayed in portrait view (closed as a duplicate), the steps to reproduce the issue are as following:

  1. On a mobile device or on Chrome mobile emulator go to https://test2.m.wikipedia.org/wiki/User_talk:Etonkovidova/sandbox (there are few samples of dynamic maps).
  2. A mobile device will display the sections collapsed - click to un-collapse them - the zoom controls will not be dispalayed:

Image-1 (1).jpg (1×640 px, 170 KB)

To might be trickier to reproduce the issue In Chrome mobile emulator because after viewing a map in full-view, the zoom controls will be, in fact, displayed. Collapse the sections -reload the page - un-collapse - the controls will be gone:

Screen Shot 2018-05-08 at 2.32.52 PM.png (643×481 px, 133 KB)

Mholloway edited projects, added Maps (Kartographer); removed Maps.
TheDJ added subscribers: Jdlrobson, TheDJ.

Almost certainly because we do not trigger invalidateSize() on the map in that case, which we do do for mw-collapsible.. I'm not sure how to be notified of collapsible sections on mobile however.

@Jdlrobson is there a method with which I can reach the Mobile eventbus to listen to section-toggled ?

Almost certainly because we do not trigger invalidateSize() on the map in that case, which we do do for mw-collapsible.. I'm not sure how to be notified of collapsible sections on mobile however.

@Jdlrobson is there a method with which I can reach the Mobile eventbus to listen to section-toggled ?

mw.mobileFrontend.require('mobile.startup').eventBusSingleton.on('section-toggled', (a) => { console.log('hello world', a ); })

Change 582579 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/Kartographer@master] Correct autzoom/center calculations on uncollapsed maps

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

Well this is as best as i can get it I think :/

Change 582579 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Correct autozoom/center calculations on uncollapsed maps

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

Jdlrobson added a subscriber: JTannerWMF.

We should probably QA this unless there is another team doing this. @JTannerWMF can you advise?

For QA. To clarify, the patch will ONLY fix the situation where a map is initially in a collapsed state and a user then uncollapses this section manually.

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: commons
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

Go to https://commons.m.wikimedia.org/wiki/User:Gareth/maps/test2
Expand section break
✅ AC1: Verify that mapframes DO NOT display zoomed out to show the whole world if any sort of data (GEOJSON, OSM data or Commons .map pages) are displayed on top of the basemap; the page must be loaded with the relevant section collapsed (collapsing all sections is the default behaviour on phones).

commons.m.wikimedia.org_wiki_User_Gareth_maps_test2(iPhone X) (1).png (2×1 px, 1 MB)

commons.m.wikimedia.org_wiki_User_Gareth_maps_test2(iPhone X).png (2×1 px, 529 KB)