LGBTour LA

LGBTour LA
Avatar + path with pride flag colors customization
Tour path mapping
Infocards
The team!

Inspiration

As students without easy access to a car, public transit is our only form of transportation if we want to travel or explore areas outside of the university. However, little information exists on the specific routes we should take to best reach our destinations. By best, I mean by having the most fun while still keeping the route accessible and efficient. A quick Google search results in two to three newspaper or magazine digests explaining public transit routes to the most popular and touristy spots in LA, but no interactive site has actually compiled this information in a way that encourages residents to go out and explore their city. This is especially true of underserved populations like the LGBTQ+ community, who might find it even more challenging to find comfortable and safe third spaces a short bus ride away from their homes. This community has historically fought for their rights on identity for decades. Areas that accept their views, beliefs, and identities can greatly improve the quality of life for this minority. Thus, this issue led us to think, how might we be able to improve public transit for LGBTQ+ residents in Los Angeles?

What it does

Our mobile website connects LA residents and visitors to its rich history of the LGBTQ+ community by providing a map of locations and public transit routes to LGBTQ+ landmarks. It encourages people to venture into the city and gain more knowledge of LGBTQ+ history. We included features such as an avatar and path color changing options with the colors of each flag to support the community’s individual identities. The site also gives users an information blurb explaining the history of the particular landmark they reached.

How we built it

We first implemented a Google maps-like interface that constantly updates the user’s live location. Once the map was established, we gathered a database of significant LGBTQ+ landmarks into a Google sheet. This sheet was sorted by name, address, coordinates, description, and category within the LGBTQ+ community. Once the data was collected, it was scraped and fed into our code. We designed a simple, but bright interface with home, avatar, and map toggle switches that allow the user to easily change their avatar from the home page and start a route through the map page. Once they reach their destination or pass by a landmark on their way, a scrollable information page will pop-up, allowing the user to learn more about the history and significance of their location.

Challenges we ran into

Integrating live data from Google Sheets had its challenges. We wanted to create a scraping tool that could update the data in real time, but figuring out how to extract and format it into a usable JSON structure took some trial and error. After testing different export methods, we decided to publish the Google Sheets as a live TSV file, which allowed for smooth updates. One of the main challenges was sending data between different files and making sure it could be accessed across multiple pages. Since our fetch function was asynchronous while the rest of our code ran synchronously, we had to find a way to get them to work together properly. We also had some issues with updating the info cards for each location dynamically. At first, the values wouldn’t refresh correctly when switching between locations. We fixed this by making sure the div container cleared automatically whenever a new location was selected or when clicking anywhere else on the map. Customizing pride flag avatars and mapping personalized paths to the main page was another challenge. Transferring data between JavaScript files wasn’t as simple as we expected, especially when working with script tags in HTML. To make it work, we used getItem and setItem in Local Storage, which let us store and retrieve values easily across different files. Some of the challenges we ran into while building the web application worked.

Accomplishments that we're proud of

We are proud of our overall visual branding design and user customization with pride flag colors, snapping tour routes to LA public transit, conversion of Figma pages into HTML and CSS, visualization of different LGBTQ+ sites in LA combined with a filtration system based off specific LGBTQ+ identities, and scraping data from the Google Sheets to the HTML web page.

What we learned

The overall system of page functions and interactions should be planned in advance, as we had some difficulty linking together our different pages for a cohesive user experience. We also learned that comments are really helpful! This is especially useful when collaborating with other team members on development.

What's next for LGBTour LA

In the future, we would write cleaner code in order to create more legible documentation so that necessary revisions can be made efficiently. We were interested in potentially incorporating AR technology into each historical site, in which users can use an AR camera to overlay historical images to a modern-day street view at each site. Considering the history of zines in LGBTQ+ history, we were also interested in printing our identity-specific tour routes in zine format, allowing users to read through a tour route’s history in physical format and get off screens whilst traveling.