# Journey Map

## What is a Journey Map?

**The Journey Map page allows you to create touch-points and interactions on large images.** The user to zoom into details and activities on the map, viewing all touch points along the journey.

## Quick Steps: How to create a Journey Map

**Creating a Journey Map consists of three key steps:**

1. [Add a Map](#add-a-map-upload-a-journey-map-image)
2. [Map Editor: Add Touch Points](#map-editor-adding-discoverable-activities)
3. [Map Route Activities](#map-route-activities)

### **Add a Map: Upload a Journey Map image**&#x20;

1. **Open Authoring.** Create or open a [Learning Story](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/learning-story).
2. **Open the Editor.**
3. **Add a Journey Map page.** Select the + icon and choose Journey Map from the Add Page options.&#x20;
4. **Edit the page.** Select the page to view [Page Options](https://everyday-digital.gitbook.io/authoring-docs/story-and-page-settings#what-are-the-page-options), then select Update to add and edit content.&#x20;
5. **Upload your map image.** The map dimensions should be at least 4096px x 2560px. Upload then Save.&#x20;
6. **Add interactions.** To make your map interactive, click on the  page once it has been saved and select Map Editor (you can also select the [Map Editor](#map-editor-adding-discoverable-activities) from the Journey Map window).

### **Map Editor: Adding Discoverable Activities**

Now you can add discoverable touch points to your map. Select an area on the map/image to: Add Dialog, Add Activity or Add Navigator.

**Add Dialog**\
Dialogs allow you to add a talking point to interactive maps or images. You can add an image/icon (256x256px) and up to 255 characters of text.\
\
**Add Activity**\
Setting an activity allows you to add story pages to the map. When a user lands on an Activity Touch Point, it will open in a 1/2 page layout that appears as an overlay on the map (for desktop and tablet).

* Select the hand icon (top right) to update a page / activity once you have created it.&#x20;
* To switch back to the map view, select the map icon (top right).

**Add Navigator**\
Navigators direct users to a chapter and sends them back to the map after they have completed the chapter.&#x20;

### **Map Route Activities**

**Route Activities**\
To present discoverable activities in a sequential order, drag any of your created discoverable activities into the Route Activities area.&#x20;

**Drag and drop activities into sequence.** Once you have mapped the activities, you can still shuffle the order by dragging and dropping activities into the preferred sequence.

**To playback the order of your Map Journey, select the play icon in the Route Activities box.** If you want to see the map in action, use the simulator to simulate your story.

{% hint style="info" %}
To add a dialog, open the Map Editor and click anywhere on the map. Select "Add Dialog".
{% endhint %}

## **Touch Point** Options <a href="#settings" id="settings"></a>

**Colour**\
Change the default theme colour, i.e. the colour of the touch point icons.

**Zoom Level**\
Choose how close you want to zoom into the image.

**Rotation**\
Rotates/tilts the map.

## Map Activity Options

You can add the following map activities/interactions:

### **Add Dialog**

Add a text message and icon (ideal for instructions and introductions).

### Add Activity

Add any of the following pages: \
[Image + Text\
](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/image-+-text)[Icon + Text](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/icon-+-text)\
[Audio + Text](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/audio-+-text)\
[Video + Text](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/video-+-text)\
[Animated Video](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/animated-video)\
[Image Cover\
](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/image-cover)[Video Cover](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/video-cover)\
[Multiple Choice](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/multiple-choice)\
[Photo Assignment](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/photo-assignment)\
[Survey / Rating](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/survey)\
[Slideshow](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/slide-show)\
[Text](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/text)\
[Text Response](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/text-response)

### **Add Navigator**

**Navigators allow you to direct users to a chapter and return them to the map once completed.** Chapters that are connected to navigators will always return to the map.
