Pop-up-infobox partially positioned outside map area

[SannaJokela]

Sometimes the info box is positioned so that it is partially or completely outside the visible map area. The problem may be alleviated by the user (developer) by taking the click position into account and choosing an approriate position (top, right, bottom, left) for the box. This approach has two problems:

1. Corner positions are not supported (top-right etc.)
2. When the bottom position is chosen, the (possible) map marker is hidden behind the info box

Info box should be positioned automatically so (in relation to the chosen point) that it completely fits inside the visible map area.

Suggested implementation
There should be two modes for positioning a info box: manual and automatic.

In manual mode, the user (developer) may choose whether the info box is oriented top, right, bottom or left from the chosen point.

In automatic mode, Oskari.org ui calculates an appropriate position for the info box so that the box fits inside the current map area. Likewise, the position of the arrow connecting the box to a map marker is calculated automatically.

User stories
User clicks on a map marker situated in the lower left corner of the map view.
Result: Info box opens above and right from the map marker. An arrow is pointing from the info boxes lower left corner to the map marker.

Goals
Improved usability for the info box, as the user does not need to drag the map so as to actually see the info box.

[ZakarFin]

The infobox positioning has been improved in 1.46.0 by oskariorg/oskari-frontend#322

[suniala]

The positioning improvement 1.46.0 is a step in the right direction. It differs from our "Suggested Implementation", where the idea was to position the info box smartly. But panning the viewport smartly would fix the issue just as well. Unfortunately I can't really verify that the improvement completely fixes the original issue until the new version is taken into use by our map provider.

However, what I can verify is that the positioning improvement does not seem to work for all info box positions. This is not necessarily an issue as currently www.suomi.fi only uses the implicit "right" position. But for the sake of completeness, here are the steps to reproduce the problem:

1. Go to http://www.oskari.org/examples/rpc-api/rpc_example.html
2. Choose "Show info box for marker"
3. Click "AddMarkerRequest"
4. Zoom in and pan the viewport so that the marker is at the lower left corner
5. In the browsers console, invoke: channel.postRequest('InfoBox.ShowInfoBoxRequest', ['markerInfoBox', 'Marker info box', [{'html': '<div>Long popup content. Long popup content. Long popup content. Long popup content.</div>'}], {marker: 'MARKER_WITH_POPUP'}, {mobileBreakpoints: {width: 0, height: 0}, hidePrevious: true, positioning: "left"}]);

Result: Info box opens on the left side of the marker, viewport is panned but the left side of the info box remains outside the viewport.