Leaflet clickable grid in polygon

Question

I'm using leaflet.js to show reforestation efforts.

Is there any possibility to create a grid-pattern where every square of the pattern can be linked to a click-event?
Something similar like this.
It would need small squares that would together form a similar polygon as shown above.

I tried Leaflet-pattern, but the squares resize on zoom and there is no option to add an event to the pattern shapes.

Could I use the leaflet rectangle for this? How would I find the correct latitude and longitudes for each square?

Answer 1

You probably want to create a square grid, then calculate the intersection between each grid cell with each polygon.

It's up to you to decide the details of the square grid, and whether you want the same grid for all polygons, or a different grid for each polygon.