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:
- a responsive **frame** and a map defined in **pixels**
```
<div class="mw-kartographer-thumb thumb mw-kartographer-container floatright"
style="max-width: 200px;">
<div class="thumbinner"
style="">
<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**
```
<div class="mw-kartographer-thumb thumb mw-kartographer-container floatright" style="width: 25%;">
<div class="thumbinner"
style="">
<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**
```
<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**.
```
<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>
```