Building an OSM Before-After Swiper

building_a_swipe.markdown

Building swipers from the Guinea-swipe code

Making the maps

To be filled in!

Cleaning up the code

Github

If you don't know github that well google some of the basics about creating repositories, creating branches, and pushing changes to github. You'll need them for this!

Create a new github repository to contain your code

Create a gh-pages branch so that your code is made into a website.

Data modifications

Go to data/Guinea_cities.json

1. Populate this json with data about the places you want to jump the map to
2. The places should have a place name (city in this example), a latitude, a longitude, an ideal zoom level to view at, and a mapbox ID for the "Before" scene.

• The city name will tell the map where to skip to
• The lat long will tell the map where to go to
• The zoom will tell the map what zoom level to adopt
• The mapbox ID will be swapped into the JS running the site to load that "Before" scene

HTML modifications

Go to index.html

1. Under the "navigation" div, replace the [place]s listed under ```[place] with the places for your example. The text inside the <> will be matched against your .json, so make sure the match is exact! Accents, cases, characters, etc. matter!
2. Populate the modal text with an explanation of what the page is, who's involved and how people can contribute.
3. Make sure the links to other websites work!
4. Make sure to keep recent HOT tasks people can contribute to updated (or exclude them entirely)
5. Otherwise the modals and the site should work smoothly

Javascript modifications

Go to JS/site.js

1. Change the name of the .json referred to in line 42 to whatever the name of your .json of places is