1

I'm migrating from leaflet map to openlayers. My map requires me to display about 12k markers right now and this amount could grow up to about 60k (most of markers are rotated by various angles).

In leaflet, after a lot of attempts I've achived this. I combined leaflet-canvas-markers with my own cache implementation, so at last it's able to display 12k items without any visible glitches (on a relatively strong computer).

Now I'm trying to reimplement it with openlayers. I see Icon markers and RegularShape display on a canvas already, it's cool, but performance is still below required, here is the codepen demo (just increase to 30k markers for example if your computer is too fast):

https://codepen.io/zxwild/pen/KKyRRKv

The question is: How to increase performance to display 15k-60k markers?

On my own implementation I use a hidden canvas, which contains all possible markers variants, and rotated variants are cached too.

So when I need to redraw a marker I just retrieve a required section from this canvas cache by X and Y and copy it to a map canvas, it's a very fast operation.

xwild
  • 1,114
  • 2
  • 9
  • 25

2 Answers2

0

First, I really suggest that you consider clustering - the map will be more readable with it anyway.

Second, if most people do not start with a global world view, you will benefit a lot from using vector tiles - especially with geojson-vt and eventually supercluster for server-side clustering that will allow you dramatically reduce the amount of data loaded from the server.

mmomtchev
  • 2,497
  • 1
  • 8
  • 23
  • 1
    I got a solution in github issues: https://github.com/openlayers/openlayers/issues/13409, now it works fast for about 70k markers. In general having full set of markers is better for visual representation, it's easier to see count of small markers instead of reading numbers. Also I need to adjust markers size by zoom of course. – xwild Feb 23 '22 at 07:15
0

You have 2 options to follow from here.

  1. Use Marker Cluster in OpenLayers: https://openlayers.org/en/latest/examples/cluster.html

  2. Use a WMS layer instead of markers from a tiling service such as GeoServer. At a particular zoom level you can add the option to load markers by reading the map extent and calling the backend with extents passed as bounding box

Kumail Raza
  • 63
  • 5