feat: #3633965: Show the active image and its viewing direction on the split viewer's map

Orkut Murat Yılmazrequested to merge
issue/mapillary-3633965:3633965-show-the-active into 1.0.x

Closes #3633965

What changed

The map of the Mapillary Leaflet Split Viewer formatter marked the image with Leaflet's default pin, which followed the viewer to other images but never showed where the camera looks.

  • The pin is replaced by a marker for the image in the viewer: a dot, and once the viewer has fired bearing, a cone on the dot that turns with the camera. The map does not rotate, so a CSS rotate() is enough. The marker is an L.divIcon (.mapillary-split-marker) styled in mapillary-split-viewer.css.
  • Before the viewer has opened and reported a bearing (on click, a full page, no browser token), the marker is the dot alone.
  • An image without a position has no marker until the viewer reports one. Before, the pin sat at 0, 0.
  • The image event moves the marker and the map as before.

Only JavaScript and CSS change. The formatter's markup, settings and schema stay the same.

Upgrade path

No setting, schema or markup changes, so there is no update function. Theme CSS aimed at .leaflet-marker-icon in the split viewer no longer applies to the marker; this is in the changelog.

Tests

  • New FunctionalJavascript SplitViewerDirectionTest (5 tests): the marker is a dot without a cone until a bearing arrives, the cone follows bearing, image moves the marker, a closed viewer shows no cone, and an image without a position has no marker until the viewer reports one.
  • The fake MapillaryJS of mapillary_viewer_test keeps the handlers registered with on(), fires events with window.mapillaryViewerTest.emit() and answers moveTo(). The split viewer test page takes a position route parameter (with or without).
  • SplitViewerLoadTest, SplitViewerBaseLayerTest and ViewerBehaviorTest still pass locally. phpcs, phpstan, eslint, stylelint and prettier (core's versions) are clean. The full suite is left to the pipeline.

Notes

  • Before the viewer opens, the cone could use the stored compass_angle of the image. That needs a new data attribute from the formatter, so it is not part of this change.
  • The map is still centered on the image when the viewer moves, as before.

Merge request reports