Go to Index
Pano2VR 7.1 Docs / Using Custom Map Tiles

Using Custom Map Tiles

Custom map tiles can be added in the Tour Map. These maps can then be used in the skin using the Map Element.

Custom watercolor map tiles by Stamen.
Custom watercolor map tiles by Stamen.

Currently, you can add the following custom maps:

  • OpenStreetMap

  • Mapbox

  • Google Custom Styles

Add a Map


  1. In the Tour Map panel, click the Add Map button, then choose Add Map.

    Add a map.
    Add a map.

  2. Open the Properties panel.

  3. In the Properties panel, choose a map provider. Settings for the particular
    map will then appear.

    Choose a map provider.
    Choose a map provider.

  4. The Map ID will be set and will be unique. You can leave this as it is or add
    your own ID.

  5. Give the map a Title. The title will be used to identify it in the map list
    in the Tour Map.

Add an OpenStreetMap


Add a map using the instructions above.

OpenStreetMap is a good
choice if you do not want to use Google (and their API keys).

You can choose from two map styles:

  • Streets

  • Terrain

Add a Mapbox Map


Mapbox is a great alternative to Google. Although the
tiles are free to use initially, they do require an access token to use and
depending on your needs/use, may cost a fee.

  1. Add a map using the instructions above.

  2. Choose Mapbox from Map providers. You will immediately be reminded that
    you need an access token. Until you provide a token, no map tiles will be
    seen.

    Mapbox warning
    Mapbox warning

  3. Choose the type of style. Note that depending on your custom style, some
    styles here (street, terrain, satellite) might not be available for your
    custom style.

  4. Add your Access Token. You can get your access token from your Account page
    or via a custom style share and use dialog. Use the weblink button below to
    go directly to Mapbox’s custom styles site.

  5. Add your Style URL. Once you’ve created a style using
    mapbox studio, click, Share & use and
    then click, Use. With Web selected in the side bar, scroll down until
    you see both the access token and style URL.

Mapbox Styles
Mapbox Styles

Mapbox Token
Mapbox Token

Add a Google Custom Styles Map


  1. Add a map using the instructions above.

  2. Choose Google Custom Styles Map from the list of map providers.

  3. Add the Google API key. If your client has their own key, you can add it
    here. If there is a key in the skin’s Map element, it will be ignored and
    will use this key.

  4. Add the custom style code. Styles can be created using the
    Google Maps Platform Styling Wizard. When
    you’re done, click Finish in the wizard and copy the JSON code into the
    Google Custom Style Code field.

    Copy the JSON code.
    Copy the JSON code.

Using a Custom Map in the Skin


Once you have added the map in the Tour Map, you will want to make this map
visible in your output. You can do this using the Map element in the Skin
Editor.

  1. Open the Skin Editor.

  2. Add a
    Map Element.

  3. Go to the Map panel. This holds all the settings for the map element.

  4. For Map Type, choose Map.

  5. For the Map, choose your custom Map, indicated by the map’s ID.

  6. Choose an API for how the map is displayed. Google requires an API key which
    may incur costs. If you added a key in the map properties, you do not have to
    enter it again here. ★ If you’ve chosen a map that uses Google tiles (in the
    Map properties), you can only use the Google API for this map. Leaflet is an
    open-source Javascript Maps API. With Google, you’ll get the familiar look
    with a radar, map controls and pins. You will also have Google’s logo and
    copyright notice. Leaflet does not display a logo or copyright notice.

  7. Customize further if needed using the other settings (i.e. change the color
    of the radar beam ,etc.).
    Learn more.

  8. Save the skin and output the project.

See also…


Last modified: Nov 9, 2023