How to add a city to Click That ’Hood

Dan Stormont edited this page Feb 14, 2016 · 6 revisions

(Any problems with these instructions? Contact click-that-hood@codeforamerica.org).



1. Find a file with neighborhood boundaries

Search for an open data portal for your city. Try to find a file with neighborhood boundaries, often referred to as a “shapefile.” It’s most often in the SHP, KML or GeoJSON format (or very often a ZIP archive containing a number of files inside; you don’t have to unpack it).



2. Check and process the neighborhood file

If you can’t code, send the file and the URL to the page you got it from to us at click-that-hood@codeforamerica.org. You’re done.

If you know how to code, read on…

2.1. Upload the neighborhood file to CartoDB

Click That ’Hood needs the data in GeoJSON format. A good way to import the neighborhood file, check it, and output the file in GeoJSON format is CartoDB.

2.1.1. Create an account there if you don’t already have it, and log in.

2.1.2. Create a new table and import the file you downloaded in part 1. (Pro tip: Just drag the file onto CartoDB window.)

2.2. Check the neighborhood data

2.2.1. After the neighborhood data is imported, check its quality on both the table and the map view.

In table view:

  • the name of the neighborhood should be in a column titled “name”
  • there should be no neighborhoods with empty names

In map view:

  • whether the neighborhoods are aligned with the underlying map
  • the neighborhoods should not overlap

You don’t have to worry about tiny/hard to click neighborhoods as Click That ’Hood will ignore them automatically.

2.2.2. Delete all the columns (by clicking on their titles) except cartodb_id, the_geom, name, created_at, and updated_at. We don’t need them.

2.3. Export the neighborhood data

Export the data to a GeoJSON file by using Edit > Export… in the upper right corner menu.



3. Add the neighborhood data to the game

3.1. Clone the Click That ’Hood repository on GitHub and set it up on your machine using these instructions.

3.2. Test whether the game works correctly by going to http://127.0.0.1:8020

3.3. Copy the GeoJSON file you exported in step 2.3 to the public/data directory, and rename it as CITY-ID.geojson (all lowercase), where CITY-ID is a unique lowercase identifier of your city (e.g. san-francisco or brooklyn).

3.4. In the same public/data directory, make a copy of the _TEMPLATE.metadata.json file to CITY-ID.metadata.json. Edit it and fill out all the information needed.

3.5. Restart your Node server by terminating the node app.js process (Ctrl-C) and running it again. The app will check for common issues and help you out.



4. Test the game

4.1. Check whether your new city displays correctly on the homepage at http://127.0.0.1:8020.

4.2. Choose your city, start a difficult game, and finish it once.

If you see any weirdness or unexpected issues, let us know.



5. Send us your pull request!

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.