Feature Request: Leaflet.VectorGrid for rendering medium to large datasets efficiently in Leaflet

[Jo-Schie]

Hi guys. First: Great work. Thanks for this library!

Any chance rendering vector tiles could make it into the project here?

https://github.com/Leaflet/Leaflet.VectorGrid.

It's one of the most important features besides raster tiles to display large datasets. Otherwise, Leaflet in R/Shiny is always bound to work with very small polygon datasets or operate with a very low/unusable rendering speed.

This issue was moved from the leaflet repo for R here as suggested by @tim-salabim

[trafficonese]

Hey, thank you.

Yes I think I could add this plugin here, I tried some GeoJson files and it worked pretty straightforward, although currently I'm not sure how to implement the coloring method and so far I couldn't get a Protobuf example to work. I'll have to dig a little deeper but I keep you posted.

[Jo-Schie]

Hi @trafficonese . That Sounds amazing! I will help testing as soon as there is a first version implemented. Unfortunately I do not have JavaScript Knowledge. Otherwise I could help developing as well.

[trafficonese]

I'm not sure the plugin does what you want it to do. If you are plotting spatial data (which will be converted to GeoJSON) I don't think it will be faster than the basic leaflet functions and possibly might even be slower. I think the best choice for large spatial data might be leafgl or mapdeck.

As I understand it, the only advantage of the plugin is that you can use vector tiles from Mapbox, Maptiler or Nextzen for example via protobuf and define the styles inline. I've already included the Tangram plugin which does the same thing but requires using a scene.yaml file for the styling.

Anyway, I'll try to publish my current state during this weekend, then you can check it out.

[trafficonese]

I just published the branch "vectorgrid", but I am afraid it is far less efficient than leafgl.
However, using vector tiles through protobuf could be a nice addition though.

You can install the branch with:
remotes::install_github("trafficonese/leaflet.extras2@vectorgrid")

I also included 2 examples in ./inst/examples/: vectorgrid_app.R and vectorgrid_pbf_app.R (You need to insert your own API-key there).

But you will see that even with 100k polygons, the map is already struggling a lot. An idea would be to create your own tile-server, upload the big data there, convert it to protobuf and display the data like that. But that would restrict you from using fancy labels, popups etc.

[Jo-Schie]

Hi @trafficonese. Sounds like progress!! The option with the tile server was exactly what I was thinking about when requesting that feature. I knew about leafgl but documentation suggests it’s quite experimental still. As far as I can see there is no real other option then using an own tile server... is that something that would already work in the current version? I’ll have a look at your examples on the upcoming weekend.

[trafficonese]

@s5joschi Hey, did you manage to try out the vectorgrid branch? Unfortunately, I don't have my own tile server, so I couldn't test that, but it works with the big vector-tile players (Mapbox, Nextzen, etc)

[Jo-Schie]

Hi @trafficonese . Sorry for keeping you waiting so long. We are still at setting up the servers. It's taking a bit longer because there had been some unforeseen things to be finished at the end of the year. But I'm positive that we will be able to test it in the upcoming weeks. I will get back to you, as soon as they are finished, Promise!

[Jo-Schie]

Hello @trafficonese . My friend did a setup with a Geoserver and we are starting to test with a vector and a raster dataset. Just a Short question. In the two examples you have two different functions. One is using Protobuf with addProtobuf() and one is using addVectorgrid() with geojson, however with a local json file in your example. Any ideas on how to create a WMS, WFS or WMTS request to access the data in the app?

A WMS request could typically look something like:

http://XX.XXX.XXX.XXX/geoserver/test/wms?service=WMS&version=1.1.0&request=GetMap&layers=test%3Aifl_2016_sa&bbox=-110.07341328499507%2C-55.46234504648669%2C-43.15853931193965%2C26.163719164108215&width=629&height=768&srs=EPSG%3A4326&styles=&format=image%2Fjpeg
WFS:

http://XX.XXX.XXX.XXX/geoserver/test/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=test%3Aifl_2016_sa&maxFeatures=50&outputFormat=application%2Fjson
And WMTS with open layers

http://XX.XXX.XXX.XXX/geoserver/test/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=test%3Aifl_2016_sa&maxFeatures=50&outputFormat=application%2Fjson

We are also looking into Protobuf but that has much less Learning material online yet.

[trafficonese]

You should use the addProtobuf function, which gets the vector tiles from an URL. Maybe this tutorial can help you:
https://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html

The URL should look something like this:
http://XX.XXX.XXX.XXX/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A4326@pbf/{z}/{x}/{-y}.pbf'

[Jo-Schie]

HI @trafficonese. We are still working on the geoserver side. Seems to be mainly a challenge of creating the correct url.

Meanwhile i'd also like to test it with mapbox which might be an easier option and also more relevant to a larger group of users. I was able to load all default tilesets with your example code but not a custom tileset created with own data in mapbox studio, which I can sucessfully access via an api request. Have you tried it with a custom tileset from data that you uploaded to mapbox as well?

Some example api request from the mapbox reference:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/12/1171/1566.mvt?access_token=pk.eyJ1Ijoiam9oYW5uZXNzY2hpZWxlaW4iLCJhIjoiY2tpMWhlb21vMHFkNzJxbXNjazhkNGxnOSJ9.typEyzWrLhDqYJ_KxXKHlQ

maybe this is also some missing option or step in mapbox studio to make the data available via the form that you use in your code?

"https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?access_token={key}"