Syncing Drupal and React for a Custom Interactive Map for Tampa International Airport

A new website as easy to navigate as the airport itself

Tampa International Airport consistently ranks #1 in customer satisfaction thanks in part to how easy it is to navigate. Our goal of the redesign of tampaairport.com was to make sure their Drupal 10 website was just as easy to maneuver. Their team wanted to level up their website’s airport map from simple and static to interactive and dynamic.

React application with Drupal content management

The application's goal was to fetch data from the newly implemented site, providing users with a tool to easily navigate the airport, search for specific locations, and even order food in advance at airport restaurants and cafes. The decision to build a React application stemmed from its performance and ability to integrate with the Drupal site, enabling site editors to consolidate, manage, and edit all content through the Drupal UI. This approach ensured that content updates could occur dynamically without the need for additional development efforts, setting up their team to sustain the custom map.

Recognizing that the primary users of this application would be on mobile devices, we worked hard to ensure that all JavaScript libraries and node packages were lightweight and optimized for mobile performance. 
We significantly reduced the overall footprint of the React application before integrating it into the Drupal site by leveraging techniques like code splitting, which separates components that can be loaded independently, and tree shaking, which removes unused code when bundling multiple JavaScript files. This reduced package size ensures a more efficient experience for users accessing the app on their mobile devices.

React Leaflet library

From a technology standpoint, the application is built using React Leaflet, a library that establishes connections between React and the open-source Leaflet JavaScript library.  The incorporation of Leaflet enables us to display custom images, replacing traditional geographical maps within the interface. To dynamically display our SVG maps, we utilize the ImageOverlay component using map information provided by our custom API endpoint provided by Drupal. We use memoization at the location level so that when users switch between maps, the application swiftly recalls previously viewed layers, ensuring a seamless and responsive experience.

  const mapImage = useMemo(() => {
    return <ImageOverlay url={props.mapSVG} bounds={bounds} />;
  }, [props.mapSVG]);

Leaflet provides us with the flexibility to set our own boundaries for the map layer. In this application, we opted for a 1000 by 1000 base grid. Within the Drupal UI, editors have the ability to effortlessly add new map locations by specifying X and Y coordinates, effectively placing locations on the map within the established grid.

Furthermore, editors can easily customize the displayed map icons and manage the inclusion of locations within specific icon groupings, all through the user-friendly provided UI. This streamlined process empowers editors to make dynamic adjustments to the map without the need for additional development support.

Interactive user experience

The application also includes a list view of the map in which users can select specific locations, triggering a seamless navigation experience on the visual map. Each location in the list displays details such as their name, description, business hours, current status, and proximity to airport gates. Upon choosing a location, the application responds by centering the corresponding point on the visual map.

This interactive feature enhances user experience, allowing them to effortlessly explore and locate points of interest without manually searching the entire map. The linkage between the list view and the visual map ensures that users can easily transition from browsing a curated list of locations to visually identifying and locating those places on the map interface. It serves as an intuitive method to guide users from the textual representation of locations to their spatial representation on the visual map.

Notably, the list view was designed with accessibility in mind, ensuring better usability for keyboard and screen reader users. This thoughtful implementation caters to a diverse range of users, making it an inclusive and user-friendly experience for all. Check it out for yourself.

The collaboration between the Drupal and React technologies allowed us to build a solution that seamlessly meets the needs of both users navigating the maps and the editors on the Tampa International Airport team. Even though creating this map from scratch was a blast, the custom application I built could easily be applied to another client’s map or way-finding tool.