VisioWeb allows you to load and explore 3D maps built from VisioMapEditor.
For support and online documentation, please refer to our developer website.
For offline documentation see the
This delivery is full featured and contains 2 example applications (see below) to help you getting started.
- To view the included example, you will need to load the page from a webserver because VisioWeb uses xmlHttpRequest.
- For development, we suggest installing a local webserver (for example WAMP) for loading the mapviewer page.
We recommend creating an alias (e.g. "visioweb") pointing to the SDK root directory.
- For production, you can use your current webserver.
- VisioWeb is supported on all modern browsers that have WebGL support, including:
- Google Chrome
- Mozilla Firefox
- MacOS, iOS Safari
- Microsoft Edge, IE11
- Although mobile apps are not its primary target, VisioWeb can be used to provide 3D map visualization on mobile platforms.
Please read the below note about VisioWeb integrations in mobile apps.
what's inside ?
This is the main library file.
When upgrading to a new version of VisioWeb, the first action is to update that file.
This directory contains the documentation for VisioWeb SDK.
This directory contains some examples of how to create applications including a VisioWeb-based map component.
Local bundles. Mainly used for testing.
When integrating your client's map you will most likely connect your app to our hosting server using a hash code.
This example is a very basic approach one can have at integrating VisioWeb in a web page or web application.
It can be used "as is" or can be used as an inspiration for your own application.
This file shows an example of VisioWeb's most popular features. It brings useful features to enable the user to explore a complex 3D map composed of several buildings.
- User can manipulate the camera point of view and interact with the map.
- Clicking on a shop on the map will highlight the surface and show a bubble allowing to request a route.
- When selecting a building, the user can explore its different floors but the other buildings and the outside area remains visible.
mapviewer.html and contains the application code that
uses VisioWeb's API to enable the features mentioned above.
You can base your own application on this file or only extract some functions of it.
This is a more modern take at integrating VisioWeb powered by a recent framework: Vue.js.
It can be used "as is" or can give insights on how to integrate VisioWeb in a similar context (e.g. React).
The app's entry point, loading the root component
The different components defining the UI/UX behavior.
Several modules (venue, route, places) managing the shared information and the interactions with VisioWeb SDK.
cd ./application/mapviewer-vue/ yarn install
Compile and hot-reload for development
Then your application will be available at:
Compile and minify for production
Then your minified application will be available at:
(provided that you have set up an alias for your visioweb directory in your local webserver)
Integration in mobile apps
VisioWeb is Visioglobe's solution of choice for displaying 3D maps on websites and interactive kiosks. It's built on a WebGL-based 3D engine and it comes in two forms:
- VisioWeb: a full-featured SDK enabling developers to design their own user experience
- VisioWeb Remote: a no-integration required solution for developers with simple needs. The library is served by our CDN, same as our maps.
Although mobile apps are not its primary target, VisioWeb can be used to provide 3D map visualization on mobile platforms.
Note that in this context, we recommend using VisioWeb rather than VisioWeb Remote, to be able to tune the SDK's settings.
More importantly, when using VisioWeb within a mobile app, developers should pay particular attention to unloading/destroying objects coming from VisioWeb.
Some key APIs:
A common pitfall is to store some instances coming from VisioWeb (visioweb.POI, visioweb.Place, visioweb.Route) in global variables and to forget to remove/nullify them.
The map data should also be mentioned here: a complex venue with a big number of POIs will always be a challenge for mobile platforms, especially so with VisioWeb.
When dealing with such a map, we strongly recommend using VisioMove Essential for mobile applications.
- map data is manageable (e.g. total number of identified places and POIs < 1000)
- target devices feature at least 2GB RAM
- VisioWeb rather than VisioWeb Remote
- release the memory ! destroy VisioWeb objects when they are not used or when leaving the map view