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