VisioWeb Remote 1.10.0

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.goTo('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)