A performance problem

Adding multiple biomes to the map was, I think, a welcome improvement but the way the map was implemented, it became almost unusable both on desktop and mobile devices.

A new approach was needed to render the map efficiently.

Without diving too much into technical details, the map was initially displayed as a single SVG image with all the landmasses, seas, rivers, mountains, forests and roads. Adding biomes meant adding a new layer of more or less complex shapes in the existing SVG, which made it very heavy to render and manipulate.

Looking at existing solutions, I chose to completely change the way the map is rendered: instead of using a single SVG, I now export 8 separate JPEG images. A script then splits each image into 512x512 pixel tiles, which are then loaded and displayed as a grid of images in the browser. This way, only the tiles that are visible in the viewport are loaded and rendered, which significantly improves performance.

Coupled with some optimizations in the zooming and panning logic, the map is now as responsive as it could be, even on mobile devices.

A preview of a single tile

Also, using different images for each zoom level will allow me to add more details to the map on higher zoom levels.