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)

In particular, if you want to go lower-level (i.e. more control over graphics, rather than something optimized for web mapping in particular), I'd look at Pixi.js

Good luck!

I think a differentiation between a full framework (like Next.js) and a lib (like a Canvas rendering lib) is helpful here. There's a lot more that goes into modern web graphics rendering than just caching, including optimizations within JS itself, its interactions with Canvas and the DOM, WebGL, WebGPU/WASM for expensive calculations, virtualizations, tiling, transformations/filters, etc.

I'm not a graphics programmer so I can't get into much detail here, but I think of it as the difference between making a game in an existing engine (Godot, Unity, Unreal) vs trying to make your own engine and rendering pipelines. It all compiles down to machine code, but their optimizations can be several orders of magnitude better than what a solo dev can realistically write in their own time.

With Canvas rendering, there's been a lot of techniques that companies have worked on over the years. Take a look at Felt, for example, to see a full web app that makes extensive use of render optimizations. They have a nice writeup about it: https://felt.com/blog/from-svg-to-canvas-part-1-making-felt-.... Figma too, but it's less a direct comparison to your app.

That's fine, you can still use Typescript with vanilla JS and not use any frameworks. Typescript shouldn't result in unnecessary code in production. It's just developer hinting during dev, but it gets removed during the build.

If you don't want to use a build tool at all, you can also use JSDoc formatting to provide some basic type and parameter information. Your IDE can still use that to provide hints.

It's totally up to you. If it's a solo dev codebase that only you ever see and you don't want to type it, then don't :) If you do end up wanting to share the code though, Typescript makes it a lot easier for other devs to use because they can instantly see when something is wired up wrong during development.