Inspiration
I was inspired by my and my peer's long searches to find an internship as well as how Esri utilizes maps to show data.
What it does
It gets a zip code from the user and uses Google Maps APIs to find the location as well as use it to map out the area to call to an Esri database to find household incomes. It creates a spinnable 3D block map of a 10km radius. Nearby Internships are marked by clickable seaweeds and main roads are marked and labeled by shark fins.
How we built it
I Built it using Vite and React for front end. To gather data I used Google Maps APIs to find street names and locations to call to ArcGIS to use data on household income. The server builds an income grid over a 10km radius of the inputted zip code. Colors are applied to the buildings in the block map to showcase the data. Buildings are instanced meshes for performance. The user can drag on the screen to spin the map around while being guided by shark fins that poke out to show main roads on the map. Nearby Internships are marked by swaying clickable seaweeds.
Challenges we ran into
I struggled on getting the Esri coloring to work as the shaders didn't correctly color the buildings as vertex colors were set to true, but there was no vertex coloring data. I turned off vertex colors on that material so Three.js used instanced colors only on the mesh.
Accomplishments that we're proud of
I am proud of creating my first 3D map and connecting it to real data from Esri and Google Maps. I'm also proud of being able to navigate github as I've rarely needed to use it in my personal projects.
What we learned
I learned how to use APIs in my projects
What's next for Dive Deep Internship Searching
The next steps for internship searching could be connecting more opportunities like scholarships or summer programs to mark on the map.
Log in or sign up for Devpost to join the conversation.