Since Philadelphians created the first cheesesteak in the 1930’s, the Philly Cheesesteak has become a quintessential Philly cultural icon. The sandwich even has a dedicated National Day: March 24th.

In celebration of National Cheesesteak Day, I built a web app that will find the nearest top ranked restaurant that serves cheesesteaks (or seitan cheesesteaks) and provide walking directions from the user’s current location.

Try out the app, view the source code, and continue reading to learn more about the application.

Philly Cheesesteak Finder

This app builds upon a series of short-fuse projects and largely utilizes code from the recent Eagles Super Bowl Parade map that my colleague Kelly and I built with help from Chris Pollard. There are definitely some kinks in that application, but hey, it was a one-day-use app built in the course of about 24 hours.

Anyway, the Philly Cheesesteak Finder app is similar in motive – connect users with a restaurant nearest to their current location.

Data Gathering

I needed to compile data quickly, so I turned to Yelp for information on top ranked restaurants.

The important caveat here is that the list of locations used in the application includes restaurants that serve cheesesteaks (or seitan cheesesteaks) and also have a high Yelp rank – this is not a list of the top cheesesteaks in Philadelphia.

I used “Cheesesteak” + “Near Philadelphia, PA” as the search parameters in Yelp and sorted by rating.

search?find_desc=cheesesteak&find_loc=Philadelphia,+PA&start=0&sortby=rating

I should mention that I complicate the user’s understanding of the underlying data by piling on the “Top 10 Spots for Authentic Philly Cheesesteaks” by VisitPhilly, but this list contained too many famous Philly Cheesesteak locations to exclude. The summary brief for the Visit Philly article describes the list of restaurants as Visit Philly’s “picks for the best places to go for a genuine Philly Cheesesteak experience”.

Note that there is almost no overlap between these three sets of data:

1. Top 10 Ranked Yelp Restaurants serving Cheesesteaks
2. Top 10 Ranked Yelp Restaurants serving Seitan Cheesesteaks
3. Visit Philly Top 10 Spots for Authentic Philly Cheesesteaks

This map displays the location of all restaurants included in the Top 10 lists mentioned above:

Building the web app

The user interface was laid out using CSS Grid to create a responsive design that would also work on mobile devices. The basemap was styled with Mapbox Studio and Mapbox tilesets were loaded in as feature layers using Mapbox GL JS.

A combination of the Mapbox Directions API, jQuery, and Turf were used to determine the nearest restaurant location.

Coordinates were sorted and stored as variables to be used in finding the nearest location and to overcome issues related to the relative position of the user location and the restaurant coordinates.

const sortedLons = [loclong, nearestEatery[1].geometry.coordinates[0]].sort((a, b) => {
 if (a > b) {
 return 1;
 } else if (a.distance < b.distance) {
 return -1;
 }
 return 0;
 });

const sortedLats = [loclat, nearestEatery[1].geometry.coordinates[1]].sort((a, b) => {
 if (a > b) {
 return 1;
 } else if (a.distance < b.distance) {
 return -1;
 }
 return 0;
 });

If you neglect to account for the compass position (i.e. NW vs SW) of the points, you can end up drawing a route between incorrect locations (pictured below).

Future considerations

In the future, it could be cool to use the Yelp API to add information like live rankings, current number of reviews, and accessibility information like wheelchair access. It could also be helpful to users to visualize restaurant inspection information, although Philadelphia has not adopted this data standard to date.

With additional time, I would also like to consider alterations to aspects of cartographic styling, like the restaurant points and basemap. It’s always important to put the needs of your users first, and I didn’t conduct any user testing for this app yet – styling adjustments could improve user experience.

Want help building a similar tool?

I work to build community around our work and sometimes I hack together things like the Eagles Superbowl Parade Map and Philly Cheesesteak Finder in my spare time.

My colleagues are the real pros. They work to build sophisticated web applications and tools that leverage advanced geospatial technology.

We’re always excited to talk geospatial tech and would love to hear from you! Reach out if you’d like to talk about your idea!