Meet Link

Aim

To develop an interactive web-based geography game that challenges users to identify real-world locations using street-level imagery, while providing an engaging, educational experience through intuitive UI, dynamic map interaction, and real-time scoring based on guess accuracy.

Introduction

The Street Wanderer is an interactive geography-based game where players are dropped into random virtual locations and must use visual clues to guess where they are. Whether it's a bustling city or a remote wilderness, the challenge is to pinpoint your location on the map.Fun, educational, and engaging.

Technologies used

Frontend

1. HTML
2. CSS
3. JS
4. React(using Vite)

API used

1. Open Street Map
2. Mapillary

Methodolgy

• The project begins with setting up a simple web application using React. React helps organize the interface into reusable parts like the game screen, map, image view, and score display.

• The layout includes two main views: a street-level image from a random location and an interactive map where the player makes their guess. Styling is done with basic HTML and CSS to keep the interface clean and responsive.

• When the game starts, a random location is selected from a set region. This is done by generating random coordinates. These coordinates are then used to fetch a street image from Mapillary, a platform that provides real-world images taken from streets and roads.

• Once a suitable image is found, it's shown to the player in a view-only format. The player can look around the image to guess where in the world they might be.

• Below the image, a map interface is provided using OpenStreetMap. The player clicks on the map to mark the spot where they think the image was taken.

• After the guess is made, the game calculates the distance between the player’s guess and the actual location. This distance is then used to generate a score – the closer the guess, the higher the score.

• The game then displays the actual location and the guess side by side on the map, along with the distance and score for that round.

Results

The successful implementation of The Street Wanderer resulted in a fully functional, interactive geography-based web application that delivers both educational value and entertainment. Players are dropped into randomized virtual locations through integrated Street View imagery and are able to navigate their surroundings to gather clues. Using an intuitive map interface, they can mark their guesses, which are then scored based on proximity to the actual location.

Key features achieved include:

1. Randomized Location Selection: The system dynamically selects diverse global locations for a varied user experience.
2. Street View Integration: Real-time street-level imagery was rendered using Mapillary API.
3. Interactive Map and Scoring System: Users receive immediate feedback via a scoring algorithm that calculates distance-based accuracy.
4. Responsive Design: The application performs consistently across devices and screen sizes.
5. Timer-Based Challenge Mode: A timed gameplay option was successfully incorporated to increase the difficulty level.

Github repo

Future Scope

• Multiplayer Support: In future versions, the game can be expanded to support real-time multiplayer gameplay, allowing users to compete against friends or random opponents.
• Backend Integration: A backend can be added to store scores, track user progress, maintain leaderboards, and manage game sessions.
• Improved Location Selection: Currently, locations are randomly selected, which may sometimes lead to less interesting or inaccessible areas. A curated list of popular or more diverse locations could improve gameplay quality.
• Custom Game Modes: Adding game modes like "city-only," "landmark challenges," or "guess the country" would give players more variety.
• Mobile Responsiveness: Enhancing the mobile layout and controls would make the game more accessible on smartphones and tablets.

Conclusion

This project successfully demonstrates the development of a single-player GeoGuessr clone using only frontend technologies. By integrating tools like React, OpenStreetMap, Leaflet, and Mapillary, the game provides an engaging experience where players explore real-world locations and test their geographic intuition. Features such as a countdown timer, dynamic scoring based on guess accuracy, and a clean user interface contribute to the overall gameplay experience. Despite being fully frontend and offline-friendly, the game maintains smooth functionality and visual appeal. With potential for further enhancements, this project lays a strong foundation for building more advanced and interactive location-based games in the future.

References

React Documentation

MDN Docs

Mapillary documentation

Open Street Map documentation

Mentors

1. Nakul Agrawal
2. Varun Acharya K.V

Mentees

1. Dhruv Agrawal
2. Shashank Potharaveni
3. Sucheth Katte
4. Suman Pete
5. Aman Nagpal