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.

Answer 2

Thanks to Ivan Sanchez I found the solution. For anyone looking for it see this JSFiddle .

'''

    // initialize the map on the "map" div with a given center and zoom
    var map = L.map(
      'map', {
        layers: [map]
      }
    ).setView([-5.0, 19.40], 11);

    //HexGrid
    var bbox = [19.35, -5, 19.5, -5.15];
    var cellSide = 1;
    var options = {
      units: 'kilometers'
    };
    var hexgrid = turf.hexGrid(bbox, cellSide, options);

    //Polygram that will contain the hexagons
    let poly1 = turf.polygon([
      [
        [19.4, -5],
        [19.5, -5.1],
        [19.4, -5.1],
        [19.4, -5]
      ]
    ]);

    _.each(hexgrid.features, function(hex) {
      var intersection = turf.intersect(poly1, hex.geometry);
      if (intersection) {
        hex.geometry = intersection.geometry;
      } else {
        hex.geometry = {
          type: "Polygon",
          coordinates: []
        }
      }
    })


    L.geoJSON(hexgrid, {
      style: function(feature) {
        return {
          weight: 1
        };
      }
    }).addTo(map);
    L.geoJSON(poly1).addTo(map);

'''