View Mapillary Images in iD

[gyllen]

Make it possible to view Mapillary (http://www.mapillary.com) images in the editor to derive data (see http://www.mapillary.com/osm.html).

There are two components of Mapillary that you can use for the integration.

1. Mapillary have a tile layer of all sequences located at http://{s}.tiles.mapillary.com/{z}/{x}/{y}
2. Mapillary has an API to get the closest images to a coordinate

http://api.mapillary.com/v1/im/close?lat=38.89356&lon=-77.033634&distance=100&minca=145&maxca=200&limit=3

lat, lon are floats describing the point distance (optional) is a radius in meters from the search point minca and maxca (optional) are the boundaries in degrees of compass angle limit (optional) is the number of images returned (there is a hard cap on 10 at the moment)

The response is:

[
    {
        key: "UU48LXyJTbQ2tcBhADAkgQ",
        ca: 183.3738,
        lon: -77.033634,
        lat: 38.89356
    },
    {
            key: "oxCMad0TIgJE3n3uVdHkMA",
            ca: 183.1661,
            lon: -77.033635,
            lat: 38.89334
    },
    {
            key: "d66i0dZEoL7ZFZq_m3RHgw",
            ca: 183.5387,
            lon: -77.033633,
            lat: 38.893783
    }
]

To access an image use the key returned in the following urls

https://d1cuyjsrcm0gby.cloudfront.net/{key}/thumb-320.jpg
https://d1cuyjsrcm0gby.cloudfront.net/{key}/thumb-640.jpg
https://d1cuyjsrcm0gby.cloudfront.net/{key}/thumb-1024.jpg
https://d1cuyjsrcm0gby.cloudfront.net/{key}/thumb-2048.jpg

[drownedfrog]

+1

[jesolem]

+1 Also, let us (Mapillary) know if you need anything tweaked on our end.

[ybkuang]

+1

[kayD]

+1

[rps333]

+1

[peterneubauer]

+1

[tmcw]

No need to +1 here: everyone sees the value. The most expedient way to integrate this would be to implement & PR it.

[gyllen]

Awesome, @tmcw do you have any pointers and ideas of how you want the integration?

[tmcw]

You would write the integration with the api as a new service, and probably use the gpx layer as an example of writing a new layer/domelement that can integrate with the existing map

[gyllen]

Cool, I would also like to show the Mapillary images on a click. Would you prefer that as a popup or what do you prefer there?

[tmcw]

Depends on the UX you create - small thumbnails that expand in a panel might work. popups/modals are probably not the best pattern, since they'd likely interfere with the editing that such images should enable.

[gyllen]

So I have been messing around a little with the code. And as I see it there is 2 ways I can solve this.

1. Load the Mapillary tiles as i suggested in the first ticket (if I am right this is just a matter of updating imagery.json with the Mapillary tiles). Then use the close API to show the closets image from mapillary int the side bar on a click and somehow mark that with a marker on the map. Advantage of this is that this is kind of a small operation and it will put less load on the Mapillary server. Disadvantage is that I do not really have a good idea of how to turn things in to choosing image mode. Since tiles will not be clickable.
2. Use the sequence API from mapillary and download the traces as geojson. Same API will be choosen for selection. By having the linestring as geojson I would be able to make the user interact with them (hover and click). Disadvantage would be that its seems like a much bigger operation since you do not really have this functionality (except for the osm data itself). Also it might be confusing to mix editable data and Mapillary data in this way.

@tmcw Do you have any thoughts on this?

[gyllen]

@tmcv Have you had the time to give this any thought?

[tmcw]

Option 2 sounds better to me - it's somewhat similar to what we already do with GPX tracks as reference, and would mean that the UI for toggling mapillary could be located alongside other layers on the right. This would also be similar to a general image+exif viewer if we ever get a PR/time for that.

[pnorman]

Should this depend on a generic way to open geotagged photos? Much of the user-facing elements should be the same, and I doubt if we can deploy if we're integrating mapping from photos only when users upload them to a third party service, so the generic way ends up being a pre-requisite for this anyways.

[tmcw]

Should this depend on a generic way to open geotagged photos?

I don't think so, unless someone is volunteering to actually build that. Luckily in this case there are people ( @gyllen ) who are somewhat up for implementing this, and their wants may coincide with their skills and time. Unfortunately on the other ticket, we had the wants, but noone with the skills or time.

[peterneubauer]

Hi there, there is some initial work, https://github.com/mapillary/id which we need a bit of feedback on. It looks like

Small screencast here: https://docs.google.com/a/mapillary.com/file/d/0B0YWa-MXQt98VlFaS25BMDVhTkk/edit

So, feel free to try it out and give feedback on

• placement of a location/direction marker for the image found
• extend to which we put mapillary navigation on the map/into the sidebar instead of linking out
• way of displaying mapillary sequences (tiles or GeoJSON)

WDYT? This is not PR-ready, but hopefully will be soon!

/peter

[jfirebaugh]

Hi @peterneubauer, this is looking promising. Thanks for putting in the time to work on it.

I think that rendering the sequences as an interactive layer like on mapillary.com is definitely the way to go. The hover feedback and marker with direction indicator are important affordances. I suggest putting the mapillary layer checkbox in the same group as "Local GPX File" in the background settings panel, and having it toggle both this layer and the image display.

I'm not sold on the current UI for the image as it covers a lot of the map with unused whitespace. I would try out two different ways of displaying the image:

• In an overlay in one corner of the map, like on mapillary.com.
• In a fixed-height section at the bottom of the left sidebar, below the existing contents.

As to "how", you'll want to follow along the lines of iD.GpxLayer and dive in to rendering SVG elements with d3.

[peterneubauer]

Mmh, have the Mapillary sequences rendering now. However, how should I go about to select the nearest photo? Make a new Mode? Right now, only core OSM features are selectable, so this would be an interactive element that is non-OSM. Advise?

[jfirebaugh]

@peterneubauer It wouldn't be a mode, because modes are mutually exclusive, and you want to be able to have the photo available in any mode. "Currently selected photo" would need to be a bit of state that's held outside of any mode, like in the mapillary layer or UI code.

Can you recreate your repository as a proper fork of this one so that you can see diffs of your changes versus iD master?

[peterneubauer]

Looks really bad right now but I got a 30% of the left sidebar for the image, and a mapillary sequence json layer (in red), need probably another layer to place the image marker with direction onto the working area, @jfirebaugh ?

Fork is at https://github.com/mapillary/iD, @jfirebaugh

[peterneubauer]

Have now got a marker on the map, see http://mapillary.github.io/iD/#background=Bing&map=20.12/-77.02209/38.90114, now I think I need feedback on the interaction with it and of course the styling, since it follows mouse clicks. Code at https://github.com/mapillary/id @jfirebaugh . Thanks!

[jfirebaugh]

2354