Vector Tiles integration with Leaflet

Hello, I am trying to integrate mapillary with leaflet in order to see the imagery layer in an Angular project.

I have already tried to integrate with Leaflet.VectorGrid using the vector tiles API, the problem are two:

  1. the layer inside leaflet it’s created, but as you can see in the attachment, the points/lines are too big and the performance it’s terrible, even in a high performance workstation,
  2. I want to filter the imagery layer with my user images, but I don’t know how to filter using the API

I really will love your help, :smiley:

Hi! I created a little JSBin with a Leaflet example using the OSM basemap and Mapillary tiles: JS Bin - Collaborative JavaScript Debugging

I added some date filtering and layer styling similar to what we have on mapillary.com. Unfortunately, our tiles (Mapillary) don’t have user information in them right now but we’ll provide an update when we expand the data we have available.

4 Likes

Hi Nikola!

Thanks for your reply.
It’s a shame it’s not possible to filter by user, but it is really useful your example.

I want to ask you if you know if it’s possible to export the imagery layer to geoserver?

Thanks!

We just released the feature to download map data as a GeoJSON: https://help.mapillary.com/hc/en-us/articles/4407521157138-Downloading-map-data-with-the-Mapillary-Web-App
Would a similar feature for downloading the image layer be helpful in this case?

I saw that post, but if I don’t misunderstand, that is only for downloading features like traffic signals, holes, street light and so on, but I don’t see an option to export the imagery/sequence layer like vector tiles.

Thanks

@nikola thanks for the JSBin Demo. Is there a way to solve the performance issue that this demo shows? I cannot even zoom properly on my Mac, M1, Chrome.

I’m not sure how to improve performance in Leaflet, I assume the filtering is causing issues during rendering. We use Mapbox gl on mapillary.com and similar layer styling filtering seems to have no performance issues.

Maybe the example I shared isn’t the optimal way to do it with Leaflet, it’s been a while since I worked with it.