Building a full JS deep zoom image viewer
summary
Built a production deep-zoom floorplan viewer as a pure JS React Native component (under 500 lines) using backend-generated tile pyramids, proved first with react-native-maps then replaced by a custom tile layer driven by Reanimated 2 and gesture handlers. Solves centered-marker precision, virtualizes visible tiles to avoid OOM, handles JPEG/PNG and PDF pages as images, removes dependency on Google SDK (Google logo and lat/lon projection issues), works on low-end Android tablets with some missing UX like double-tap zoom.
AI-written summary · about
chapters (12)
- 0:00Introduction and speaker intro
- 3:31Project background and goals
- 8:06Initial blueprint viewer v0
- 11:15Mobile interaction challenges
- 18:06Moving to image pyramids
- 21:56Deep Zoom basics explained
- 26:14Proof of concept with react native Maps
- 33:46Limitations of react native Maps
- 36:40Exploring alternatives
- 38:51Final production component
- 44:19Future improvements and next steps
- 46:05Q&A and closing
related talks
50mBuilding with Mapbox GL JS in React
18mBuilding Maps with Impact on React and the JAMstack
22mCan it be done in React Native
09mBuilding blocks of React Native
20mBuilding maps with Impact on React and the Jamstack
40mPushing React Native outside the comfort zone
35mReact Native: Building Fluid User Experiences
27mBuilding high quality mobile apps with React Native