BINJ Map Creation Guide (more here)

Edited by Adam Kercheval of Jumbo Code

Objective:

This document will serve as a step-by-step guide for any BINJ-like organization looking to create their own story map site like the one we've created for BINJ. It will also provide a general overview of the structure of the code for the website, so you'll know where to look if something breaks or if you want to change something in the future.

Code architecture:

The majority of the code for the website (that's worth changing, anyway) is located in the "public" directory. In it, you can see the html, Javascript, and CSS files for every page accessible on the app. For example, index.html is the main page, admin.html is the main admin page, and newstory.html is the page you see when creating a new story. Any stylistic or structural changes you might want to make to the app should be done on these pages and, in some cases, in their corresponding CSS pages. Some pages don't have a dedicated CSS page. In that case, style.css, is the usual catch-all CSS document.

There are also various javascript files that correspond to html files throughout the app. These don't do much for the design of the app, and messing with them could get pretty nasty, so unless you want to change the function of the app in some way, it's probably a good idea to avoid messing with them.

Other architecture notes:

• The main driver of the app is server.js. You shouldn't need to edit much of this, but commenting and un-commenting line 53 that says return next(); is useful for editing the app without having to log in to see the admin pages. Comment it to require normal authentication to view the pages. Un-comment it to allow for the viewing of those pages without authentication.
• The images for the icons on the map are located in the images directory, in case you'd like to change them.

Editing guide:

Below is a list of things you might want to change and where to look to change them.

• Institution name
  • index.html, line 30
• Institution logo
  • index.html, line 27
• Institution tagline
  • index.html, line 33
• Color/theme
  • style.css, line 12 - this might be more complex than just changing that one line, though: I'd do a search of #f3f694 (the original background color) throughout the whole app's codebase and change any instances of it to your new color. In fact, style.css as a whole is the best file to look in if you're looking to change the way the app looks.
• Favicon
  • favicon.png
• Username and password for an admin account