As you know, Kartographer extension implements two tags: <mapframe> and <maplink>.
There are 2 possible scenarios, so far:
- a map with absolute width: in pixels px.
- a map with relative width: in percentage %.
Right now we only have a frameless presentation, but we want to support two presentations:
- a frameless map.
- a framed map, i.e. wrapped in a .thumb and .thumbinner container, offering the same look and feel as images.
We need to keep these 4 scenarios in mind when we implement responsiveness for both desktop and mobile:
- a responsive frame and a map defined in pixels
- a responsive frame and a map defined in percentage
- a responsive frameless map defined in pixels
- a responsive frameless map defined in percentages.
Goal of this task below
This is all doable with a bit of CSS and a few more dom containers, however there has been some discussions wether this work is better handled in the backend or in the frontend:
- keeping the HTML in the PHP output as simple as possible (for caching and backward compatibility reasons), and handle the presentation/DOM manip in JavaScript (performance implication and maybe flash of unstyled content).
- doing all the presentation work on the server in PHP, so map containers display correctly on page load and avoid redundant JS execution for each map on the page.
Please compare the current PHP output with the proposed output (4 possible scenarios), and advise whether the HTML formatting/DOM manip should be handled by the client or the server.
Current output below
For the comparison, this has been the PHP output so far:
<div class="mw-kartographer mw-kartographer-interactive floatright"
mw-data="interface"
style="width:200px; height:300px;"
data-style="osm-intl"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]">
</div>There is no distinction between absolute width and relative width, as shown below. But there is also no responsiveness, no frame/frameless option, and no caption text.
<div class="mw-kartographer mw-kartographer-interactive floatright"
mw-data="interface"
style="width:25%; height:300px;"
data-style="osm-intl"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]">
</div>Proposed output(s) below
I submitted this patch: https://gerrit.wikimedia.org/r/#/c/289978 that implements these 4 scenarios, and the entire work is done in PHP by the backend, so MapFrame can now have 4 different HTML outputs:
EDIT: It is important to note that these 4 outputs actually come from 4 different wikitext (pay attention to format and width attributes). In other words, 1 wikitext will always generate only 1 type of output, regardless of the platform/device.
- a responsive frame and a map defined in pixels
<mapframe format="frame" width="200" height="300" zoom="15" longitude="-122.3988" latitude="37.8013" text="Map caption">
<div class="mw-kartographer-thumb thumb mw-kartographer-container floatright"
style="max-width: 200px;">
<div class="thumbinner">
<div class="mw-kartographer-placeholder" style="padding-bottom: 150%;">
<div class="mw-kartographer mw-kartographer-interactive"
mw-data="interface"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]"></div>
</div>
<div class="thumbcaption">Map caption</div>
</div>
</div>- a responsive frame and a map defined in percentage
<mapframe format="frame" width="25%" height="300" zoom="15" longitude="-122.3988" latitude="37.8013" text="Map caption">
<div class="mw-kartographer-thumb thumb mw-kartographer-container floatright" style="width: 25%;">
<div class="thumbinner">
<div class="mw-kartographer-placeholder" style="height: 300px;">
<div class="mw-kartographer mw-kartographer-interactive"
mw-data="interface"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]"></div>
</div>
<div class="thumbcaption">Map caption</div>
</div>
</div>- a responsive frameless map defined in pixels
<mapframe format="frameless" width="200" height="300" zoom="15" longitude="-122.3988" latitude="37.8013">
<div class="mw-kartographer-container floatright" style="max-width: 200px;">
<div class="mw-kartographer-placeholder" style="padding-bottom: 150%;">
<div class="mw-kartographer mw-kartographer-interactive"
mw-data="interface"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]"></div>
</div>
</div>- a responsive frameless map defined in percentages.
<mapframe format="frameless" width="25%" height="300" zoom="15" longitude="-122.3988" latitude="37.8013" text="Map caption">
<div class="mw-kartographer-container floatright" style="width: 25%;">
<div class="mw-kartographer-placeholder" style="height: 300px;">
<div class="mw-kartographer mw-kartographer-interactive"
mw-data="interface"
data-zoom="15"
data-lat="37.8013"
data-lon="-122.3988"
data-overlays="["_bc9920c5250401bb5f3f0c3b3785f57a7cb0b551"]"></div>
</div>
</div>