> What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail?
When you pan (click and drag, or touch and drag on a phone), all the bushes and the background disappear for what feels like a second or two, even if they're the same bushes as before. No network connections are happening during that pan, it's just a redraw that causes them to blip in and out: https://share.cleanshot.com/KvwXCVl7ZpLYk8KzFBN1
On Firefox the panning (before mouseup) is itself much laggier than Chrome. (Firefox generally has slower graphics, in my experience). It also suffers from the disappearing graphics on mouseup issue.
Same thing happens if I zoom in and out, one mousewheel notch at a time - everything momentarily disappears before rerendering.
> Also, what exactly is the large-scale solution you mentioned?
By "big", I just meant literally the larger libraries I mentioned earlier (Leaflet, OpenLayers, OpenSeadragon, Konva, Pixi.js, etc.). They're bigger in both in popularity/mindshare, but also in filesize and complexity, which is what you're trying to avoid. However, they do have optimizations for the graphics rendering pipeline that maybe you can borrow from, if you look at their source code.
Some examples:
* https://openlayers.org/en/latest/examples/icon-sprite-webgl.... (this one in particular is super smooth for me compared to your app's current version, but it uses WebGL)
* https://openlayers.org/en/latest/examples/synthetic-points.h... (demo without WebGL, much laggier)
* https://konvajs.org/docs/sandbox/20000_Nodes.html
* https://www.goodboydigital.com/pixijs/bunnymark/
* http://fabricjs.com//group-dragging
* Benchmarks: https://github.com/slaylines/canvas-engines-comparison?tab=r... (current build seems broken)