Issue background
A legacy transportation website featured an interactive “corridor” map showcasing rail ownership and operational data across multiple agencies. The map, originally built years ago, relied on an outdated front-end stack that included Leaflet 0.7.x, Mapbox.js 2.1.5, and custom GeoJSON data.
When the site was migrated to WordPress, the legacy mapping plugin and its dependencies were not compatible with the modern PHP and JavaScript environment. The challenge for the Freshy team was to replicate the original map’s interactive behavior—including layers, filters, and legends—without relying on the deprecated Bedrock framework or unsupported Mapbox.js scripts.
Diagnosis
The original map system featured several key interactive components:
- Layer toggles for “lines on the corridor,” “lines that operate on the corridor,” and “right-of-way owners.”
- Dynamic legends based on agency and ownership data.
- Polyline decorations with directional arrowheads to indicate train movement.
- Hover and tooltip interactions powered by UTFGrid templates.
During the initial audit, the development team found that:
- The data structure was tightly coupled with the old Mapbox.js library.
- The GeoJSON files contained multiple layers of nested attributes (e.g.,
agency,type,arrow) that required parsing. - The arrow rendering logic used
Leaflet.PolylineDecorator, which was no longer compatible with the current environment. - The previous Bedrock configuration stored plugins and dependencies in non-standard directories, complicating migration.
Resolution steps
To modernize and preserve functionality, the Freshy developers rebuilt the map from the ground up while maintaining the data structure and visual intent.
- Extracted and standardized GeoJSON data
The team recovered core.geojsonfiles from the legacy server and cleaned them for use with the new WordPress setup. Each dataset was verified for valid syntax and simplified for front-end performance. - Reimplemented mapping logic with Leaflet
Instead of using the deprecated Mapbox.js library, the developers implemented the core logic directly through Leaflet, creating separate FeatureGroups for corridor, operational, and ownership data. - Built dynamic legends and filters
Using modern JavaScript and WordPress enqueue scripts, the new map generated filterable legends based on agency and owner metadata from the GeoJSON files. This allowed users to toggle lines dynamically without reloading the page. - Created fallback indicators for directional data
Since Leaflet’s modern implementation did not support reliable polyline arrow decorations in the WordPress environment, the team explored visual alternatives such as line highlighting and hover-based emphasis. These adjustments preserved clarity without requiring unsupported scripts. - Integrated client-provided data updates
When the client submitted updated GeoJSON data with extended routes, the developers seamlessly re-imported it and validated map layer synchronization without breaking styling or legend structures. - Optimized for performance and accessibility
Map initialization, tile loading, and tooltip rendering were optimized to minimize load times while maintaining accessibility across devices and browsers.
Final outcome
The final corridor map successfully reproduced the functionality and look of the original legacy system—now rebuilt entirely in a WordPress-compatible, maintainable JavaScript environment.
- The full map system runs natively in WordPress without external plugins or deprecated frameworks.
- Users can toggle and explore rail lines interactively, view ownership data, and access updated legend information.
- Future updates to geographical data can be applied easily using simple
.geojsonuploads.
This project showcases Freshy’s ability to modernize complex, data-driven front-end systems while maintaining the integrity of legacy functionality and visual design.
Need help modernizing your legacy map or data visualization system?
Freshy’s development team can rebuild your custom interactive tools for modern WordPress environments using robust frameworks like Leaflet, Mapbox GL, and React.
Contact Freshy to get expert help today.
