Getting started

VisioWeb Remote allows developers to use VisioWeb through an iframe.

For support, please refer to our developer website.

How it works

Thanks to VisioWeb Remote, you can insert a 3D visualization of your map in your website, using just a few lines of HTML and javascript.

Minimum effort

    <iframe width="720" height="960" id="visioweb"></iframe>
    <script src="//cdn.visioglobe.com/visioweb/remote/visioweb.remote.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        new VisioWebRemote(document.getElementById('visioweb'), {
            hash: 'YOUR_MAP_HASH'
        });
    });
    </script>

A step further: customize the look

    <iframe width="720" height="960" id="visioweb"></iframe>
    <script src="//cdn.visioglobe.com/visioweb/remote/visioweb.remote.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        new VisioWebRemote(document.getElementById('visioweb'), {
            hash: 'YOUR_MAP_HASH',
            ui: {
                colors: {
                    primary: '#EB2600'
                },
                exploration: {
                    type: 'buttons',
                    compact: true
                },
                modules: {
                    zoom: true
                }
            }
        });
    });
    </script>

No physical/system keyboard ? Enable the virtual one !

We use this great library simple-keyboard. See all layouts available.

    <iframe width="720" height="960" id="visioweb"></iframe>
    <script src="//cdn.visioglobe.com/visioweb/remote/visioweb.remote.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        new VisioWebRemote(document.getElementById('visioweb'), {
            hash: 'YOUR_MAP_HASH',
            ui: {
                modules: {
                    search: true
                },
                keyboard: {
                    enabled: true,
                    layout: 'english'
                }
            }
        });
    });
    </script>

Advanced usage: use the API

    <iframe width="720" height="960" id="visioweb"></iframe>
    <script src="//cdn.visioglobe.com/visioweb/remote/visioweb.remote.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        visioweb = new VisioWebRemote(document.getElementById('visioweb'), {
            hash: 'YOUR_MAP_HASH'
        });
        visioweb.ready(() => {
            visioweb.goToPlace({id: 'parking04'});
        })
    });
    </script>

All parameters

For an easy setup, check out our app configurator on VisioWeb Remote's demonstration page.

• property [default]

• baseURL ['https://mapserver.visioglobe.com/']

• hash [VisioIsland sample map's hash] your map's hash for web target

• location

  • id ['']
  • lat [0]
  • lon [0]

• ui

  • colors
    • theme ['light'] 'light' or 'dark'
    • primary ['#00c5eb']
  • exploration
    • type ['selectors'] 'selectors' or 'buttons'
    • position ['top'] 'top' or 'bottom'
    • floating [false]
    • compact [false]
    • zoom [false]
  • placeinfo
    • enabled [true]
    • type ['card'] 'card' or 'bubble'
    • description [true]
    • maxheight [100]
    • maxwidth [300]
  • keyboard
    • enabled [false]
    • layout ['english']
  • route
    • enabled [true]
    • compact [true]
    • waypoint [false]
    • navigation [true]
    • accessible [false]
  • search
    • enabled [true]
    • advanced [false]

• locale

  • language ['en']
  • route
    • start ['start']
    • waypoint ['waypoint']
    • destination ['destination']
    • previous ['previous']
    • next ['next']
    • clear ['clear route']
  • search
    • placeholder ['Search...']
    • categories ['categories']
    • places ['places']
    • place ['place']
    • noresult ['no item found']

• mapview

  • colors
    • pathPast ['#d7d8d9']
    • pathCurrent ['#00c5eb']
    • pathFuture ['#0099ae']
    • active ['#00ff00']
  • config
    • cameratype ['perspective'] 'perspective' or 'orthographic'
    • viewtype ['multibuilding'] 'multibuilding', 'multifloor' or 'singlefloor'
    • animationtype ['translation'] 'translation' or 'opacity'
  • events
    • enableMouseover [true]
    • listenTo [[]] multiple values accepted: 'mouseup', 'exploreStateWillChange', 'exploreStateChanged'

• setPlaceNameOptions (see visioweb.Mapviewer#addPOI's documentation page)

• computeRouteOptions

  • accessibleRoute
    • excludedAttributes [['stairway', 'escalator']]
    • excludedModalities [[]]
  • routingParameters
  • navigationParameters (see visioweb.Mapviewer#addPOI's documentation page) (NB: these options should be set after visioweb/Mapviewer initialization because they can also be modified when parsing the map's extradata)

• initRouteOptions (see visioweb.Route's documentation page)