Map project for Team 1. BeaverHacks Hackathon 2020. Check out the working demo!
This is an interactive, dynamic photo gallery situated on a map. The user can view pseudorandomly obtained photos from the Flickr API, as well as photos obtained for a specific area by dragging a camera icon to their desired location. In addition, the user can mouseover states to view the current known number of cases (obtained from the New York TImes GitHub upon loading) as well as click a state to see recent Reddit posts from r/Coronavirus sorted by "New".
This web app uses Leaflet.js as the mapping framework with OpenStreetMap and Maptiler as the tile providers. Data on coronavirus cases in the U.S. by state provided by New York Times GitHub repo in CSV format and automatically updates as new data is released. The Flickr and Reddit APIs are used to obtain the photographs and news stories. snoowrap and flickr-sdk were used to access the APIs. Node.js and npm are used on the backend and parcel was used to manage dependencies. Additional plugins include leaflet-sidebar-v2, mapbox-gl, mapbox-gl-leaflet, leaflet-providers and leaflet-markercluster. GeoJSON data for U.S. states found in this tutorial, with attribution to Mike Bostock. csvtojson along with request were used to convert the New York Times data to JSON format.
Working installations of Node.js and Git are required to run the application. You must also have access to the APIs for Reddit and Flickr.
Clone the repository to a directory of your choice. In the root directory of the repository, create a file called config.json and insert the following:
{
"config": {
"FLAK": "(INSERT FLICKR API KEY HERE)",
"RCLID": "(INSERT REDDIT CLIENT ID HERE)",
"RCLSC": "(INSERT REDDIT CLIENT SECRET HERE)"
}
}After this is done, simply npm install and npm start. Once parcel has built the program, it can be viewed at http://localhost:1234.