whereisthis.tech

• 

  End Page

• 

  Front Page

Inspiration

My friends and I love playing GeoGuessr and I thought it would be cool to make my own version but for the Virginia Tech campus.

What it does

Players can try to guess where images from their campus were take. They can then click on the map and see how close they were.

How I built it

I used flask for the backend and JavaScript for the front end of the website. To get the images and coordinates, I built a web crawler that picks random street view points within a set of latitude and longitude coordinates and captures the screen along with the location.

Challenges I ran into

The hardest part about this project for me was mapping latitude and longitude coordinates to the relative pixel locations on the map. I was also pretty unfamiliar with JavaScript so I ended up visiting stack overflow many times throughout the weekend.

Accomplishments that I'm proud of

This was the second website I have ever built and the previous one was formatted poorly so it would break when the viewport size was changed and I never ended up deploying it. Part of reason I had difficulties with coordinate mapping was because I wanted to make sure the functionality of the map would work regardless of the screen size. I am also proud of the fact that I was able to deploy the site (Try it out here!).

What I learned

Most of what I learned this weekend was about writing custom JavaScript. Prior to this I would just copy paste from a front end framework. This time I forced myself to write my own JavaScript for both the site and the functionality of the game.

What's next for whereisthis.tech

After adding the domain name, I plan to add more locations and a way for students to take their own pictures (coordinates can be found within the image file properties).

Built With

• css
• flask
• html
• javascript
• materialize-css
• python