Handle geotagged media in maps (estimated: 16)

[janagombitova]

We are now capturing location information for all media questions as a default setting. Geotagging was implemented based on the need to provide the ability to perform quality checks on the collected photos and videos. Simply said, to give our partners a way to answer the question: How do I know that the photo was taken at the location where it was supposed to be taken?

All user stories are captured here: https://docs.google.com/document/d/1pFKNdT0QrCOt5RDdq42i72_bQ3WHHJy1xxcUw1fc5Zw/edit

At this point the location information is shown in the dashboard under the media link, latitude and longitude. This is informative but does not directly give our users value. They need to add the information to a map and reference it with the data point location as well, to answer the above mentioned question. We will be adding the location information into the raw data reports as well, which will allow our users to further use the information in other tools to analyse to location patterns, but we should also provide value without expecting our users to need to use the data in other tools.

All documentation and discussions are captured here: https://github.com/akvo/akvo-product-design/issues/74

@loicsans and @Kiarii can you please take a look at this issue and provide a solution?

[janagombitova]

Discussion from the planning poker session today

Goal of this functionality is to provide the users with a way to validate their photos, a data quality check. We capture by default the location information of each photo and video with the Flow app if possible. The need is to give user an indication on the locational relation between the photo and the data point location.

One of the implementation ideas was to calculate the distance between the location of the photo and the data point. However, the accuracy plays a role and thus needs to also be either taken into account or shown in a way the user can easily understand. As this implementation is complex with many unanswered question we decided to push this for later. It will be handled first here https://github.com/akvo/akvo-product-design/issues/141

For now we will display the location points of the photo in relation to the data point - after the user selects the point on the map the photo location will be indicated on the map. The implementation should be implemented is such a way that the UI rendering is shown on both maps that we use in Flow - the general map and the CartoDB maps.

[janagombitova]

Implementation design

Expected behaviour:

• user clicks on a data point on the map
• in the side bar the submitted form is rendered
• on the map new points are shown that indicate the geotagged photo(s)
• if the user clicks on one of the photo points a little window is rendered showing the image that was captured in this location

[janagombitova]

Together with @kymni and @Kiarii we looked at the 1st testable implementation of this feature, where the expected behaviour was that once the user clicks on a point (which has a photo that is geotagged) its location will immediately appear on the map as well. However with this implementation we ran into a few complications:

• if the location of the photo is identical with a location of a point the both points overlay and the experience is confusing
• if we zoom into the area where the data point and photo points are shown the zoom level might not suffice
• how to deal with multiple photos in one point that were collected in a radius smaller than 50m (max zoom level)

As a result of these learnings we propose a different approach. After clicking on a data point now photo location will be shown. Above each photo the link "show on map" / "hide from map" (identical as with geoshapes) will be given for the user to add the point of the photo to the map if he/she wants. Secondly, also when the user hovers over the photo to location is shown on the map.

image location on map.pdf

With the 2nd implementation we aim to learn if this is a more understandable and smoother user experience - the user does not have to figure out himself what the extra point on the map means, but chooses if he want to see the location on the photo on the map or not.

The pending question is: What if I want to see the location of all photos at once for the data point? Can I show the location of all submitted photos?

[janagombitova]

From review meeting with @Kiarii and @kymni we agreed to:

• change the position on the Show/Hide link for geoshapes to unify with this implementation https://github.com/akvo/akvo-flow/issues/1744
• change the sentence structure of the link to:
  • Show photo on map.
  • Hide photo on map.

[janagombitova]

@kymni I have only one comment to the implementation currently on UAT1. I opened a data point, clicked on "Show photo on map", all worked super smooth, but then I clicked on another point on my photo remained shown on the map even though it did not belong to the new data point that I selected.

I like that you can have multiple photo locations shown on the map from one data point, but once the user selects a new data point to preview or a new survey, the photos should not be shown on the map anymore.

New point selected

New survey selected

Second thing. @Kiarii suggested to change the link a bit to: "Show photo location on map" and "Hide photo location on map"

Besides these two points, the implementation works very nicely with hovering over an unselected photo, over a selected photo, showing and hiding on the map, showing together with geoshapes... Well done!

[janagombitova]

👍 passes 1st UAT sprint freeze test

[janagombitova]

missing test plan, but fix works as expected 👍

[janagombitova]

👍 works like a charm, well done everyone!

[janagombitova]

passes 2nd round of regression tests as well 👍