General

The Interactive Map module is an interactive touch card on which different points of interest can be indicated.

The ‘map’ can be a geographical map, but can also just be an image of different products; a landscape; a production process;… You can place touch points on this image. This is often visualized by means of a pin. When you press this pin, you will see a pop-up with text and assets (video and/or photo).

When you click on “Interactive Map” in the module menu, you will get an overview of all existing Interactive Map modules, as well as a button to add an Interactive Map module.

Examples

Example1: https://xd.adobe.com/view/af2e81ef-9837-4246-93b2-b1fe859efa43-fa7d/?fullscreen

Example2: https://xd.adobe.com/view/803a3053-5bde-4080-bc15-87f230c17ddc-d569/?fullscreen

General functionalities:

• Delete an interactive map module: the entire module is deleted

• Duplicate an interactive map module: the entire module, including all its contents, is duplicated

• Cancel an interactive map module: all changes that were made before saving can be cancelled by clicking the cancel button

Basic

Open

• Module name: internal work name

• Has introduction: determines whether the module should show an introductory pop-up

• If ‘has introduction’ is activated, you can add text and title in any language:

  • Title

  • Text

Maps

Open

It is possible to add multiple maps within an Interactive Map module, each of which has its own information. A list of all created maps can be seen on the left-hand side and the details of the selected map on the right-hand side .

You can determine the following for the selected folder:

• Map name: internal name

• Map thumbnail: miniature image that is used for navigation between different maps
  Tip: Optimal resolution: 94px x 94px

• General map info: can be set per language

• Map: background, the map itself. This can also be set per language. If it is the same for every language, activate ‘apply to all languages’ after you have uploaded your photo or video and before saving.

  • image: .jpg or .png

  • video: .mp4. The video is playing in loop with audio.

Draggable original size

• Default off: the system will automatically fit the uploaded photo or video into screen

• One: the system will use the original file size and add scroll functionalities

  • screen size = asset size → no scroll

  • screen width < asset width → horizontal scroll

  • screen height < asset height → vertical scroll

  • screen width and height < asset width and height → horizontal and vertical scroll

The starting point of the charged asset is always top left. To add this, you can use some CSS rules

https://ocular.atlassian.net/l/c/uJb0uhcS

Categories

Categories are a solution to group your touch points. If all touch points fall under 1 category, you are also required to create 1 category.

A list of all created categories can be seen on the left-hand side and the details of the selected category on the right-hand side . You can determine the following per category:

• Drop Image: determines the indicator of the touch point itself.
  Tip: Optimal resolution: 90px x 150px

• Icon: an image that will be placed in the drop image
  Tip: Optimal resolution: depends on the drop image’s size and shape

• Category Title: set a title per language

Tip: you can also upload a transparent image at ‘drop image’. This makes parts of your background image clickable, without a ‘typical drop image’ appearing on it.

Touchpoints

You can determine where the touch points will be visible and what their content is within the tab “Touch points”.

A list of all created touch points can be found on the left-hand side; the details for the selected touch point on the right-hand side.

General info

• Connected maps: here you can determine on which map(s) the touch point will be visible

• Select Category: here you can assign a category within which the touch point falls

• Touch Point Content

  • Option 1: title and textual information is entered here.

    • You can add a link in the text field to an external website

  • Option 2: you can opt to use a file card

• Touch point Position: here you determine the position of the touch point per linked map and select the map on which you want to place your point. This must be done per map

  • the default starting position of your touch points is always top left. Drag the touch point with your cursor to the desired position, or enter the x,y coordinates

  • Use the ‘expand’ button on your map to position it in a larger view
    
    
    

Assets

You can add your media to your file card here. The following file types are possible:

• jpg

• png

• gif

• pdf

• mp4

• wav

Add a new asset:

1. Upload the asset from your computer

2. If the asset can be the same for all languages, press ‘apply asset to all languages’

3. Press ‘add to list’; only then will your photo or photos be added to the media carousel

4. You can still change the order of the assets via the arrows

Tip: Optimal resolution: according to ratio 16:9

Tip: ‘apply to all languages’ will only work after you have uploaded a photo and before you press save

Remark: If you chose a file card as touch point content, the assets added here will not be visible.

Examples