Mapillary images integration?

[Phyks]

Hi,

Depending on the place, there could be many images uploaded from Mapillary. There are a lot of such images in Paris and nearby area where I am living for instance.

I'm not sure how this could be done, but Mapillary images should be free to use for non commercial purposes. They are already integrated in the iD editor for OSM for instance.

Not sure if/how this could be done in Brouter-web, but I'd tend to think this would be a very useful feature.

My typical use case is I was planning a trip in this area where the only infrastructure available is basically main roads, shared with motor vehicles, and without dedicated cycling infrastructure. It is not easy to know in advance whether these roads are large enough / not too busy / etc, so I was doing a bit of Google Street View at the same time. Having Mapillary images embedded in Brouter-web could really help here I think.

Best,

[nrenner]

See https://www.mapillary.com/developer

I haven't found a proper Leaflet plugin after a quick search. Also don't know if this is available for free and under what terms of use.

There is already a very long queue of feature requests and I don't think I will be able to get to this anytime soon (if at all) - so help would be welcome.

[Phyks]

Hi, I found https://bl.ocks.org/oscarlorentzon/0a11029a5627028c445a38016c76fb3a which makes use of Mapillary JS lib and might be a good starting point. I can try to have a look. As far as I know, Mapillary images are free to reuse for non commercial projects. Le 8 février 2019 17:47:18 GMT+01:00, Norbert Renner <[email protected]> a écrit :

…

See https://www.mapillary.com/developer I haven't found a proper Leaflet plugin after a quick search. Also don't know if this is available for free and under what terms of use. There is already a very long queue of feature requests and I don't think I will be able to get to this anytime soon (if at all) - so help would be welcome. -- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: #153 (comment)

[nrenner]

Continuing abrensch/brouter#143 here:

I had a look and actually the vector tiles are only generated (and available) for zoom 14 :/ They are extrapolated from there in the Mapillary app.

That's how vector tiles usually work. At a certain zoom level they contain all data and those tiles can be reused for all higher zooms. For lower zooms, it seems you need the additional Overview and Sequence layers.

Leaflet itself doesn't support vector tiles, so you need a plugin. I guess Leaflet.VectorGrid would be my first choice here, but I haven't worked with it yet. The Mapillary Leaflet doc is using Leaflet.MapboxVectorTile, but that is no longer maintained and does not support Leaflet 1.0.

With VectorGrid you can set the maxNativeZoom: 14 option for overzooming/extrapolation, see Protobuf Usage example. To limit zoom ranges see GridLayer minZoom/maxZoom options.

[Phyks]

That's how vector tiles usually work. At a certain zoom level they contain all data and those tiles can be reused for all higher zooms. For lower zooms, it seems you need the additional Overview and Sequence layers.

Ok, from my experience with OpenMapTiles, there are vector tiles for each zoom level.

Leaflet itself doesn't support vector tiles, so you need a plugin. I guess Leaflet.VectorGrid would be my first choice here, but I haven't worked with it yet. The Mapillary Leaflet doc is using Leaflet.MapboxVectorTile, but that is no longer maintained and does not support Leaflet 1.0.

Sure, I came across Leaflet.MapboxVectorTile which does not support Leaflet 1.0. Leaflet.VectorGrid works great and should support click events.

With VectorGrid you can set the maxNativeZoom: 14 option for overzooming/extrapolation, see Protobuf Usage example. To limit zoom ranges see GridLayer minZoom/maxZoom options.

Oh, great, I missed this. I'll have it a go :)

[Phyks]

I have a first working version at https://github.com/Phyks/brouter-web/tree/mapillary.

Should be mostly fine up to zoom 14, with clickable items (output event in the console). Above zoom 14, it should use interpolation, but the render is really not very nice :/ Circles are super pixelated and click events are not working.

I'll try to have a look at it, but sadly, so far, the render beyond Z14 is very far from the Mapillary raster render :/

EDIT: Actually, there is an easy fix which is to use SVG renderer instead of Canvas. Everything works fine then, but this is quite heavy for the browser :/

EDIT 2: Leaflet/Leaflet.VectorGrid#164 (comment)

[nrenner]

Thats not what I would expect.

There is also a discussion in Leaflet/Leaflet.VectorGrid#74, with a reference to another project Leaflet.VectorTileLayer, that seems to implement overzoom properly with maxDetailZoom.

[cbeddow]

Hello! We have another option that may help with the zoom, where we have built a "tile splitter". You can try to use this as the vector tile endpoint and it should force the tiles to interpolate after 14:

The normal vector tile endpoint is:
https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt

The tile splitter is: https://a.mapillary.com/v3/tile_splitter/{z}/{x}/{y}.mvt?tile_url=<tile_endpoint>&split_at_zoom=14

So you'd insert the vector endpoint to get: https://a.mapillary.com/v3/tile_splitter/{z}/{x}/{y}.mvt?tile_url=https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt&split_at_zoom=14

This may be helpful but I haven't fully tested in Leaflet, it was made more to get around similar limitation in Esri JS API. Let me know the results! If I don't respond quickly here I can help with any developer questions at [email protected]

[nrenner]

@cbeddow Thanks for reaching out!

@Phyks I was going to ask if you have tested Leaflet.VectorTileLayer and if I can help?

[Phyks]

@nrenner Sorry for not replying earlier on this, I've been quite busy lately :/ My latest update was #153 (comment).

My current code is in https://github.com/Phyks/brouter-web/tree/mapillary and was working fine as long as I remember. The only downside is that it uses the SVG renderer (and not canvas), so this is quite heavy for the browser :/ I did not yet gave a try to VectorTileLayer.

I've just seen @cbeddow's solution, this might be a nice idea to actually use their tile splitter API (shorter term results). I should have more time to dig into this next week :)

[nrenner]

I just had a look at your branch.

I don't think SVG is what we want either:

• it sometimes crashes Chrome on my machine on lower zooms
• it doesn't rerender on higher zooms (>14), the circles just get enlarged, so you get one large blob in areas with many traces and can't really distinguish individual circles/pictures

The "tile splitter" would be a solution, but causes unnecessary traffic, so it might still be worth checking Leaflet.VectorTileLayer out.

[Phyks]

Update on this.

1. I tried Leaflet.VectorTileLayer, but it does not seem to be a fit for this use case. From "limitations", it does not support point features (and development seems to be stalled :/) so we cannot display individual pictures (and make them clickable), just the segments (which area already covered by the mapillary coverage overlay).

2. @cbeddow I had a look at the tile splitter, but it rejects my queries. It says

"tile_url" with value "https://d25uarhxywzl1j.cloudfront.net/v0.1/14/8188/5448.mvt" fails to match the required pattern: /https://a.mapillary.com/v3/sequences.*/

not sure what is happening here, but it seems it is only working for a.mapillary.com API calls, not the vector tiles :/

---

In summary, the only viable option I seem to have so far is using Leaflet.VectorGrid (which is not heavily maintained either). Canvas renderer cannot handle overzooming the data properly. This is probably a similar issue affecting the SVG renderer which does not let us control the style when overzooming. So we would need a tile-splitting API somehow mirroring the data at higher zoom levels.

This seems like quite a lot of work just to integrate Mapillary imagery. And then, we might want to do the same for OpenStreetCam as well (probably doubling the work, although it seems their website is using Leaflet https://openstreetcam.org, so maybe easier to integrate). Not sure if this is worth it :/

I know in France there are quite a lot of pictures taken since some company with OSM based data are pushing photos to Mapillary (mainy main cycle roads / network are covered with street level pictures). See for instance https://www.mapillary.com/app/?lat=48.46913412243396&lng=0.49860717873502836&z=9.954301028412646&panos=true&pKey=JcI-yCGCi6FAsUK55WKiIA.

Maybe this should be part of a separate viewing app and BRouter-web should just make a link to it?

[nrenner]

Maybe this should be part of a separate viewing app and BRouter-web should just make a link to it?

With the coverage layer active, you already can jump to the same view in the Mapillary map with the layer link bottom right.

[cbeddow]

Any interest on this still? Can you show me the tile URL you're using so I can double check this, if you want to still add it?

[Phyks]

@cbeddow sure, if this is something (easily) doable. Directly using the vector tiles in Leaflet seems quite difficult (especially above the 14 zoom level), so the only viable option so far seems to be the tile splitter you were mentionning.

I tried to use a URL pattern of the form https://a.mapillary.com/v3/tile_splitter/{z}/{x}/{y}.mvt?tile_url=https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt&split_at_zoom=14 as you suggested. In this case, I get an error response from the tile splitter API:

"tile_url" with value "https://d25uarhxywzl1j.cloudfront.net/v0.1/14/8188/5448.mvt" fails to match the required pattern: /https://a.mapillary.com/v3/sequences.*/

The tile splitter API seems to only work for sequences (from https://a.mapillary.com/v3/sequences.*) and not with the d25uarhxywzl1j.cloudfront.net tile endpoint).

[joostschouppe]

I'm confused as to why this has to be complicated. I was able to add the layer manually:

I used the layer we use for this map, see relevant code here.

[nrenner]

What you added is a png raster layer, which is already available in the "Overlays" section as "Mapillary Coverage".

This issue is about an interactive vector layer that would allow to click on image location points and load the corresponding image by their image link/id property.

[gorgobacka]

@Phyks @nrenner
Is there a reason, why this ticket was closed?
I'm really looking forward to see this feature in brouter-web.

[joostschouppe]

I guess because it works now? You simply have to open the "more" layer settings and activate the Mapillary layer there.

[gorgobacka]

@joostschouppe This ticket is for accessing the images. As far as I know, you can only see the coverage currently.

[gorgobacka]

@nrenner Do you know that status of this feature request? Is it closed on purpose or can it be reopened, because it's not implemented yet?

[nrenner]

I guess it was closed because it was unclear how to best use vector tiles and seemed too much effort at the time. Now that we have Maplibre integrated and the vector tiles coverage layer as an example, that might be a good start.

Don't know about usage terms and legal aspects though.

[gorgobacka]

Thanks for clarifying.