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 is the library file for VisioWeb Essential: the simplified API for VisioWeb.
If you are using VisioWeb Essential, make sure to update both libraries at the same time.
These folders contain the documentation for VisioWeb and VisioWeb Essential SDKs.
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 Essential in a web page or web application.
The UI components use UIkit's css framework for a very light and straight-forward integration.
We also use lodash library for efficient data transformation.
For both dependencies we use the CDN versions to make this sample code as simple and easy as possible. It can be used "as is" or as an inspiration to build 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.
- A search panel enables the user to search places by category or by name
mapviewer.html and contains the application code that
uses VisioWeb Essential'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 Essential, powered by a recent framework: Vue.js.
The UI components use Vuetify.
It can be used "as is" or can give insights on how to integrate VisioWeb Essential in a similar context (e.g. React).
The app's entry point, loading the root component
The different components defining the UI/UX behavior.
Manages the state of the application and provides some bindings to VisioWeb Essential.
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