Pebble Overview Maps

Overview

A custom interactive map renderer and editor for climbing gym floor plans, built entirely with React Native Skia and Pixi.js. Climbers can browse routes visually, tap to see details, and navigate gym layouts with fluid gestures. Gym staff can use the built-in editor to create and update maps directly within the app.

Technical Details

• Complex path drawing and rendering using React Native Skia
• Pinch-to-zoom and pan gestures via Gesture Handler
• Reanimated-driven animations for smooth transitions across devices
• Touch hit-testing for interactive route selection
• Optimized rendering pipeline to maintain performance on lower-end devices
• Custom map editor with drag-and-drop map creation and editing tools

Motivation

When I first built Pebble, I put together a quick overview map feature using uploaded images that were linked to areas in a climbing gym. It was a good start, but I knew we could create something more interactive and detailed, with all the climbs rendered directly on the map. Other apps had done this, but their maps were static images. The more you zoomed, the more pixelated it got. I wanted to go full vector so that the maps would be crisp at any zoom level. I knew it was a gamble because I wasn't sure if rendering complex maps with lots of routes would be performant on mobile, but I had to try.

Results

The result was a custom map renderer that could handle the complexity of climbing gym floor plans while maintaining smooth performance. It was a significant technical achievement, especially considering the constraints of mobile devices. The maps became a core part of the user experience, allowing climbers to visually explore routes and navigate gyms in a way that felt natural and engaging. The built-in editor also empowered gym staff to keep their maps up to date without needing to rely on external tools or developers. There was a lot of optimizations needed, especially around tricks to get Skia to render efficiently, but in the end I was able to create a map experience that ran fast even on older devices. It was a great example of pushing the limits of what's possible with React Native and Skia, and it set a new standard for interactive maps in climbing apps.

If you want a full rundown, here's a youtube video that serves as a rough how to video for gyms to add their maps to Pebble.