Pittsburgh Lenten Fish Fry Map

The Pittsburgh Lenten Fish Fry Map is the brainchild of Hollen Barmer, who has tirelessly dedicated her time since 2012 inventorying the rich array of Lenten Fish Fry events that occur every spring in Western Pennsylvania. Code for Pittsburgh helps with website development, hosting, and data maintenance!

Where Does the Fish Fry data shown on the map come from?

The raw data isn't here! That is by design. The map gets data from the Fish Fry API @ fishfry.codeforpgh.com/api/fishfries. Anyone can use that URL to get data to make their own fish fry map, or do things with the Fish Fry data that we haven't thought of. If you want to learn more about the database and API, head over to the Fish Fry Form repository.

Occassional snapshots of the data from are being dumped into the data folder of this repo, but only for posterity.

Development

This is a static web site. We're serving it up with GitHub pages, but it can run on any web server as-is, really.

Prerequisites

To develop this, you have NodeJS installed, such that you can call node and npm from the command line.

Then, in the root of this directory, run:

npm install

This will use the package.json file to get and install NodeJS dependencies locally, in a node_modules folder.

You will also need these things (available on NPM):

• GulpJS, with gulp callable from the command line. Install with npm install [email protected] -g
• Http-Server, with http-server callable from the command line. Install with: npm install http-server -g

Those two things need to be available globally. the -g flag in those commands makes sure of that.

Building and Watching

GulpJS is a task-runner that compiles and bundles source code from src folder into the assets folder. Since the deployment path for this is GitHub pages, we put things into the assets folder, which is where Jekyll, the software that runs GitHub pages, expects those things to be.

We run those tasks with npm scripts.

Running npm run build will compile and bundle the source code one time.

Running npm run dev will do that, plus run http-server, open the site in a web browser at http://localhost:3000, and, upon detecting changes to files in src, re-runs compiling/bundling and refreshes your browser. Nice!

If the site doesn't load after pnpm run dev, check http://localhost:4000 in your browser. This is where http-server lives. If you don't see anything there, make sure you can run http-server from the command line (see prerequisites above).

Where the functionality lives / where you can hack on the code

Most of the work is happening in src/js/app.js. The rest happens in index.html.

TODO: the source code for this app is a bit of a mess...the result of quick prototyping.

Deploying this Site

Run npm run build, commit changes, and push as-is to GitHub to deploy.

Credits

The Fish Fry Map is built and maintained by members of Code for Pittsburgh.

It started with Bootleaf (which we've adapted it and modified heavily for this project), and uses Bootstrap 3, Leaflet, and typeahead.js, among other things.

Basemaps

Our nice basemaps come from all over!

• Light and Dark basemaps: © OpenStreetMap contributors, © CARTO
• Black n' Gold basemap: Map tiles from Stamen Design, under CC BY 3.0 license. Basemap data by OpenStreetMap, under CC BY SA license.

Icons

Church and Warehouse icons come from © Mapbox.