Building a full JS deep zoom image viewer

Harm weighs the usual advice to reuse existing libraries against the needs of a specific component. Their first version used a pan and zoom image viewer adapted from a React Native Reanimated example. They needed access to the viewport position so users could place a marker precisely beneath a fixed center point.

The next version needed to support large raster plans and PDF pages while keeping downloads, rendering, and interaction responsive. Harm explains that image pyramids split an image into tiles across zoom levels, so the viewer can load only the tiles needed for the current viewport. The team set goals that included 60 frames per second and avoiding memory exhaustion on low-end devices.

The team used Leaflet on the web and React Native Maps on mobile to test tiled plans. The proof of concept displayed the pyramid and markers, but the Google logo and map-oriented interaction and coordinate systems made it awkward for their centered-marker workflow. Harm says the team also found the library’s maintenance situation uncertain at the time.

The team replaced the map component with a custom viewer based on its earlier pan and zoom implementation, adapting it to position tile layers. Reanimated 2 shared values track scale and zoom, while virtualization limits rendering to visible tiles. The production component lets users navigate large plans and place markers, though some loading is visible.

Harm lists double-tap zoom, animated jumps to coordinates, and bouncy gestures as features still to add. Virtualization could improve, and sending visible-tile and zoom state back to JavaScript can cause frame drops. The component is not open source, though the team may consider releasing it if there is interest.