Better ways to interact with Mapillary photos

[rasagy]

As highlighted during the shadow exercise with @srividyacb, the Mapillary photos play a major role in mapping & verifying turn restrictions. Making even minor improvements to the workflow should add up to make a significant difference.

Based on the discussion with @ajithranka & @planemad here are a few things that we need to relook/explore:

1. Visually differentiate Mapillary object (estimated location of the signage), Mapillary signage images (that detect the specific signage/object), and remaining Mapillary images & trails — @rasagy to design icons
2. Show icons on the Mapillary object — @planemad to hook up the sprites shared in Use restriction sprites instead of circles #38 in the map style
3. Show the bearing for the Mapillary object
4. Rotate icons for Mapillary signage images and remaining images using bearing property — @ajithranka to experiment with data-driven icon-rotate property
5. Navigate through images in a particular trail — @ajithranka to build a UI using Mapillary.js to move to next/previous image in the trail
6. Explore more ways to interact with the thumbnail: Using the bounding box (rects) for detected signage in the image, alternate ways to pan/zoom etc. — @ajithranka & @rasagy to explore and build an experimental prototype
7. Explore swapping map & image thumbnail view to let the reviewer focus on the images with the map shown as a small thumbnail to just highlight where the images are — idea to explored by @ajithranka & @rasagy (low priority)

@ajithranka & @planemad, can you add anything else that I might have missed?

[ajithranka]

Here's a first shot: http://bl.ocks.org/ajithranka/d5f2e6328cafb32a0e724f71b147b139.
Let me know what you guys think!

[planemad]

@ajithranka this is great! The main requirement now is a way for the reviewer to clearly identify the signage in the imagery:

• Need to maintain the functionality to zoom in and examine the full resolution image
• Show the bounds of the recognized object in the image. The default styling for the bounds was not very nice, is it possible to customize the style or have it togglable?

cc @rasagy

[planemad]

@ajithranka theres one more enhancement that maintains feature parity with the JOSM plugin:

• Click on a image location on the map and jump to the corresponding image. Currently one can only browse using the viewer.

[ajithranka]

Implemented so far:

• Show related mapillary images on clicking a detected object
• Show the mapillary sequence on clicking an image; navigate through the sequence
• Click to open the full resolution image in a new tab
• Click a mapillary icon to jump to that image on the sequence

Blockers:

• Setting detection: true in the mapillary viewer does not show bounds
• Need to figure out how to rotate icons based on the image ca property
• Show a loader on the mapillary viewer while the images are being fetched

[rasagy]

Based on the early feedback from @ajithranka & @planemad, I’ll be updating the icons to look more prominent (brighter, bigger, darker halo). More design tasks on #63.

[rasagy]

Updated the icons to look prominent, and to work well with the new bearing property added for #41 (no more equilateral triangles).

**Right**: Mapillary Photo that detects a restriction sign — _normal & selected states_ **Left**: Other Mapillary Photo in the sequence (doesn’t detect a restriction sign) — _normal & selected states_

[planemad]

@rasagy the longer icon is definitely a more effective indicator of direction, so why have the smaller one at all? Can we just indicate the presence of a detected restriction with a minor modification to the base icon?

[rasagy]

@planemad In the context of this map, the photos which detect the signage are much more important than other photos in the sequence, so I wanted to make sure they visually stand out + are easier to click. A trail can have a lot of photos that don’t detect the signage, so making the icon same for them will lead to much more noise.

Ex:

Also, by default only the photos that detect the signage are loaded when you tap on the detected signage:

And only on tapping on the large icon do you get the trail:

Do you still feel the difference in the icons should be reduced?

[planemad]

@rasagy 👍 the signage photographs are definitely more important and need to be easier to click. Just a size variation though seems hard to spot in a sea of similar shapes and orientation

[planemad]

Also now with the rotated symbols, we can tone down on the direction arrows on the trails which add a lot of noise:

This could be simpler chevrons that dont look clickable.

[rasagy]

@planemad Let me experiment further on the colors for the two mapillary icon. Will try to dull down the other photo icons.

Also agreed about the direction arrows, they also seem to be clashing with one-way arrows which should be more important. Let me figure out where these icons are coming from in your style and update them to smaller grey arrow icons for Mapillary trails.

[planemad]

@rasagy its here https://github.com/mapbox/osm-navigation-map/blob/gh-pages/index.js#L286-L318