Efficiently Drawing a Large Number of Identifiable Polygons in Mapbox GL - mapbox

Question

"I am using Mapbox GL to draw a large number of equal-sized polygons on the map. I am currently using the addLayer method to achieve this, but when the number of polygons becomes large, the performance of the map becomes very slow and it becomes difficult to use. Is there any other way to draw a large number of polygons that is more efficient and does not compromise the performance of the map? It is also important that each individual polygon is identifiable so that I can interact with it."
I manage to draw 50*50 rectangles, however, the page became really slow. This is my code implementation:
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainerRef.current,
style: "mapbox://styles/mapbox/light-v11",
center: origin,
zoom: 22, // starting zoom
});
map.on("load", () => {
// Add a data source containing GeoJSON data.
var iter;
var destination = [-86.872238, 40.46873];
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 50; j++) {
var pixelOrigin = merc.px(origin, 22);
const pixelDest1 = [pixelOrigin[0], pixelOrigin[1] - 38];
const pixelDest2 = [pixelOrigin[0] + 38, pixelOrigin[1] - 38];
const pixelDest3 = [pixelOrigin[0] + 38, pixelOrigin[1]];
const cordDest1 = merc.ll(pixelDest1, 22);
const cordDest2 = merc.ll(pixelDest2, 22);
const cordDest3 = merc.ll(pixelDest3, 22);
if (j == 0) {
iter = cordDest3;
}
map.addSource("x: " + i + "y: " + j, {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Polygon",
// These coordinates outline Maine.
coordinates: [
[origin, cordDest1, cordDest2, cordDest3, origin],
],
},
},
});
origin = cordDest1;
map.addLayer({
id: "x: " + i + "y: " + j,
type: "line",
source: "x: " + i + "y: " + j,
layout: {},
paint: {
"line-color": "#808080",
"line-width": 1,
},
});
}
origin = iter;
}
// Add a black outline around the polygon.
});
// Clean up on unmount
return () => map.remove();
}, []);

Answer 1

You should use only one source with all features and one layer to render them.
You can make the individual features identifiable via their properties (you can use Map#queryRenderedFeatures to access the property).
const features = [];
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 50; j++) {
...
const feature = {
"type": "Feature",
"properties": {
id: "x:" + i + "y:" + j,
},
geometry: {
type: "Polygon",
coordinates: [[origin, cordDest1, cordDest2, cordDest3, origin]],
}
};
features.push(feature);
}
}
map.addSource("polygons", {
"type": "FeatureCollection",
"features": features,
});