The SVG Map is a completely different navigation concept that uses a full-screen diagrammatic map to represent the locations within the tour.

The SVG Map is added via the Floorplan map function but combines .png and .svg files to provide a scaleable solution for a fullscreen visual map.

The example screenshot below shows an active SVG Map.

Note: The underlying background can be a combination of filters to highlight the SVG Map

About the SVG Map

The SVG map provides the following features;

Resolution-independent and can scale to any size without losing quality, regardless of device or browser.
Small for fast rendering
On mouse over, the buttons load a preview of the location and scale up.
Buttons show Active/Visited states.

The SVG map functionality includes;

Options for Desktop/iPad and Mobile versions.
Support for multiple language versions.

SVG Map Elements

SVG maps are created in Adobe Illustrator or similar vector-based application.

The maps can comprise vector-based images, text and symbols representing the tour's panoramic nodes.

Adding an SVG Map

The RPGTV2024_Project > *ASSETS > Taman > SVG Map contains folders containing files for this tutorial. The screenshot below shows the structure and files in the SVG Map folder.

A: AI FOLDER

The “Do Not Delete” sub-folder contains two base Illustrator (.ai) files, which have all the original language text, symbols, and background colour in editable form for both English (en) and Indonesian (in-ID) in both Desktop and Mobile versions.

The other four (.ai) files, at the root of the Ai folder, contain layers specific to the individual .svg and .png files found in the Pre-Build folder.

The screenshots below show the Desktop/iPad taman_map_base_en.ai and the taman_map_base_in-ID.ai files open in Illustrator. There are layers for both editable and outlined versions of the text.

B: MAP-ICONS FOLDER: These are all the small .svg files icons used to create the locations and the footprints.

C: PRE-BUILD FOLDER: This folder contains two sub-folders: Desktop and Mobile.

When adding an SVG Map to your tour, there are three files required for the implementation;

“project-name”_map.png file of the final layout
svg_map.svg file of the final layout on a transparent background
“project-name”_map_blank.png file of the final layout. This is an empty file with a transparent background.

Desktop contains the following four files;

svg_map_en.svg
svg_map_id-ID.svg
taman_map_blank.png
taman_map.png

Mobile contains the following four files;

svg_map_mobile_en.svg
svg_map_mobile_id-ID.svg
taman_map_blank_mobile.png
taman_map_mobile.png

The “en” and “id-ID” represent the English and Indonesian language versions, respectively.

Add the SVG Floorplan (Desktop/iPad)

Copy the four .svg files from the *ASSETS > Taman > SVG Map > Pre-built > Desktop and Mobile folders into the *TO_UPLOAD > maps folder

Open the 4_TAMAN_FLOORPLAN.(p2vr) file and save it as 5_TAMAN_SVGMAP.(p2vr)

Click on Menu > Tour Map to open the Properties—Map panel. Click the “+” button and select Add Floorplan.

Use the taman_map.png from the *ASSETS > Taman > SVG Map > Pre-build > Desktop and set the following in Properties - Map:

Map ID: = svgmap
Title: = SVG Map

Output:

Format: = PNG

Drag each of the tour nodes onto their respective locations on the Floorplan.

Once all locations are pinned, replace the taman_map.png by clicking the Properties - Map > File: folder icon and selecting the taman_map_blank.png image from *ASSETS > Taman > SVG Map > Pre-build > Desktop.

Update the Output setting to:

Format: = PNG
Background Color: Alpha Channel: 1, HTML: #ffffff

Adding the SVG-Map button

Open the Edit Skin Configuration window and scroll to the -[ FIXED BUTTONS LEFT ]- section.

Set the attributes for -[ FIXED BUTTONS LEFT ]-;

Show Floorplan-Map Button: = unchecked
Show SVG Map Button: = checked

Scroll to the -[ FLOORPLANS & MAPS ]- section.

Set the attributes for -[ FLOORPLANS & MAPS ]-;

Show Floorplan: = unchecked
Show Map: = unchecked

Map Type [ Default = Roadmap, uncheck = Satellite ]: = checked
Size [Default = small, uncheck = large]: = unchecked

Scroll to the Skin Colors section.

Click on the SVG Map Tint Modified button to change the value.

In the Select Color window set the Alpha channel: to 50.

Click OK to close the Select Color window and apply the changes.

Click OK to close the Edit Skin Configuration window and apply the changes.

Save and output the project.

Note: the SVG-Map button looks the same as the Floorplan-Map button but it contains different actions that manage the display of the svg map files.

Click on the Map button to show the SVG-Map.

Note: this is displaying the “svg_map_en” SVG file

Svg Map features:

When the SVG map is open the interface is hidden,

There is a single close SVG map button.
The background has a blur/tint filter over it.
The map pins are visible on the layout.
The dark versions show nodes already visited or active.
On the mouse over the pins, scale up and display a thumbnail of the location.
Clicking a pin hides the SVG map and opens the node.
Resizing the browser window scales the layout and the pins

Click on the “Languages” button and select “ID” to change the tour language to Indonesian

Click on the Map button to show the SVG-Map.

Note: this is displaying the “svg_map_id-ID” SVG file

View Version Taman SVG Map

Note: the screenshots below show the SVG Map on an iPhone Pro and a iPad Pro.

The layout of the SVG Map doesn’t translate well to the portrait view of a mobile device. However there is the option within the project to have an alternative Mobile compatible SVG Map.

Adding the SVG Floorplan (Mobile)

Open the 5_TAMAN_SVGMAP.(p2vr) file and save it as 6_TAMAN_SVGMAPMOBILE.(p2vr)

Click on Menu > Tour Map to open the Properties—Map panel. Click the “+” button and select Add Floorplan.

Use the taman_map_mobile.png from the *ASSETS > Taman > SVG Map > Pre-build > Mobile and set the following in Properties - Map:

Map ID: = svgmapmobile
Title: = SVG Map Mobile

Output:

Format: = PNG

Drag each of the tour nodes onto their respective locations on the Floorplan.

Once all of the locations are pinned, replace the taman_map_mobile.png with the taman_map_blank_mobile.png

Then update the Output setting to:

Format: = PNG
Background Color: Alpha Channel: 1, HTML: #ffffff

Open the Edit Skin Configuration window and scroll to the -[ FLOORPLANS & MAPS ]- section.

Set the attributes for -[ FLOORPLANS & MAPS ]-;

Show SVG Mobile Map: = checked

Note: leave everything else as is.

Click OK to save the Edit Skin Configuration changes.

Save and output the project.

Note: Now when the project is viewed on a mobile device and the SVG-Map button is clicked the Mobile version of the layout is displayed in either EN or ID.