Mapillary Photostories is a tool that gives you a chance to consolidate images, text, and maps into a single storytelling experience. Combining navigable Mapillary imagery, written descriptions of photos, and a location map, you can build your own story using photos captured by yourself or the rest of the Mapillary community. Take a look at an example photo story here.
Using Mapillary Photostories involves two stages:
Both are easy, especially if you follow the guidelines below.
Mapillary Photostories are created using the Builder, which can be found here: https://mapillary-hacks.github.io/photostories/builder.html.
To begin building your Photostory, choose a title and an optional subtitle. For example, you may be trying to tell the story of your travels in Spain, and thus choose "Island Life" as your title and "A journey through the dazzling landscapes of Tenerife" as your subtitle.
Next, choose the number of slides in your Photostory. This can be anywhere between 1 and 30 (if you need more than that, please send us an email and we can look into supporting this. Each slide represents a single Mapillary sequence, with a single location on a map, and supports slide title and slide text.
When you’ve decided on the number of slides, click Apply and the slides will populate in the gray space below. If you choose to add another slide, just change the number and click Apply again, and additional slides will appear. If you want fewer slides, again just change the number, click Apply, and you’ll see the most recent ones disappear while the rest are retained with your content. In our example, we’re going to set the number to 2 and click Apply.
Corresponding to the number of slides you selected, you’ll see a card appear that you can modify. To make this into an actual slide in your Photostory, we need to retrieve the image key of where you want the interactive Mapillary sequence to begin. For this example, we're taking some sequences from Tenerife in the Canary Islands. On the Mapillary website, clicking the menu and choosing Advanced Options allows you to grab the image key.
Once you’ve copied the image key to your clipboard, you’ll paste it into the slide where you want this sequence featured. Double check that you didn’t copy the sequence key—this specific image will be the starting point of your sequence, but still gives the user access to navigation of the entire scene! Next, add your slide title and content, making sure to tell the story.
Once this is complete, keep repeating the process for all the slides you’d like.
The next step is to click the orange Load Code button. This converts your slides to JavaScript, and loads this script into the grey area at the bottom right of the Builder. If you have any advanced use cases, you can copy and paste this code wherever you like. For the easiest method, however, simply click Save Code after you see the code has loaded. This will save a .js file named after the title of your Photostory. This file contains your story, so keep it safe.
You’ve now finished building your Photostory, and it’s ready to share.
In order to share your story with the world, we need to go through a few more technical steps. To break down these steps, we will:
- Look at the format of the sharing link
- Upload the JavaScript file to Dropbox (you can go for any other service as long as you can host the raw .js file there)
- Make sure the JavaScript file is modified for access
- Add the JavaScript file to the sharing link
The sharing link comes in a single URL, which looks like this:
https://mapillary-hacks.github.io/photostories/?src=http://www.url.com/path_to_your_input.js
The bold part is a link to your JavaScript file, while the rest stays the same. The part that reads src= is asking for the source of the Photostory. We need to upload your file, so we can paste the link in place of the bold text.
First, upload your file to Dropbox. We need to take the uploaded file and modify it according to this guide, which is summarized below.
- Login to Dropbox or signup for Dropbox account.
- Upload your JavaScript file, as I did with Island_Life.js
- When the file is uploaded, you’ll see it appear in your list of uploads
- Click the Share button
- Click Create link, then Copy link
- Your link will look like this: https://www.dropbox.com/s/1tzbu4u55yhpu9v/Island_Life.js?dl=0
- In this link replace www with dl and delete ?dl=0 from the end of the link
- Your final result is similar to this: https://dl.dropbox.com/s/1tzbu4u55yhpu9v/Island_Life.js
Now that your JavaScript has been uploaded to Dropbox and the link has been modified so that Mapillary Photostories can access the file, we need to simply insert it into the sharing link. Remember that the example link looks like this:
https://mapillary-hacks.github.io/photostories/?src=http://www.url.com/path_to_your_input.js
Replacing the bold with the Dropbox link you just created, you now have:
Click on the link above to see the final product, and share it through social media, emails, or other forms of communication.
Comments
0 comments
Please sign in to leave a comment.