VTOPO
Custom DevelopmentInteractive Map2023
VTOPO is France's leading publisher of MTB (mountain bike), gravel, and cycling route guides. Their Itinéraires page needed to display over 3,000 routes on an interactive map with complex filtering — a challenge that pushed beyond Shopify's API pagination limits of 1,000 items per request.
The Challenge
3,000+ Itineraries
API Limit: 1,000/page
Map Needs All Points
Complex Filters Required
The core problem: Shopify's API pagination limits responses to 1,000 items maximum. But an interactive map needs all data points loaded simultaneously to render markers, calculate bounds, and enable real-time filtering. Neither Liquid templates nor the Storefront API could solve this without severe performance degradation or multiple sequential requests.
I built a custom Node.js application that generates a complete JSON dataset of all itineraries. The app listens to Shopify webhooks for product creates, updates, and deletes — automatically regenerating the JSON whenever content changes. This pre-compiled dataset bypasses Shopify's pagination entirely, delivering all 3,000+ routes in a single request.
Frontend Features
Interactive Map
Swipeable Table View
Real-time Filtering
Route Details Panel
On the storefront, I developed a custom JavaScript component that renders the interactive map with all route markers. Users can filter by difficulty, distance, elevation gain, discipline (MTB, gravel, hiking), and region. Behind the map sits a swipeable data table — users can swipe to toggle between map and tabular views. Each route displays title, description, image, distance, and difficulty rating. The filtering algorithm was optimized for performance, handling complex multi-filter operations without lag.
- Routes All itineraries loaded and filterable 3,000+
- Load Time Single JSON request vs multiple API calls Optimized
- UX Seamless map/table switching with filters Excellent
- Maintenance Auto-sync via webhooks Zero Manual