How to add square tiles to leaflet map with hovering effect?

Question

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.

I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.

If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?

UPDATE:

Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.

And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.

Answer 1

This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.

Updated after your update:

MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:

    _showCoverage: function (e) {
            var map = this._map;
            if (this._inZoomAnimation) {
                    return;
            }
            if (this._shownPolygon) {
                    map.removeLayer(this._shownPolygon);
            }
            if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
                    this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
                    map.addLayer(this._shownPolygon);
            }
    },