HOW TO MAKE AN ONLINE STORY MAP (WHITE LABEL)

We're still working on our story map, which is basically an online resource with stories (from whatever outlet(s) you choose) plotted on it so that readers can find their news geographically.

The project was developed by one of the amazing teams from Tufts University's Jumbo Code program, and our hope is that outlets all over the country will take the work they've done and run with it in their own directions.

Some helpful links are below, including the Github page with all the code you need to make your own ...

LEFT: The categories we assigned for stories along with pins and icons

RIGHT: The back end of our story map

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
  • Institution logo
  • Institution tagline
  • 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
  • Username and password for an admin account