The Philly Way

Inspiration

We wanted to create a site that lets people explore Philly through maps in a way that feels more connected to the local community. Whenever I visit New York, I only see the big tourist spots like Times Square, but I never get to experience the real New York, the way my friends from there do. I always felt like I was missing out on the true essence of the city. That’s why I wanted to build a project that gives people the chance to experience Philly the way locals do, with insights into hidden gems and neighborhood spots that really represent the city's vibe. It’s all about going beyond the tourist sites and really understanding what makes Philly, Philly.

What it does

The Philly Way showcases multiple interactive maps, highlighting places that locals love as well as some hidden gems. It also includes trivia, local slang, and hidden mini-games to give users a fun and engaging way to experience Philly from anywhere. Whether you're here or visiting from afar, you can dive into the community spirit through our West Philly map, which lets you virtually walk the streets and explore notable spots. If you’re in Philly, you can even use our map to physically walk and follow the route in real life, blending the digital and physical experience.

How we built it

We built The Philly Way using Leaflet.js to create interactive maps. The maps include custom markers with pop-ups that provide descriptions, links, and directions to various points of interest around West and Southwest Philly. We also used HTML, CSS, and JavaScript for the structure and design, ensuring a smooth, mobile-friendly experience. Each map is tailored to showcase notable locations, hidden gems, and key landmarks that give users a well-rounded view of the city.

Challenges we ran into

One of the biggest challenges was locking the map boundaries to focus specifically on West and Southwest Philly. We also had to find the right balance between including enough points of interest while keeping the site easy to navigate. Another challenge was adding a personal touch to each description, making it feel authentic to people who live in Philly or know the city well. We wanted to make sure the map was both informative for visitors and relatable for locals.

Accomplishments that we're proud of

We’re really proud of how the interactive maps came together. We managed to create a digital experience that feels local and community-driven, while still being accessible to anyone unfamiliar with the area. We also successfully embedded directions and links, making the map functional for real-world navigation. Another accomplishment is the way we personalized the descriptions—turning each location into more than just a dot on a map, but a real piece of Philly culture.

What we learned

We learned a lot about working with Leaflet.js, especially how to create interactive, user-friendly maps with custom features. We also gained experience with locking map boundaries, embedding pop-up information, and connecting real-world data to provide directions and useful links. Beyond the technical skills, we learned how important it is to add personal touches to projects like this, as it helps users connect more deeply with the content.

What's next for The Philly Way

Next, we plan to expand the maps to cover even more neighborhoods in Philly, adding East Philly, North Philly, and South Philly to the project. We also want to include more local trivia, community-led suggestions for hidden gems, and possibly integrate a way for users to contribute their own favorite spots. Eventually, we aim to turn The Philly Way into a full-scale app where users can follow walking tours, complete challenges, and unlock new areas by exploring Philly on foot or virtually!