Skip to content

Commit

Permalink
try to clarify instructions for javascript development.
Browse files Browse the repository at this point in the history
  • Loading branch information
JoeGermuska committed Apr 5, 2016
1 parent 35cbf8b commit 8543bbb
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 17 deletions.
64 changes: 47 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ For each language, we need a simple file with a name like `*xx*.js`, where *xx*

##GigaPixel

Images are rendered so when set to be map_as_image the entire image is shown. When set as cartography the zoom will set so that all the markers fit.
Images are rendered so when set to be map_as_image the entire image is shown. When set as cartography the zoom will set so that all the markers fit.

Points are set to only display on mouseover in image mode, but you can set map_as_image to false in the config options to always show the points. The points are hidden when the intent is an image so that nothing obstructs the image the viewer is looking at. Looking at a painting is hard with a bunch of points on it.

Expand Down Expand Up @@ -42,31 +42,61 @@ Use `image` inside the location object and include a url to use. `use_custom_mar

## Setting up a development environment

In order to stay consistent with other kinds of deployment tools, we use python and Fabric to build and deploy StoryMapJS. However, if you are comfortable using [CodeKit](http://incident57.com/codekit/), you can use it also: the rules for assembling the various files into a single final storymap.js are specified using CodeKit's syntax.
The StoryMapJS repository comprises two distinct modes of development: changes to the javascript library and changes to the authoring system.

We welcome community contributions to the javascript library, and instructions for setting up to do that follow. We don't currently expect community contributions to the authoring tool, and some information about why is further below.

### Setting up to modify StoryMapJS Javascript

In order to stay consistent with our other kinds of deployment tools, we use python and Fabric to build and deploy StoryMapJS. However, if you are comfortable using [CodeKit](http://incident57.com/codekit/), you can use it also: the rules for assembling the various files into a single final storymap.js are specified using CodeKit's syntax.

If you don't use CodeKit, you must have Python installed. We use python 2.7.

Clone our [fabfile](https://github.com/NUKnightLab/fablib) repository and place it in the same parent directory as your StoryMapJS respository.
Clone our [fabfile](https://github.com/NUKnightLab/fablib) repository and place it in the same parent directory as your StoryMapJS repository.

Install [virtualenv](https://pypi.python.org/pypi/virtualenv), [virtualenvwrapper](http://virtualenvwrapper.readthedocs.org/), and [MongoDB](https://www.mongodb.org/).
Install [virtualenv](https://pypi.python.org/pypi/virtualenv) and [virtualenvwrapper](http://virtualenvwrapper.readthedocs.org/)

# Create a virtual environment
mkvirtualenv storymapjs

# Activate the virtual environemnt
workon storymapjs
# Install python requirements
pip install -r requirements.txt

# Start the mongod process
<path to binary>/mongod

# Run the development server
fab serve

Files located in the `source` directory are assets for storymapjs itself.

# If you are at Knight Lab and intend to work on
# both javascript and the authoring tool:
pip install -r js-requirements.txt

Once you've done this, you can edit files in the `source` directory to add features or fix bugs. After editing, use the `fab build` command to compile the javascript fragments into the `build` directory. You should be sure to test any changes you make against code compiled this way.

### Setting up to develop the Authoring Tool/Server

The StoryMapJS authoring tool uses Amazon S3 to store configuration and uploaded images for people who create storymaps. Because we need to control access to the S3 buckets, we have not invested the effort to support development of this part of StoryMap for people outside of the Knight Lab.

If you are associated with Knight Lab, talk to someone on the development staff about getting access to the S3 credentials. Then follow the steps below. Some of this is redundant to the above, but you can just follow these steps and you'll be able to contribute to both facets of the project.


Clone our [fabfile](https://github.com/NUKnightLab/fablib) repository and place it in the same parent directory as your StoryMapJS repository.

Install [virtualenv](https://pypi.python.org/pypi/virtualenv), [virtualenvwrapper](http://virtualenvwrapper.readthedocs.org/), and [MongoDB](https://www.mongodb.org/).

```bash
# Create a virtual environment
mkvirtualenv storymapjs

# Activate the virtual environemnt
workon storymapjs

# If you are at Knight Lab and intend to work on
# both javascript and the authoring tool:
pip install -r requirements.txt

# Start the mongod process
<path to binary>/mongod

# Run the development server
fab serve
```

Edit config.json as needed to modify the staging and deployment process.

At this time, edits to the HTML for the website are automatically visible when reloading the local server. Edits to CSS and JavaScript must be manually compiled before you'll see them. Run `fab build`. This is something we'd like to make more automatic eventually.
3 changes: 3 additions & 0 deletions js-requirements.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Fabric==1.6.1
boto==2.12.0

0 comments on commit 8543bbb

Please sign in to comment.