05 / 07 · SERRA - Part of Wintersteiger Group

Interactive Dealer & Service Map

An interactive map and list of SERRA Sawmills' global sales partners and service centers, built as a CMS component.

Role: Technical implementation
Type: Client Project // Former Employer
Stack: React Next.js Mapbox GL Supercluster TypeScript REST API Pimcore Headless CMS Figma

The project

A specialized CMS component designed to visualize SERRA Sawmills' global network of sales partners and service centers. This interactive tool allows potential customers to easily locate and contact their nearest representative through a synchronized map and list interface.

What was built

The component features a dynamic map with advanced clustering capabilities to handle high densities of location pins without cluttering the UI. Users can filter results by region or service type, which updates both the map markers and the accompanying accordion-style list in real-time. An overlay system provides detailed contact information and direct action buttons when a specific location is selected, creating a fluid and cohesive user experience.

My role

My role focused on the technical implementation of this complex visualization module within the existing CMS environment. I utilized a mapping library to handle geospatial data and implemented custom clustering algorithms to optimize rendering performance. The state management logic ensures that interactions on the map (zooming, clicking pins) instantly reflect in the side-panel list and vice-versa. I also ensured the component was fully responsive, providing an optimized touch interface for mobile users while maintaining full functionality on desktop.