Beth Anne DeKeizer

Historic Athens App

A Self-Guided Walking Tour app of Historic Athens.

Project Overview: This app began as a project for the Historic Athens Welcome Center as a hypothetical client. I used SwiftUI in Xcode to build a walking tour app of Athens, Ga for the iPhone. My goal was to make an interactive app that allowed guests to view all their tour options in one easy-to-navigate location.

The Problem: The Historic Athens Welcome Center has a comprehensive list of self-guided tours on their website but it is not very practical for guests on the go. There was no map feature to view all the tour stop locations all at once. The long list of tour stops was also hard to scroll through due to all the information and photos between each location.

The Solution: I began working on the self-guided tour app by building a map for each tour. I used the newly updated MapKit for SwiftUI to build a map with marker points for every single stop on all three tours. It took me a long time to find each latitude and longitude but I loved the way the results looked.

I also created a system of images and colors for each type of location so that guests at a glance would know the different types of places on the map. For example, a red marker with a graduation cap was a school-related location, a blue marker with a house was a house and a yellow marker with a briefcase was a business.

I then made a page for each of the tours with the list of stops which included information for each location. Some of the stops had images I pulled from the Historic Athens Welcome Center website but many of them didn’t.

I created the scrolling list of information by building an ExtractedView where I plugged in the title, subtitle, and information. This allowed me to create a uniform look for each location without having to reset the style for the over 60 locations.

After adding a home page that linked out to each tour option, I was happy with my work up until this point, but guests still needed to scroll down past a lot of information to see all their location stop options. This app still had some of the same problems as the website.

So I learned how to build a carousel on SwiftUI. Using the horizontal carousel of images a guest can easily scroll through all their stop options without being overwhelmed by too much information too early. All the guest sees is the image of the location and its name.

If the guest was interested in a stop they could click on the image where a card would appear on the screen with the address and information about this location. To return to the tour’s page they could click the “X” button to bring them back to their spot in the carousel.

Unfortunately, I was unable to make the MapKit image work on this page at the same time as the image carousel. They wouldn’t fit on the screen together and I wanted to eliminate the need to scroll down on the page. So I created a link that leads to a full-page map with the tour’s markers. I think this looks better than the half-page map that the first iteration of the app had. I think it gives the guest more room to zoom in and utilize the map. I created a back button that would lead back to the tour page as well as a back button that would bring the guest back to the navigation page.

Results: I am very proud of this app, I was able to find solutions to all the problems and issues I found with the self-tour guide website. I taught myself how to add marker locations onto the MapKit as well as how to build a carousel of images in SwuiftUi that if clicked brings up a card of information. For a future iteration, I would love to add a feature that allows guests to pick and choose tour stops from different tours to build their own personal itinerary within the app. This personal itinerary would also have its own generated map with markers and a suggested travel route.