The city of Chicago was once home to hundreds of water tanks. They are quickly disappearing from the skyline as they are be taken down across the city. This project is an attempt to map, photograph, and document as many of these water tanks before they're gone forever.
For a live version, visit: Chicago Water Tanks
These instructions will get you a copy of the project up and running on your local machine.
You'll need Ruby installed on your local machine. We're using:
ruby 2.5.0p0
You'll also need Rails installed on your local machine. We're using:
Rails 5.1.6
You'll also want to create a Google Maps API - its free. You can create one here: Google Maps API Key
To install and play around with Chicago Water Tanks on your local machine follow these steps:
-
Visit the repository: Chicago Water Tanks on GitHub
-
Clone the repository (for more details on this step visit this resource. From your command line, type:
git clone https://github.com/loudmouse/water_tanks.git
- Run bundle install to ensure you have the correct gems and versions to begin work. From your command line, type:
bundle install
- From your command line, start your rails server by typing:
rails server
- Install the database. From your command line, type:
rails db:install
- Seed the database with sample data. The sample data includes water tank locations, photos, and two users (1 admin and one non-admin). From your command line, type:
rails db:seed
- From your browser, visit: http://localhost:3000/
You should now have a functioning build of Chicago Water Tanks on your local machine to play around with.
We're currently deployed to Heroku. You can setup a free Heroku account and deploy your app there as well if you'd like.
- Ruby - The programming language used
- Rails - The framework used
- Google Maps API - Used to generate maps
- GMaps4Rails - A gem used for custom markers and overlays; integrates with Google Maps API
- Geocoder - Ruby gem used to convert a water tank's lat/long location coordinates to addresses and vice versa
- Chicago Neighborhood KML Overlay - courtesy Chicago Open Data Portal - KML overlay layer used to identify which neighborhood a water tank belongs to
- RSpec - framework for testing
- Shoulda Matchers - one liners to test common rails functionality
- Factory Bot - Ruby library used to build factories for generating fixtures for testing
- Faker - used to generate fake data for testing
- SimpleCov - code coverage analysis
- PostgreSQL - The database used with ActiveRecord
- Devise - The Ruby Gem used for authentication
- Rails Admin - Ruby gem provides easy-to-use admin interface for CRUD actions for non-technical users. We can grant admin rights to other users to help us moderate the community contributions.
- Paperclip - Ruby gem used for attaching images of water tanks
- AWS SDK for Ruby - used to connect to AWS S3 storage for storing images of water tanks
- Acts as Votable - Ruby gem used to allow voting of favorite water tank photos
- Will Paginate - Ruby gem used to paginate the list of water tank locations
- SCSS (Sassy CSS) - The CSS syntax used for front-end styling
- Bootstrap - CSS framework used for styling certain sections of the application
- FriendlyID - a ruby gem used to create human readable slugs/permalinks. For this app we're using it for usernames so instead of navigating to, for example, /users/1 it will now read as /users/loudmouse and provide automatic redirects if you attempt to visit the old link.
Chicago Water Tanks is currently at version 1.0.
- Nolan Neeley - Nolan's GitHub
- Josh Alletto - Josh's GitHub
See also the list of contributors who participated in this project.
Homepage
This is the homepage where you see the most recently mapped tank, the map of tanks, and a listing of all tanks with pagination.
Map a Water Tank
Click 'Add a Water Tank' to map the location of a new water tank and add your photo.
- Zoom in and click the map to set a pin - a pin drop does a couple things:
- It detects the latitudinal and longitudinal coordinates of the pin
- It converts these coordinates into a human readable address and fills the address field
- It detects which neighborhood your water tank belongs within and displays this info once you've hit submit
- Click 'Upload a Photo' to attach a photo. A photo is required.
- Click 'Submit'
Congratulations, you've successfully mapped a water tank and added a photo!
Unlock Your Profile
Once you've created an account you'll gain access to your profile once you've mapped a water tank. From your profile you can:
- See how many water tanks you've mapped
- Check how many photos you've contributed
- See a map with all the water tanks you've mapped
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent