GeoPlace

Inspiration

Inspired by r/Place an April Fool event — “in which individual registered users could place a single colored pixel (or "tile") on an online canvas of one million (1000 x 1000) pixel squares, and wait a certain amount of time before placing another.”

What it does

Imagine r/Place in the Real World!, A platform containing Google Maps and within a 15x15 virtual canvas around the campus. Each title in the grid represents about 90m in the real world.

Using Geolocation and google maps API, we are able to track users in real-time and represent them as markers on the map. If users are within the bounds of the canvas, users are able to select a color and place that color on the title they are currently on.

Additional Features: -Added a Global Live Chat -Leaderboard Showing Users with the highest placements -Slider that changes the opacity of the map

Built with

-NodeJS -React -Google Maps API (powered by Google Cloud) -Socket.io -Heroku -PostgresSQL -Domain.com

Challenges we ran into

-Pointing Domain.com's Pointer to Heroku's DNS Target -Connecting sockets

What we learned

-learn how to use github pull requests and github issues -learned how to use socket.io -learned how to build a website with react -learned how to host a webapp on Heroku

What's next for GeoPlace

In our current implementation, GeoPlace only works for the Cal Poly campus. In the future we would like to make it available to more communities across the US.