Get Cool
Inspiration
As our climates continue to warm in places unfamiliar to extreme heat, publicly accessible cooling centers play an increasingly important role in keeping people safe from heat--however finding a cooling center near you can be a challenging feat. Most public interfaces or lists are clunky, non-responsive and potentially even show out of date data. Our goal was to build an intuitive interface that helps people find a cooling center near them.
What it does
Our web-app automatically determines the user's Geolocation, references a list of cooling centers, and then forwards them to the google maps directions page with the approximate nearest cooling center we could find via some longitude and latitude difference math.
How we built it
We stated by collecting the longitude and latitude of every cooling center we could find in the state of Oregon by cross referencing data published by the Multnomah county with their Google Maps locations and also grabbing their Place ID to guarantee an accurate look-up.
For our web-app we ended up using a create-react-app with Typescript with Material UI to quickly create the interface, and used the browser Geolocation API to fetch the user location, looked up how to do longitude and latitude math with the haversine formula in JavaScript from this neat web-page and then used the Google Maps URLs to window.open
the user to a google maps instance with the directions to the cooling center setup.
Challenges we ran into
We deployed our web-app onto github-pages which initially created some problems since it messed with the relative asset imports (I didn't deploy it to my root github pages) so we had to change some settings via the homepage
property in our package.json
and such.
Accomplishments that we're proud of
We have all cooling centers for Multnomah County, Oregon (the county we're from) added along with some locations from Benton & Lincoln county, and hope to add all the cooling centers in Oregon soon.
What we learned
This was our first time using GitHub actions as our CI solution to deploy to GitHub pages and using the Geolocation API.
What's next for Get Cool
First off, currently we're storing cooling center data in a static csv file, which works fine for a demo, but if we want to scale this solution to support locations outside our state, we'll need to move to some database solution.
Second, would then be getting more precise distance measurements between locations using something like Google Maps' Distance Matrix API.
Finally, adding an optional "advanced search" option via a gear button so that savvy users can adjust their search options. We want to retain the simplicity of our interface (push button for cooling center directions) but allowing for more settings could be beneficial for users (e.g. exclude pools from my search for cooling centers).
Built With
- create-react-app
- google-maps-url
- gps
- react
- typescript
Log in or sign up for Devpost to join the conversation.