dingaaling / citi-map

Citi Map is an open source tool for creating personal data maps
MIT License
9 stars 4 forks source link
civic-tech data-collection mapping urban-data-science
cm_logo

Citi Map: Urban Data Collection & Mapping Tool

Citi Map is a React template for creating a web app to collect on-the-ground data to visualize on a map. The tool allows users to click on icons that represent categories of items or behaviors occurring around their city. For example, trash piles, cherry blossoms in bloom, or mask wearing behavior. By clicking on the icon that represents the occurrence, the user logs a count under the respective icon and as a geolocation point on the map. With Citi Map, users may easily collect timestamped, geolocation data of their interest while moving around a city.

Data collected through Citi Map can be visualized through the map interface itself or downloaded as a CSV. The data points saved simply are: Timestamp, GPS Coordinates, Icon Number, and Accuracy of Location Data.

Requirements

Basic Usage

  1. Clone or fork the Citi-Map repository.
  2. Run yarn install to download the required packages
  3. Run yarn start to launch the app
  4. Click each icon to raise the count of that category. This increments the number below that object and display its location on the map.
  5. Click the Download CSV button to download your session data.

How to Customize the App

  1. Upload your images to the src/images/ folder. Name them in a format like icon1.png, icon2.png, etc. starting your numbering from 1 and up to 4. Note: for best results, use square sized images (e.g. 100 x 100)
  2. [WIP] We're still working on a simple way to customize the number of icons you can have. At the moment, the only way is to change the code in JS. For now, you may checkout the branch corresponding with the number of icons you would like. The main branch supports 3 icons.

Hosting the App on Firebase

The app may be hosted on any platform of your choice. Here is an example of how to host the app and database using Firebase. To follow these steps you need a google account and the firebase CLI installed on your computer (Follow these instructions to install firebase cli tools)

  1. Create the project on the Firebase console following Step 1 in this documentation.
  2. Go to the Project Settings page in your Firebase console and select the </> option to add a web app Screen Shot 2022-03-06 at 8 10 29 PM
  3. Follow the instructions to add Firebase to your web app Screen Shot 2022-03-06 at 8 10 04 PM
  1. Run yarn add firebase on the command line
  2. Set up the Firebase Command Line Tools following this documentation
  3. Select the Hosting options for Firebase CLI features
  1. Run yarn build to compile the project and prepare for deployment
  2. Run firebase deploy to deploy the app

Connecting the App with a database

Using a firebase realtime database

  1. First, make sure you have the project in your Firebase console. If not please refer to Hosting the App on Firebase section of this page
  2. Create a new file config.js in the /src folder of the app
  3. Copy the config information provided on your Project settings page in the /src/config.js file. Here's an example of the content of the file with some random values:
export const firebaseConfig = {
  apiKey: "123",
  authDomain: "456",
  databaseURL: "789",
  projectId: "123",
  storageBucket: "456",
  messagingSenderId: "789",
  appId: "123"
  measurementId: "456"
};
  1. In App.js uncomment the firebase imports
  2. In App.js::updateData uncomment the following lines:
const firebaseApp = firebase.initializeApp(firebaseConfig);

and

 firebaseApp.database().ref('/').push(body);

This is what will be used to push to the database

  1. On the Firebase console, go to the Realtime Database page and select Create Database to start logging data.
  2. Choose whether you want a test database or a production ready one (Start with test in order to test logging data)
  3. Choose a suitable region for your project (If most of the users will be in the US, choose US-central-1, for example)
  4. Now, if you log data through your app, you should be able to see them in the firebase realtime UI (See attachment below)
Screen Shot 2022-03-10 at 10 22 11 AM
  1. Enjoy collecting and analyzing your data!🚀

Datasets

Examples