Berkeley County Museum Interactive Map Wall - Interactive React and Electron Museum Kiosk
The Berkeley County Map Wall is a large format touchscreen kiosk built for the Berkeley County Museum. It lets visitors explore the American Revolution through an interactive map of historical sites, people, and stories. The app blends geospatial visualization, multimedia content, and a headless Drupal CMS to create a high quality museum experience.
I contributed to this project as part of a collaborative engineering team.
ReactElectronMapLibre GLSCSSDrupal JSON APINode
Client Background
The Berkeley County Museum preserves and interprets the history of Berkeley County, South Carolina, with a particular focus on Revolutionary War stories, early settlements, and cultural landscapes. As part of a broader exhibit renovation, the museum wanted an interactive digital feature that would help visitors explore these stories geographically rather than through static panels.
The Map Wall kiosk was created to give guests an intuitive way to discover people, places, and events directly on a large touchscreen map. The experience blends historical content, multimedia elements, and spatial storytelling into a single interactive display suited for all ages.
Project Goals
Present Local History Through Geography
Give visitors a map-driven way to understand Berkeley County’s Revolutionary War history by exploring where major sites, people, and stories intersect.
Create an Intuitive, Touch-Optimized Exhibit
Design a user interface that works naturally on a large touchscreen, with large tap targets, smooth map interactions, and simple navigation pathways.
Ensure all content, media, and map data work without internet access by creating a reliable sync pipeline that pulls data from the museum’s Drupal CMS.
Support Multimedia Storytelling
Allow visitors to open detail panels that include images, text, audio narration, and, when available, video clips to deepen historical engagement.
Provide a Resettable, Exhibit-Safe UI
Include an attract screen, idle timer, and auto-reset flow so the kiosk always returns to its starting state after periods of inactivity.
Challenges and Solutions
• Mapping Performance on Large Touchscreens
Challenge: Map rendering needed to feel smooth and stable, even on kiosk hardware.
Solution: Implemented MapLibre GL with optimized GeoJSON layers, throttled event listeners, and simplified marker geometry for consistent frame rates.
• Creating a Completely Offline Experience
Challenge: The kiosk cannot rely on WiFi or network stability.
Solution: Built a Node-based sync script that downloads all text, images, audio, and video from the headless Drupal backend and stores them locally for instant offline use.
• Clear Visual Organization of Historical Content
Challenge: Visitors needed to browse People, Places, and Stories without feeling overwhelmed.
Solution: Designed category filters, color-coded markers, and consistent card layouts to keep exploration simple and predictable.
• Resetting the Experience for the Next Visitor
Challenge: Exhibits can be left mid-interaction.
Solution: Added idle timeout logic that returns the kiosk to the attract screen after a few minutes of inactivity and clears any open detail views.
• Maintaining High Accessibility for Public Space Use
Challenge: Exhibits must be readable and intuitive for a wide range of users.
Solution: Applied touch-first UI patterns, large buttons, high-contrast visuals, and minimal multi-step actions.
Deployment and Testing
In-Museum Testing
Validated the kiosk on museum hardware to ensure map performance, audio playback, and touch reliability worked under exhibit conditions.
Content Sync Validation
Tested multiple full sync cycles to guarantee that the kiosk stayed up to date with the museum’s Drupal CMS content and remained functional offline.
Touch Interaction Assessment
Confirmed that panning, zooming, marker selection, and scrolling felt natural across different ages and hand sizes.
Idle and Attract Screen Behavior
Monitored reset timing and loop behavior to ensure the kiosk returned to a clean state consistently.
Results
A More Engaging Historical Overview
Visitors reported enjoying the ability to explore the county’s Revolutionary War history spatially rather than through static signage.
Improved Visitor Flow
Guests could independently browse content without requiring staff guidance, reducing bottlenecks during busy days.
Deeper Contextual Learning
The combination of map visualization, story panels, and multimedia content helped connect historical narratives with real geographic locations.
Durable, Offline-Reliable Exhibit
The kiosk performed consistently through long museum operating hours without needing manual resets or network connections.
Value Added
Spatial Storytelling for All Ages
The map interface gives guests a dynamic, self-guided path into Berkeley County’s historical landscape.
Reliable and Easy for Staff
Automatic syncing and offline stability mean the museum can update content without technical overhead.
Foundation for Future Expansion
The app’s architecture supports adding more stories, media, or new geographic layers over time.
