Глеб Щукин
Глеб Щукин

Reputation: 21

Maplibre.gl zoom perfomance with symbol layer

I'm getting big performance problems on the map with zoom event when I try to display more than 2000 points on a symbol layer type.

It doesn’t matter how I draw the symbol on the layer: it can be an icon added individually via map.addImage('my_icon', img); or just a letter from light glyphs set which consisting of only one font.

{
  "id": "demand-default",
  "layout": {
    "icon-image": "order_icon"
  },
  "source": "order-source",
  "type": "symbol"
}

or

{
  "id": "demand-default",
  "layout": {
     "text-field": "o",
     "text-size": 10,
     "text-font": ["Barlow Regular"]
  },
  "source": "order-source",
  "type": "symbol"
}

icon-allow-overlap doesn't change anything

I can’t find any mention anywhere that there are problems with the symbol layer type and I have a feeling that I'm missing something important.

I try to remove styles for any other layers, getting an empty map with a single layer and still seeing lag when changing the zoom. But as soon as I change the layer type to circle, everything starts working fine even with huge styles, strict rules and states for other layers.

I highlight that my problem is only on zoom. Drag and panning work fine with this. It's as if there are listeners for the zoom event that try to do heavy calculations on each integer zoom step. Only for symbol type. Even with a completely empty styles file.

Is it really impossible to draw more than a thousand points for the symbol type?

And now I can see that the findMatches method takes a very long time to complete at each zoom step

Add example with 10k random points

Upvotes: 2

Views: 476

Answers (0)

Related Questions