Tileset interactions and clipping?

[csbrown]

I have a use case where I am loading multiple sets of .pmtiles, and would like to draw the interaction between them on the frontend.

As an example, I have vector tiles for the boundaries of States, and also for HUCs, and also for EcoRegions. I would like to .fill the intersection of a particular State, a particular HUC and a particular EcoRegion, or .fill the various EcoRegions that are within a particular State and a particular HUC, etc.

There are a variety of Canvas methods to help with this in general such as .clip and globalCompositeOperation, but I am having a couple of difficulties using them with the pmtiles leaflet layer:

1. The states/hucs/ecoregions are broken into tiles, so these paths would need to be combined in order to .clip
2. It's not clear when the .draw method of my symbolizer is finished, so even if I manage to store my paths, I don't know when it is safe to .clip the result.

Any thoughts on how to manage these problems? It seems that an afterDraw callback could be a helpful addition to the symbolizer interface that gets called say here? Any help is appreciated.

[bdon]

I would calculate the relevant polygons on the server side and encode those in the tileset. The goal of this library is to do basic drawing only, and advanced operations like clipping are out of scope.

[bdon]

either

1. implement a custom Source that fetches each tileset, calculates the intersections, and returns a re-encoded MVT of the new polygons, that can be symbolized as usual
2. implement afterDraw as a Symbolizer that goes last, and refers to whatever internal state you are storing

At this point expanding the API surface area isn't preferred.

[csbrown]

"implement afterDraw as a Symbolizer that goes last" - this is somewhat unfortunate, because the only method I can implement on this additional Symbolizer is .draw, which will get called a large number of times. So, if I need a single afterDraw operation, I need to do weird setTimeout logic or count the number of tiles visited in the previous symbolizer, or other jankiness.

I think that a one or two line addition here would expand the Symbolizer API to accept an afterDraw method that gets called exactly once after my Symbolizer.draw() method has been called on all of the tiles/features that it will be called on. Such a change could be made backward compatible by simply checking to see if the rule.symbolizer has an afterDraw method or not.

I would be willing to complete and submit a PR for such an addition and update the documentation. It doesn't appear that there are any tests surrounding the .drawing functionality of Symbolizers.... I could be convinced to create tests, but might need some direction since there aren't any related tests.

[csbrown]

Also, "At this point expanding the API surface area isn't preferred" - is there a reason for this? Does protomaps not intend to maintain the leaflet plugin going forward?

[bdon]

expand the Symbolizer API to accept an afterDraw method

The lifecycle of a tile is not straightforward, because this library also handles label collisions - when a label overflows onto a neighboring tile that was already rendered, it cause a re-render of the stale tile. So an afterDraw event for a tile would have unintuitive behavior.

It doesn't appear that there are any tests surrounding the .drawing functionality of Symbolizers.... I could be convinced to create tests, but might need some direction since there aren't any related tests.

The output of these interact with the Canvas 2D API, so we would either need a mock Canvas implementation and write assertions on that, or test pixel outputs - both of those felt brittle to me but maybe there is another approach?

Also, "At this point expanding the API surface area isn't preferred" - is there a reason for this? Does protomaps not intend to maintain the leaflet plugin going forward?

I intend to maintain the current set of features as a viable option of doing basic vector tile rendering and labeling for Leaflet. more demanding use cases should use MapLibre GL JS.