VisioWeb Remote 1.9.5

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>

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 product page.

  • baseURL [default: 'https://mapserver.visioglobe.com/']
  • hash [default: VisioIsland sample map's hash] your map's hash for web target
  • ui
    • colors
      • theme [default: 'light'] 'light' or 'dark'
      • primary [default: '#00c5eb']
    • exploration
      • type [default: 'selectors'] 'selectors' or 'buttons'
      • position [default: 'top'] 'top' or 'bottom'
      • floating [default: false]
      • compact [default: false]
    • placeinfo
      • type [default: 'card'] 'card' or 'bubble'
      • description [default: true]
      • navigation [default: true]
      • maxheight [default: 100]
      • maxwidth [default: 300]
    • modules
      • search [default: false]
      • zoom [default: false]
  • locale
    • language [default: 'en']
    • misc
      • search [default: 'Search...']
    • navigation
      • start [default: 'start']
      • waypoint [default: 'waypoint']
      • destination [default: 'destination']
      • previous [default: 'previous']
      • next [default: 'next']
      • clear [default: 'clear route']
  • mapview
    • colors
      • path [default: '#00c5eb']
      • active [default: '#00ff00']
    • config
      • cameratype [default: 'perspective'] 'perspective' or 'orthographic'
      • viewtype [default: 'multibuilding'] 'multibuilding', 'multifloor' or 'singlefloor'
      • animationtype [default: 'translation'] 'translation' or 'opacity'