Add a Tour Map

Learn how to add a map to a virtual tour.

A map for a tour can be sourced as an image or as map tiles, like Google Maps or Mapbox. The default map in the Tour Map is World Map which is used internally. To add a map to your project (in the skin), add a Map using the green plus. To display Google Maps on a website, it’s necessary to obtain an API key.

Check which built-in skins support maps.

On a touch device, use 1 finger can be used to move the map and 2 fingers to zoom in and out.

Adding OpenStreetMaps

OpenStreetMap is an open source map provider in which you’re free to use under an open license. Pano2VR uses the Leaflet API to display the maps.

1. Open the Tour Map.

2. Click the green plus button and select, Add Map.

   

   

   If tour nodes have location data, they will be represented by pins on the map. The active node will show a red pin and the other nodes will be blue. It’s possible the GPS is not exact. If so, drag the pins to their accurate location.

   ★ Go here to learn how to add location data, if the images do not have it.

3. In the Properties panel, the settings for the new map appear. In the list of map providers, choose OpenStreetMaps.

   

4. Open a skin or create a new skin.

5. In the Skin Editor, add a Map element. Select Draw map. from the toolbar and draw a shape for the map. The map element will be filled with placeholder content. Once the project is generated, the map will appear.

6. Anchor the Map to the top right corner.

   

7. Next, from the components toolbox, add Map Element Map Pin.

8. Select the map element in the Tree or Canvas, and go to the Map panel. For Map, choose First Map in Project. For API, choose Leaflet.

9. Next, find the setting, Clone as Marker. From the list, choose map_pin.

   

10. Save the skin.

11. Back in the main program window, add a web output (if not already added) and choose the skin that you’ve just added the map.

12. Generate the web output.

Adding Google Maps

1. Open the Tour Map.
2. Add GPS and set North to each node image if not already added. If the nodes have location data, they will be visible as pins in the Tour Map. If the nodes don’t have GPS, you can learn how to add it here. ★ Tip: Save the project.
3. Open a skin or create a new skin.
4. In the Skin Editor, the components toolbox, add the Map Silhouette button and add it to the skin. In our example, we have anchored it to the bottom right corner. This component has a button that opens and closes a map in the center of the view.
5. In the Tree, select the Map Element. (It is found in map_container.)
6. Go to the Map settings. For Map, choose any of the Google maps.
7. Add your Google API key. Google requires an API key that is not free and for which you will need to register.
8. Save the skin.
9. Back in the main program window, add a web output (if not already added) and choose the skin that you’ve just added the map.
10. Generate the web output.

★ If you see this warning in your map, it means you either forgot to do step 7 or entered the API key incorrectly.

Adding a Map as an Image

Any image can be used as a map. In this exercise, our images will not have location data and the map will be an image. When the map is an image you can add it using the Floor Plan setting of the Tour Map or you can add it directly to the skin.

Add the map via the Tour Map

1. Open the Tour Map.
2. Click the green plus button and select, Add Add Floor Plan. You’ll be prompted to open an image file.
3. In the Map Properties, choose the corresponding image format. Our example is PNG. Optional: change the ID to something more meaningful.

   

4. Change background color to transparent.
5. Drag the nodes to their corresponding locations on the map in the Tour Map. This will add the nodes as pins. Drag the pins as necessary. ★Tip: Hold down the Alt or Option key to move the blue, inactive pins. (The active pin is red and is the currently selected node in the Viewer.)
6. Correct the node’s view by holding down the N key and drag the panorama. Watch the radar beam in the Tour Map. Alternatively, you can drag the radar beam in the Tour Map.
7. Link the nodes.
8. Open the Skin Editor and add Map Element.

   

9. In the Map properties, choose Floor Plan as the Map Type and then select the floor plan that was added in the Tour Map from the list.
10. Select Simple Floor Plan.
11. [Optional] Set the radar size to 100px. In our example, if kept at the default size, the beam will get cut off at the floor plan’s edges.
12. Change Alignment to centered.
13. In the rectangle settings, set the border to 0.

    

14. Save the skin and generate the output. You should no have a map or floor plan with interactive pins and radar beams in your project.

From here, you can further customize the map by adding custom pins, showing and hiding the map, adding tooltips, etc.

Add via the Skin Editor

1. Open the Skin Editor.
2. In the components toolbox, find and add Map Pin with Radar Silhouette.
3. Drag the nodes from the Tour Browser to the map in the canvas (On a Mac, you’ll need to pop the Tour Browser out first and then bring the Skin Editor into focus.). This will add the map pins. To refine placement, be sure to first click in the Canvas to deselect everything and then select the pin and drag.

   

   

4. Save the skin.
5. Generate the output.

From here, you can further customize the map by adding custom pins, showing and hiding the map, adding tooltips, etc.

See also…

• Skin Editor
• Tour Map
• Setting Location
• Add real-time location tracking